HTML text fundamentals - Learn web development
the relevant content, so css/javascript can effectively target it. we therefore need to give our content structural markup. active learning: giving our content structure let's jump straight in with a live example. in the example below, add elements to the raw text in the input field so that it appears as a heading and two paragraphs in the output field. if you make a mistake, you can always reset it using the reset button. if you get stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short ...
...in-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
...h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%">my short story i am a statistician and my name is trish. ...
...And 12 more matches

Index - Web APIs
b audio api, sound the loop property's default value is false. 117 audiobuffersourcenode.loopend api, audio, audiobuffersourcenode, media, property, reference, web audio api, loopend, sound a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart). this property is only used if the loop property is true. 118 audiobuffersourcenode.loopstart api, audio, audiobuffersourcenode, media, property, reference, web audio api, loopstart, sound the loopstart property of the audiobuffersourcenode interface is a floating-point value indicating, in seconds, where in the audiobuffer the restart of t...
...hod, reference the canvasrenderingcontext2d.rect() method of the canvas 2d api adds a rectangle to the current path. 590 canvasrenderingcontext2d.removehitregion() api, canvas, canvasrenderingcontext2d, experimental, method, reference the canvasrenderingcontext2d method removehitregion() removes a given hit region from the canvas. 591 canvasrenderingcontext2d.resettransform() canvas, canvasrenderingcontext2d, experimental, method, reference the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix. 592 canvasrenderingcontext2d.restore() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.restore() method of the canvas 2d api r...
...as 2d api's canvasrenderingcontext2d interface sets the line dash pattern used when stroking lines. it uses an array of values that specify alternating lengths of lines and gaps which describe the pattern. 598 canvasrenderingcontext2d.settransform() api, canvas, canvasrenderingcontext2d, method, reference the canvasrenderingcontext2d.settransform() method of the canvas 2d api resets (overrides) the current transformation to the identity matrix, and then invokes a transformation described by the arguments of this method. this lets you scale, rotate, translate (move), and skew the context. 599 canvasrenderingcontext2d.shadowblur api, canvas, canvasrenderingcontext2d, property, reference the canvasrenderingcontext2d.shadowblur property of the canvas 2d api...
...And 11 more matches

Advanced text formatting - Learn web development
low of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the input field so that it appears as a description list in the output field. you could try using your own terms and descriptions if you like. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> b...
...s="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together. eggs the glue that binds the cake together. coffee the drink that gets the world running in the morning. ...
...And 8 more matches

Getting started with HTML - Learn web development
element edit the line below in the input area by wrapping it with the tags <em> and </em>. to open the element, put the opening tag <em> at the start of the line. to close the element, put the closing tag </em> at the end of the line. doing this should give the line italic text formatting! see your changes update live in the output area. if you make a mistake, you can clear your work using the reset button. if you get really stuck, press the show solution button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my t...
...ion button to see the answer. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
.... playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> this is my text. ...
...And 8 more matches

Styling Vue components with CSS - Learn web development
global styles in single file components (.vue files). component-scoped styles in single file components. to help familiarize you with each one, we'll use a combination of all three to give our app a nicer look and feel. styling with external css files you can include external css files and apply them globally to your app. let's look at how this is done. ...
...o start with, create a file called reset.css in the src/assets directory. files in this folder get processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
...e a file called reset.css in the src/assets directory. files in this folder get processed by webpack. this means we can use css pre-processors (like scss) or post-processors (like postcss). while this tutorial will not be using such tools, it's good to know that when including such code in the assets folder it will be processed automatically. ...
...And 6 more matches

Using IndexedDB - Web APIs
image url:<br/> <span class="note">(same origin url)</span> </label> </td> <td> <input type="text" id="pub-file-url" name="pub-file-url"/> </td> </tr> </tbody> </table> <div class="button-pane"> <input type="button" id="add-button" value="add publication" /> <input type="reset" id="register-form-reset"/> </div> </form> <form id="delete-form"> <table> <tbody> <tr> <td> <label for="pub-biblioid-to-delete"> bibliographic id:<br/> <span class="note">(isbn, issn, etc.)</span> </label> </td> <td> <input type="text" id="pub-bibli...
... // thus the count text below will be displayed before the actual pub list // (not that it is algorithmically important in t...
...rrorcode); }; } function displayactionsuccess(msg) { msg = typeof msg != 'undefined' ? "success: " + msg : "success"; $('#msg').html('<span class="action-success">' + msg + '</span>'); } function displayactionfailure(msg) { msg = typeof msg != 'undefined' ? ...
...And 6 more matches

CustomizableUI.jsm
f any) before which a widget will be inserted, acontainer the actual dom container (could be an overflow panel in case of an overflowable toolbar), and awasremoval is true iff the action about to happen is the removal of the dom node. onwidgetafterdomchange(anode, anextnode, acontainer, awasremoval) like onwidgetbeforedomchange, but fired after the change to the dom node of the widget. onwidgetreset(anode, acontainer) fired after a reset to default placements moves a widget's node to a different location. anode is the widget's node, acontainer is the area it was moved into (nb: it might already have been there and been moved to a different position!) onwidgetundomove(anode, acontainer) fired after undoing a reset to default placements moves a widget's node to a different location. anode i...
... is the area it was moved into (nb: it might already have been there and been moved to a different position!) onwidgetundomove(anode, acontainer) fired after undoing a reset to default placements moves a widget's node to a different location. anode is the widget's node, acontainer is the area it was moved into (nb: it might already have been there and been moved to a different position!) onareareset(aarea, acontainer) fired after a reset to default placements is complete on an area's dom node. note that this is fired for each dom node. aarea is the area that was reset, acontainer the dom node that was reset. onareanodeunregistered(aarea, anode, areason) fired when an area's dom node is unregistered. aarea is the area for which a node was unregistered, anode the dom node which was unregist...
... widgetgroupwrapper createwidget(awidgetspecification); void destroywidget(awidgetid); widgetgroupwrapper getwidget(awidgetid); array getunusedwidgets(awindow); array getwidgetidsinarea(aareaid); array getwidgetsinarea(aareaid); string getareatype(aareaid); domelement getcustomizetargetforarea(aareaid, awindow); void reset(); void undoreset(); void removeextratoolbar(); object getplacementofwidget(awidgetid); bool iswidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, aformatargs, adef); void hidepanelfornode(anode); bool isspecialwidget(awidgetid); void addpanelcloselis...
...And 5 more matches

sslfnc.html
to realize that the problem is the lack of a certificate. it is better to allow the ssl handshake to complete and then have your application return an error message to the client that informs the user of the need for a certificate. as mentioned in communication, when an application imports a socket into ssl after the tcp connection on that socket has already been established, it must call ssl_resethandshake to determine whether the socket is for a client or server. at first glance this may seem unnecessary, since ssl_enable can set ssl_handshake_as_client or ssl_handshake_as_server. however, these settings control the behavior of pr_connect and pr_accept only; if you don't call one of those functions after importing a non-ssl socket with ssl_import (as in the case of an already established ...
...tocols that are commonly enabled in both applications. note that ssl3 and tls share the same set of cipher suites. when both ssl3 and tls are enabled, all ssl3/tls cipher suites that are enabled are enabled for both ssl3 and tls. as mentioned in communication, when an application imports a socket into ssl after the tcp connection on that socket has already been established, it must call ssl_resethandshake to indicate whether the socket is for a client or server. at first glance this may seem unnecessary, since ssl_optionset can set ssl_handshake_as_client or ssl_handshake_as_server. however, these settings control the behavior of pr_connect and pr_accept only; if you don't call one of those functions after importing a non-ssl socket with ssl_import (as in the case of an already establishe...
...reason for these to be mutually exclusive. this restirction will be removed in future releases. if a socket that is already connected gets imported into ssl after it has been connected (that is, after pr_accept or pr_connect has returned), then no implicit ssl handshake configuration as a client or server will have been done by pr_connect or pr_accept on that socket. in this case, a call to ssl_resethandshake is required to explicitly configure the socket to handshake as a client or as a server. if ssl_resethandshake is not called to explicitly configure the socket handshake, a crash is likely to occur when the first i/o operation is done on the socket after it is imported into ssl. ssl_optionget ssl_optionget gets the value of a specified ssl option on a specified ssl socket. synt...
...And 5 more matches

Component; nsIPrefBranch
t avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void lockpref(in string aprefname); boolean prefhasuservalue(in string aprefname); boolean prefislocked(in string aprefname); void removeobserver(in string adomain, in nsiobserver aobserver); void resetbranch(in string astartingat); void setboolpref(in string aprefname, in long avalue); void setcharpref(in string aprefname, in string avalue); requires gecko 58 void setstringpref(in string aprefname, in utf8string avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); void setintpref(in string aprefname, in long a...
...quick snippet: var myobserver = { observe: function(asubject, atopic, adata) { //do stuff here } } aholdweak true holds a weak reference to aobserver. the object must implement the nsisupportsweakreference interface or this will fail. false holds a strong reference to aobserver. clearuserpref() called to clear a user set value from a specific preference. this will, in effect, reset the value to the default value. if no default value exists the preference will cease to exist. note: this method does nothing if the prefbranch it is called on is a default branch. void clearuserpref( in string aprefname ); parameters aprefname the preference to be cleared. remarks note: prior to gecko 6.0, this method would throw an exception if there was no user value set for the ...
... preference to be locked. prefhasuservalue() called to check if a specific preference has a user value associated to it. note: this method can be called on either a default or user branch but, in effect, always operates on the user branch. note: if a preference was manually set to a value that equals the default value, then the preference no longer has a user set value, i.e. it is considered reset to its default value. in particular, this method will return false for such a preference and the preference will not be saved to a file by nsiprefservice.savepreffile(). boolean prefhasuservalue( in string aprefname ); parameters aprefname the preference to be tested. return value returns boolean - true the preference has a user set value. false the preference only has a default value...
...And 5 more matches

Useful string methods - Learn web development
pulation code. in each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. you don't need to understand arrays or loops right now — these will be explained in future articles. all you need to do in each case is write the code that will output the strings in the format that we want them in. each example comes with a "reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "show solution" button you can press to see a potential answer if you get really stuck. filtering greeting messages in the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the christmas messages. we want you to fi...
...oon']; for (let i = 0; i < greetings.length; i++) { let input = greetings[i]; // your conditional test needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); con...
... .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; soluti...
...And 4 more matches

Images in HTML - Learn web development
servers, but this is just for learning purposes, so we'll let you off this one time. we would also like you to: add some alt text, and check that it works by misspelling the image url. set the image's correct width and height (hint: it is 200px wide and 171px high), then experiment with other values to see what the effect is. set a title on the image. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <i...
...e show solution button to see an answer: playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="min-height: 100px; width: 95%"> <img> </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solu...
...t-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var solution = document.getelementbyid('solution'); var output = document.queryselector('.output'); var code = textarea.value; var userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solu...
...And 3 more matches

Looping code - Learn web development
er each iteration, not up, so you don't want i++ — how do you iterate downwards? note: if you start typing the loop (for example (while(i>=0)), the browser might stuck because you have not yet entered the end condition. so be careful with this. you can start writing your code in a comment to deal with this issue and remove the comment after you finish. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. active learning <h2>live output</h2> <div class="output" style="height: 410px;overflow: auto;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300...
...ess esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 300px;width: 95%"> let output = document.queryselector('.output'); output.innerhtml = ''; // let i = 10; // const para = document.createelement('p'); // para.textcontent = ; // output.appendchild(para); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset');...
....a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; soluti...
...And 3 more matches

Making decisions in your code — conditionals - Learn web development
l have to look up the number of days in each month of the year. you can ignore leap years for the purposes of this example. hints: you are advised to use logical or to group multiple months together into a single condition; many of them share the same number of days. think about which number of days is the most common, and use that as a default value. if you make a mistake, you can always reset the example with the "reset" button. if you get really stuck, press "show solution" to see a solution. playable code <h2>live output</h2> <div class="output" style="height: 500px;overflow: auto;"> <label for="month">select month: </label> <select id="month"> <option value="january">january</option> <option value="february">february</option> <option value="march">march</option> ...
...ue; // add conditional here createcalendar(days, choice); } function createcalendar(days, choice) { list.innerhtml = ''; h1.textcontent = choice; for (let i = 1; i <= days; i++) { const listitem = document.createelement('li'); listitem.textcontent = i; list.appendchild(listitem); } } createcalendar(31,'january'); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> .output * { box-sizing: border-box; } .output ul { padding-left: 0; } .output li { display: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16...
...: block; float: left; width: 25%; border: 2px solid white; padding: 5px; height: 40px; background-color: #4a2db6; color: white; } html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.ad...
...And 3 more matches

Storage
ps.platform on the news server news.mozilla.org. to report bugs, use bugzilla. the overall procedure for use is: get the storage service - mozistorageservice. open a connection to the database of your choice - mozistorageconnection. create statements to execute on the connection - mozistoragestatement. bind parameters to a statement as necessary. execute the statement. check for errors. reset the statement. opening a connection javascript example of opening my_db_file_name.sqlite in the profile directory: components.utils.import("resource://gre/modules/services.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); let file = fileutils.getfile("profd", ["my_db_file_name.sqlite"]); let dbconn = services.storage.opendatabase(file); // will also create the file if i...
...ent->getint32(0, &value); ns_ensure_success(rv, rv); } you can obtain other types of data by using the various methods available on mozistoragevaluearray. alternatively, if you do not expect any results but still need to execute a bound statement, you can simply call mozistoragestatement.execute(). this is equivalent to calling mozistoragestatement.executestep() and then mozistoragestatement.reset(). resetting a statement when you execute a statement synchronously, it is important to make sure you reset your statement. you can accomplish this by calling mozistoragestatement.reset() on the statement. if you end up finalizing the statement (see mozistoragestatement.finalize()) you do not need to worry about calling mozistoragestatement.reset(). you should do this before you reuse the state...
... execute a statement synchronously, it is important to make sure you reset your statement. you can accomplish this by calling mozistoragestatement.reset() on the statement. if you end up finalizing the statement (see mozistoragestatement.finalize()) you do not need to worry about calling mozistoragestatement.reset(). you should do this before you reuse the statement. warning: if you fail to reset a write statement, it will continue to hold a lock on the database preventing future writes or reads. additionally, if you fail to reset a read statement, it will prevent any future writes to the database. in javascript, the language makes it pretty easy to ensure that you always reset a statement. ...
...And 3 more matches

Menu - Archive of obsolete content
items array an array of menuitems in the menu. read-only. methods add(items) clear() contexton(node) hide() insertbefore(newitems, target) item(target) popupon(node) remove(target) replace(target, newitems) reset() set(items) show(anchornode) add(items) adds items to the menu. the position at which the items are added is at jetpack's discretion. this method and set() are the recommended methods of adding items to a menu. parameters items a single menuitem or an array of menuitems. clear() removes all items from the menu, even items not added by t...
...meters target indicates the existing item to remove. see targets. if no such target exists, the call silently fails. replace(target, newitems) replaces an item with new items. parameters target indicates the existing item to replace. see targets. if no such target exists, the call silently fails. newitems a single menuitem or an array of menuitems. reset() reverts all the changes to the menu that the feature has made. for menus that the feature creates, this is equivalent to clear(). set(items) equivalent to calling reset() and then add(items). this method and add() are the recommended methods of adding items to a menu. parameters items a single menuitem or an array of menuitems. show(anchornode) shows the menu immediately. param...
...a set of context menus. jetpack.menu.context.page is the set of context menus that appear on the page: the image menu, link menu, and so on. contextmenuset defines many of the same methods that jetpack.menu does. features can use these methods to modify all the menus in a set at once. they are: add(items) clear() insertbefore(newitems, target) remove(target) replace(target, newitems) reset() set(items) the following jetpack.menu properties can also be defined on a contextmenuset: beforehide beforeshow note that a jetpack.menu object is passed to beforehide and beforeshow, since they are called during a context menu's invocation. they may then modify the menu. individual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus a...
...And 2 more matches

Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
n, 2000); clearinterval(myinterval); active learning: creating your own stopwatch! with this all said, we've got a challenge for you. take a copy of our setinterval-clock.html example, and modify it to create your own simple stopwatch. you need to display a time as before, but in this example, you need: a "start" button to start the stopwatch running. a "stop" button to pause/stop it. a "reset" button to reset the time back to 0. the time display to show the number of seconds elapsed, rather than the actual time. here's a few hints for you: you can structure and style the button markup however you like; just make sure you use semantic html, with hooks to allow you to grab the button references using javascript. you probably want to create a variable that starts at 0, then increm...
...ount of seconds left over when all of the hours have been removed, divided by 60. the number of seconds will be the amount of seconds left over when all of the minutes have been removed. you'll want to include a leading zero on your display values if the amount is less than 10, so it looks more like a traditional clock/watch. to pause the stopwatch, you'll want to clear the interval. to reset it, you'll want to set the counter back to 0, clear the interval, and then immediately update the display. you probably ought to disable the start button after pressing it once, and enable it again after you've stopped/reset it. otherwise multiple presses of the start button will apply multiple setinterval()s to the clock, leading to wrong behavior. note: if you get stuck, you can find our ve...
...} spinner.style.transform = 'rotate(' + rotatecount + 'deg)'; raf = requestanimationframe(draw); } now it is time to set up the initial state of the app when the page first loads. add the following two lines, which simply hide the results paragraph and spinner container using display: none;. result.style.display = 'none'; spinnercontainer.style.display = 'none'; next, define a reset() function, which sets the app back to the original state required to start the game again after it has been played. add the following at the bottom of your code: function reset() { btn.style.display = 'block'; result.textcontent = ''; result.style.display = 'none'; } okay, enough preparation! it's time to make the game playable! add the following block to your code. the start() f...
...And 2 more matches

mozIStorageStatement
in autf8string asqlstatement); obsolete since gecko 1.9.1 void finalize(); mozistoragestatement clone(); autf8string getparametername(in unsigned long aparamindex); unsigned long getparameterindex(in autf8string aname); autf8string getcolumnname(in unsigned long acolumnindex); unsigned long getcolumnindex(in autf8string aname); void reset(); astring escapestringforlike(in astring avalue, in wchar aescapechar); void bindparameters(in mozistoragebindingparamsarray aparameters); mozistoragebindingparamsarray newbindingparamsarray(); void bindutf8stringparameter(in unsigned long aparamindex, in autf8string avalue); void bindstringparameter(in unsigned long aparamindex, in astring avalue);...
...o-based numerical index for the column to get data from. return value an autf8string with the of the column name for the specified index. getcolumnindex() obtains the index of the column with the specified name. unsigned long getcolumnindex( in autf8string aname ); parameters aname name of the column. return value the zero-based numerical index for the column to get data from. reset() resets the bound parameters and statement execution state. this must be called before reusing the statement. note: javascript callers should always wrap their execution in a try block, and have a reset statement in a finally block. see the overview document on storage for more details. void reset() escapestringforlike() escapes a string for sql like search. note: consumers will have to ...
... execution functions these functions are discussed in more detail with sample code in the overview document. executeasync() starts the execution of a query asynchronously using the currently bound parameters. the optional callback routine receives notifications about the progress of the query. for sample code and more details, see the overview document. note: the statement does not have to be reset before being reused. mozistoragependingstatement executeasync( [optional] mozistoragestatementcallback acallback ); parameters acallback a callback object that will be notified of progress, errors, and query completion. this parameter is optional. return value a mozistoragependingstatement object that can be used to cancel the execution of the statement. executestep() executes a que...
...And 2 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
new teleportation offset; that is, a transform applied to everything to adapt the position and orientation data from webxr to your needs. you can do this by creating a new reference space that incorporates into its effective origin the distance the viewer's position jumped since the previous frame, using the xrreferencespace method getoffsetreferencespace(). ...
...istance the viewer's position jumped since the previous frame, using the xrreferencespace method getoffsetreferencespace(). <<<--- needs an example --->>> the reset event <<<--- this section probably has problems still; corrections are appreciated --->>> when a discontinuity or break in the native or effective origin of a reference space occurs, the user agent will send the xrreferencespace a reset event. this event indicates that a significant change to the origin's position has taken place relative to the user's environment. ...
... example --->>> the reset event <<<--- this section probably has problems still; corrections are appreciated --->>> when a discontinuity or break in the native or effective origin of a reference space occurs, the user agent will send the xrreferencespace a reset event. this event indicates that a significant change to the origin's position has taken place relative to the user's environment. a reset may occur because the xr hardware lost connectivity for a time, resulting in the user's movements not being properly tracked for a while. upon recovery of tracking, a reset means tracking has been restored and the new position information represents the actual position information provided by the xr hardware, rather than cached or "best-guess" data. ...
...And 2 more matches

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
t of multiple choices with the same name value. <input type="radio" name="radio"/> range a control for entering a number whose exact value is not important. displays as a range widget defaulting to the middle value. used in conjunction min and max to define the range of acceptable values. <input type="range" name="range" min="0" max="25"/> html5 reset a button that resets the contents of the form to default values. not recommended. <input type="reset" name="reset"/> search a single-line text field for entering search strings. line-breaks are automatically removed from the input value. may include a delete icon in supporting browsers that can be used to clear the field. displays a search icon instead of enter key...
...e a string specifying a name for the input control. this name is submitted along with the control's value when the form data is submitted. what's in a name consider the name a required attribute (even though it's not). if an input has no name specified, or name is empty, the input's value is not submitted with the form! (disabled controls, unchecked radio buttons, unchecked checkboxes, and reset buttons are also not sent.) there are two special cases: _charset_ : if used as the name of an <input> element of type hidden, the input's value is automatically set by the user agent to the character encoding being used to submit the form. isindex: for historical reasons, the name isindex is not allowed. name and radio buttons the name attribute creates a unique behavior for radio...
...lowing heuristics to determine the locale to validate the user's input (at least for type="number"): try the language specified by a lang/xml:lang attribute on the element or any of its parents. try the language specified by any content-language http header. or, if none specified, use the browser's locale. technical summary content categories flow content, listed, submittable, resettable, form-associated element, phrasing content. if the type is not hidden, then labelable element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. implicit aria role type=button: button type=ch...
...And 2 more matches

Creating annotations - Archive of obsolete content
lement: this is the page element that is the current candidate for an annotation. the matched element is highlighted and has a click handler bound to it which sends a message to the main add-on code. the selector page mod can be switched on and off using a message from the main add-on code. it is initially off: var matchedelement = null; var originalbgcolor = null; var active = false; function resetmatchedelement() { if (matchedelement) { (matchedelement).css('background-color', originalbgcolor); (matchedelement).unbind('click.annotator'); } } self.on('message', function onmessage(activation) { active = activation; if (!active) { resetmatchedelement(); } }); this selector listens for occurrences of the jquery mouseenter event. when a mouseenter event is triggered the...
...ement is eligible for annotation, then the selector highlights that element and binds a click handler to it. the click handler sends a message called show back to the main add-on code. the show message contains: the url for the page, the id attribute value, and the text content of the page element. ...
... because this code uses jquery, you'll need to download that as well, and save it in data. updating main.js go back to main.js and add the code to create the selector into the main function: var selector = pagemod.pagemod...
... because this code uses jquery, you'll need to download that as well, and save it in data. updating main.js go back to main.js and add the code to create the selector into the main function: var selector = pagemod.pagemod({ include: ['*'], contentscriptwhen: 'ready', contentscriptfile: ...

Style System Overview - Archive of obsolete content
elector { property: value; property: value; } css style rules what do style rules mean? selector matches elements in the document. rule applies to matched elements. “cascaded” value for property + element: if 0 rules matching the element have the property: some properties inherit and some properties use initial value. inherited: 'font-size', 'color', etc. “reset”: 'border', 'background', etc. 1 matching rule: use value 2+ matching rules: cascade decides which wins: sort by origin (ua, user, author) & weight (!important), then specificity of selector, then order example document source <doc> <title>a few quotes</title> <para class="emph"> franklin said that <quote>"a penny saved is a p...
... ↓ quote: a quote: a ↓ span: e class="emph" the rule tree and style data all of the style structs that can be obtained through a style context add up to around 900 bytes. this is big, and slow to fill in. the rule tree allows sharing. to allow for optimizations, each style struct contains only inherited properties or only “reset” properties. (thus these structs can be called inherited structs or reset structs.) in the normal case, a style rule has a small number of declarations (hitting only a small number of structs). the rule tree and style data we optimize for the structs for which the rules have no declarations. in this case: inherited structs: same value as parent style context (optimization breaks when pro...
...ructs can be called inherited structs or reset structs.) in the normal case, a style rule has a small number of declarations (hitting only a small number of structs). the rule tree and style data we optimize for the structs for which the rules have no declarations. in this case: inherited structs: same value as parent style context (optimization breaks when property has non-inherit value) reset structs: same struct for every style context using rule node (optimization breaks when a value is explicit inherit) reset structs: rule nodes have the same shared struct as their parent (optimization breaks when a property is specified with a different value or when there is an explicit inherit value). ...
... style data cached in style context tree if a style struct for a context depends on the data in the parent context, we will cache that struct in the style context tree. ...

jspage - Archive of obsolete content
s.stoppropagation().preventdefault(); },stoppropagation:function(){if(this.event.stoppropagation){this.event.stoppropagation();}else{this.event.cancelbubble=true;}return this;},preventdefault:function(){if(this.event.preventdefault){this.event.preventdefault(); }else{this.event.returnvalue=false;}return this;}});function class(b){if(b instanceof function){b={initialize:b};}var a=function(){object.reset(this);if(a._prototyping){return this; }this._current=$empty;var c=(this.initialize)?this.initialize.apply(this,arguments):this;delete this._current;delete this.caller;return c;}.extend(this); a.implement(b);a.constructor=class;a.prototype.constructor=a;return a;}function.prototype.protect=function(){this._protected=true;return this;};object.reset=function(a,c){if(c==null){for(var e in a){object.r...
...;delete this._current;delete this.caller;return c;}.extend(this); a.implement(b);a.constructor=class;a.prototype.constructor=a;return a;}function.prototype.protect=function(){this._protected=true;return this;};object.reset=function(a,c){if(c==null){for(var e in a){object.reset(a,e); }return a;}delete a[c];switch($type(a[c])){case"object":var d=function(){};d.prototype=a[c];var b=new d;a[c]=object.reset(b);break;case"array":a[c]=$unlink(a[c]); break;}return a;};new native({name:"class",initialize:class}).extend({instantiate:function(b){b._prototyping=true;var a=new b;delete b._prototyping;return a; },wrap:function(a,b,c){if(c._origin){c=c._origin;}return function(){if(c._protected&&this._current==null){throw new error('the method "'+b+'" cannot be called.'); }var e=this.caller,f=this._current;th...
...(function(l){return l.selected;}));},getcomputedstyle:function(m){if(this.currentstyle){return this.currentstyle[m.camelcase()]; }var l=this.getdocument().defaultview.getcomputedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("input, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagname.tolowercase()=="select")?element.getselected(m).map(function(o){return o.value; }):((m.type=="radio"||m.type=="checkbox")&&!m.checked)?null:m.value;$splat(n).each(function(o){if(typeof o!="undefined"){l.push(m.name+"="+encodeuricomponent(o)); }});});return l.join("&");},clone:function(o,l){o=o!==false;var r=this.clonenode(o);var n=function(v,u){if(!l){v.
...r c=d.retrieve("events");if(!c){return this;}if(!a){for(var b in c){this.cloneevents(d,b); }}else{if(c[a]){c[a].keys.each(function(e){this.addevent(a,e);},this);}}return this;}});element.nativeevents={click:2,dblclick:2,mouseup:2,mousedown:2,contextmenu:2,mousewheel:2,dommousescroll:2,mouseover:2,mouseout:2,mousemove:2,selectstart:2,selectend:2,keydown:2,keypress:2,keyup:2,focus:2,blur:2,change:2,reset:2,select:2,submit:2,load:1,unload:1,beforeunload:2,resize:1,move:1,domcontentloaded:1,readystatechange:1,error:1,abort:1,scroll:1}; (function(){var a=function(b){var c=b.relatedtarget;if(c==undefined){return true;}if(c===false){return false;}return($type(this)!="document"&&c!=this&&c.prefix!="xul"&&!this.haschild(c)); };element.events=new hash({mouseenter:{base:"mouseover",condition:a},mouseleave...

Theme changes in Firefox 4 - Archive of obsolete content
eference. bookmarks toolbar #personaltoolbar small tab bar #tabstoolbar small add-on bar #addon-bar small custom toolbars some other value small or large depending on user preference. ...
...all custom toolbars some other value small or large depending on user preference. overriding the default values themes can override the value of the iconsize attribute on each toolbar by specifying a special value for the counter-reset css property on the toolbar itself. css property on the toolbar element value forced on the iconsize attribute counter-reset: largeicons; large counter-reset: smallicons; small for toolbars in the upper part of the window, the counter-reset property can be set using a css rule that is applied depending on the user preference in the toolbar customization palette. to do this, use a css rule that depends on the iconsize attribute on the #navigator-toolbox element. note: a rule that depends on the u...
... the user preference cannot be applied to the add-on bar because it is not a child of the #navigator-toolbox element. however, the theme can force large icons in the add-on bar regardless of the user preference. examples the default windows theme wants to force small icons on the navigation bar regardless of the user preference. ...
...ser preference. examples the default windows theme wants to force small icons on the navigation bar regardless of the user preference. thus, it includes this rule in browser.css: #nav-bar { counter-reset: smallicons; } to use large icons for add-on buttons in the bookmarks toolbar when the related user preference is set: #navigator-toolbox[iconsize="large"] > #personaltoolbar { counter-reset: largeicons; } to use large icons everywhere, including the menu bar, regardless of the user preference: #navigator-toolbox > toolbar, #addon-bar { counter-reset: largeicons; } creating a theme that works for firefox 4 on mac os x create a new directory (for example, my_theme). inside that, create another new directory chrome. now copy all of the directories from omni.jar mentioned above ...

Browser Feature Detection - Archive of obsolete content
yle true true true borderbottomstyle true true true borderleftstyle true true true bottom true true true captionside true false true clear true true true clip true true true content true false true counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch ...
...tstyle', 'supported': false}, {name: 'borderbottomstyle', 'supported': false}, {name: 'borderleftstyle', 'supported': false}, {name: 'bottom', 'supported': false}, {name: 'captionside', 'supported': false}, {name: 'clear', 'supported': false}, {name: 'clip', 'supported': false}, {name: 'content', 'supported': false}, {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported':...
...yout', 'supported': false}, {name: 'textshadow', 'supported': false}, {name: 'top', 'supported': false}, {name: 'unicodebidi', 'supported': false}, {name: 'visibility', 'supported': false}, {name: 'voicefamily', 'supported': false}, {name: 'volume', 'supported': false}, {name: 'widows', 'supported': false}, {name: 'zindex', 'supported': false} ] }; function supports(object, featureset) { var i; var features = _features[featureset]; var level = 0; if (!features) return level; for (i = 0; i < features.length; i++) if (typeof(object[features[i].name]) != 'undefined') { features[i].supported = true; ++level; } return math.floor( (100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _featu...
...i; var features = _features[featureset]; var level = 0; if (!features) return level; for (i = 0; i < features.length; i++) if (typeof(object[features[i].name]) != 'undefined') { features[i].supported = true; ++level; } return math.floor( (100 * level) / features.length ); } function generatereport(object, featureset, description) { var i; var features = _features[featureset]; document.write('<p><b>' + featureset + ' support for properties/methods in ' + description + ', percentage of names defined = ' + supports(object, featureset) + '%<\/b><\/p>'); document.write('<table cellspacing="0">'); for (i = 0; i < features.length; i++) { if (features[i].supported) document.write('<tr><td>' + features[i].name + '<\/td><td>' + features[i].supported + '<\...

Basic native form controls - Learn web development
objective: to understand in detail the original set of native form widgets available in browsers for collecting data, and how to implement them using html. you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <input>. this article covers: the common input types button, checkbox, file, hidden, image, password, radio, reset, submit, and text. some of the attributes that are common to all form controls. note: the features discussed in this article are supported in all browsers, which is not the case for all form controls. we cover newer form controls added in html5 in the next two articles. if you want a more advanced reference, you should consult our html forms element reference, and in particular our extensive ...
...ll the others automatically get unchecked. when the form is sent, only the value of the checked radio button is sent. if none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form. once one of the radio buttons in a same-named group of buttons is checked, it is not possible for the user to uncheck all of the buttons without resetting the form. <fieldset> <legend>what is your favorite meal?</legend> <ul> <li> <label for="soup">soup</label> <input type="radio" id="soup" name="meal" value="soup" checked> </li> <li> <label for="curry">curry</label> <input type="radio" id="curry" name="meal" value="curry"> </li> <li> <label for="pizza">pizza</label> <input type="radi...
...refox 71 and safari 13 on macos and chrome 79 and edge 18 on windows 10. actual buttons the radio button isn't actually a button, despite its name; let's move on and look at actual buttons! there are three input types that produce buttons: submit sends the form data to the server. for <button> elements, omitting the type attribute (or an invalid value of type) results in a submit button. reset resets all form widgets to their default values. button buttons that have no automatic effect but can be customized using javascript code. then we also have the <button> element itself. this can take a type attribute of value submit, reset, or button to mimic the behevior of the three <input> types mentioned above. the main difference between the two is that actual <button> elements are much...
...so renders as a button. we'll cover that later too. note: you can find the examples from this section on github as button-examples.html (see it live also). below you can find examples of each button <input> type, along with the equivalent button type. submit <button type="submit"> this is a <strong>submit button</strong> </button> <input type="submit" value="this is a submit button"> reset <button type="reset"> this is a <strong>reset button</strong> </button> <input type="reset" value="this is a reset button"> anonymous <button type="button"> this is an <strong>anonymous button</strong> </button> <input type="button" value="this is an anonymous button"> buttons always behave the same whether you use a <button> element or an <input> element. as you can see from the ex...

Adding vector graphics to the Web - Learn web development
some svg for fun. in the input section below you'll see that we've already provided you with some samples to get you started. you can also go to the svg element reference, find out more details about other toys you can use in svg, and try those out too. this section is all about practising your research skills, and having some fun. if you get stuck and can't get your code working, you can always reset it using the reset button. playable code <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 200px;"> <svg width="100%" height="100%"> <rect width="100%" height="100%" fill...
...100%"> <rect width="100%" height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> hello! ...
..." height="100%" fill="red" /> <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> <polygon points="120,0 240,225 0,225" fill="green"/> <text x="50" y="100" font-family="verdana" font-size="55" fill="white" stroke="black" stroke-width="2"> hello! ...
...playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution" disabled> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; s...

From object to iframe — other embedding technologies - Learn web development
a google map in the example: go to google maps and find a map you like. click on the "hamburger menu" (three horizontal lines) in the top left of the ui. select the share or embed map option. select the embed map option, which will give you some <iframe> code — copy this. insert it into the input box below, and see what the result is in the output. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see an answer. playable code <h2>live output</h2> <div class="output" style="min-height: 250px;"> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="input" style="width: 95%;min-height: 100px;"> <...
...ss the show solution button to see an answer. ...
...to see an answer. ...
...v class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); const output = document.queryselector('.output'); let code = textarea.value; let userentry = textarea.value; function updatecode() { output.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = htmlsolution; s...

extIPreferenceBranch
implemented via xpcom service for extiapplication: see the instructions on the fuel (firefox), steel (thunderbird) and smile (seamonkey) pages. method overview boolean has(in astring aname) extipreference get(in astring aname) nsivariant getvalue(in astring aname, in nsivariant adefaultvalue) void setvalue(in astring aname, in nsivariant avalue) void reset() attributes attribute type description root readonly attribute astring the name of the branch root. all readonly attribute nsivariant array of extipreference listing all preferences in this branch. events readonly attribute extievents the events object for the preferences supports: "change" methods has() check to see if...
...or "false". an integer preference appears as a javascript number, and a boolean appears as a javascript boolean. there are no other types supported by the preference subsystem. setvalue() sets the value of a preference with the given name. ...
...". an integer preference appears as a javascript number, and a boolean appears as a javascript boolean. there are no other types supported by the preference subsystem. setvalue() sets the value of a preference with the given name. ...
...system. setvalue() sets the value of a preference with the given name. void setvalue(in astring aname, in nsivariant avalue) parameters aname the name of a preference avalue the value of a preference return value reset() resets all preferences in a branch back to their default values. note: this function has not been implemented and will raise an exception. ...

Using dynamic styling information - Web APIs
s will not affect any other property declarations for that element's styles, such as padding or margin or font, for example. to change a particular element's style, you can adapt the following example for the element(s) you want to style. <html> <head> <title>simple style example</title> <script type="text/javascript"> function alterstyle(elem) { elem.style.background = 'green'; } function resetstyle(elemid) { elem = document.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" onclick="alterstyle(this);"> click here to change background color. </p> <!-- passes the 'p1' id of another element's style ...
...t.getelementbyid(elemid); elem.style.background = 'white'; } </script> <style type="text/css"> #p1 { border: solid blue 2px; } </style> </head> <body> <!-- passes a reference to the element's object as parameter 'this'. --> <p id="p1" onclick="alterstyle(this);"> click here to change background color. </p> <!-- passes the 'p1' id of another element's style to modify. --> <button onclick="resetstyle('p1');">reset background color</button> </body> </html> the getcomputedstyle() method on the document.defaultview object returns all styles that have actually been computed for an element. see example 6: getcomputedstyle in the examples chapter for more information on how to use this method. dom style object the style object represents an individual style statement. unlike the individ...
... using the setattribute method note that you...
...e.css" type="text/css"> <script type="text/javascript"> function stilo() { document.getelementbyid('d').style.color = 'orange'; } function resetstyle() { document.getelementbyid('d').style.color = 'black'; } </script> </head> <body> <div id="d" class="thunder">thunder</div> <button onclick="stilo()">click here to change text color</button> <button onclick="resetstyle()">reset text color</button> </body> </html> the media and type of the style may or may not be given. using the setattribute method note that you can also change style of an element by getting a reference to it and then use its setattribute method to specify the css property and its value. var el = document.getelementbyid('some-element'); el.setattribute('style', 'background-color:d...

HTMLButtonElement - Web APIs
abindex is a long that represents this element's position in the tabbing order. htmlbuttonelement.type is a domstring indicating the behavior of the button. this is an enumerated attribute with the following possible values: submit: the button submits the form. this is the default value if the attribute is not specified, html5 or if it is dynamically changed to an empty or invalid value. ...
... that represents this element's position in the tabbing order. htmlbuttonelement.type is a domstring indicating the behavior of the button. this is an enumerated attribute with the following possible values: submit: the button submits the form. this is the default value if the attribute is not specified, html5 or if it is dynamically changed to an empty or invalid value. reset: the button resets the form. ...
... htmlbuttonelement.validationmessage read only is a domstring representing the localized message that describes the validation constraints that the control does not satisfy (if any). ...
...ies its constraints. htmlbuttonelement.validity read only is a validitystate representing the validity states that this button is in. htmlbuttonelement.value is a domstring representing the current form control value of the button. methods inherits methods from its parent, htmlelement name return type description checkvalidity() boolean not supported for reset or button elements. reportvalidity() boolean not supported for reset or button elements. setcustomvalidity(in domstring error) void not supported for reset or button elements. with gecko-based browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form. specifications specification status commen...

HTMLMediaElement.load() - Web APIs
syntax mediaelement.load(); parameters none. return value undefined. ...
... begin at the beginning. the amount of media data that is prefetched is determined by the value of the element's preload attribute. this method is generally only useful when you've made dynamic changes to the set of sources available for the media element, either by changing the element's src attribute or by adding or removing <source> elements nested within the media element itself. load() will reset the element and rescan the available sources, thereby causing the changes to take effect. syntax mediaelement.load(); parameters none. return value undefined. 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 <video> element and ...
...loading of new media can begin. pending play promises are aborted with an "aborterror" domexception. appropriate events will be sent to the media element itself as the load process proceeds: if the element is already in the process of loading media, that load process is aborted and the abort event is sent. if the element has already been initialized with media, the emptied event is sent. if resetting the playback position to the beginning of the media actually changes the playback position (that is, it was not already at the beginning), a timeupdate event is sent. once media has been selected and loading is ready to begin, the loadstart event is delivered. from this point onward, events are sent just like any media load. example this example finds a <video> element in the document an...
...ng the playback position to the beginning of the media actually changes the playback position (that is, it was not already at the beginning), a timeupdate event is sent. once media has been selected and loading is ready to begin, the loadstart event is delivered. from this point onward, events are sent just like any media load. example this example finds a <video> element in the document and resets it by calling load(). var mediaelem = document.queryselector("video"); mediaelem.load(); specifications specification status comment html living standardthe definition of 'htmlmediaelement.load()' in that specification. living standard initial definition. html5the definition of 'htmlmediaelement.load()' in that specification. recommendation initia...

Starting up and shutting down a WebXR session - Web APIs
30; break; case "visible": default: myframerate = 60; break; } }; this example changes a variable myframerate depending on the visibility state as it changes. presumably the renderer uses this value to compute how often to render new frames as the animation loop progresses, thus rendering less frequently the more "blurred" the scene becomes. detecting reference space resets occasionally, discontinuities or jumps in the native origin may occur while tracking the user's position in the world. the most common scenarios in which this happens are when the user requests a recalibration of their xr device or when a hiccup or glitch occurs in the flow of tracking data received from the xr hardware. these situations cause the native origin to jump abruptly by the distance ...
...in which this happens are when the user requests a recalibration of their xr device or when a hiccup or glitch occurs in the flow of tracking data received from the xr hardware. these situations cause the native origin to jump abruptly by the distance and directional angle necessary to bring the native origin back into alignment with the user's position and facing direction. ...
...tuations cause the native origin to jump abruptly by the distance and directional angle necessary to bring the native origin back into alignment with the user's position and facing direction. when this happens, a reset event is sent to the session's xrreferencespace. the event's transform property is an xrrigidtransform detailing the transform needed to realign the native origin. ...
...ssary to bring the native origin back into alignment with the user's position and facing direction. when this happens, a reset event is sent to the session's xrreferencespace. the event's transform property is an xrrigidtransform detailing the transform needed to realign the native origin. note that the reset event is fired at the xrreferencespace, not the xrsession! another common cause for reset events is when a bounded reference space (a reference space whose xrreferencespacetype is bounded-floor) has its geometry as specified by the xrboundedreferencespace's property boundsgeometry change. for more common causes of reference space resets and more details and sample code, see the documentation for the reset event. detecting when the available set of webxr input controls changes webxr...

Alerts - Accessibility
each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name ...
...each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contain...
...each field has a set of criteria which must be met in order to pass validation. in order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 c...
...f the index of the search term could not be found within the value. if invalid, the function does two things: it sets the element’s aria-invalid attribute to “true”, which will indicate to screen readers that there is invalid content in here. it will call the addalert function to add the alert with the provided error message. if the search term is found, the aria-invalid attribute is reset to “false”. in addition, any leftover alerts are removed. the addalert function this function first removes any old alerts. the function is simple: it looks for an element with id “alert”, and if found, removes that from the document object model. next, the function creates a div element to hold the alert text. it gets an id of “alert”. and it gets a role set of “alert”. this i...

Event reference
e fired when transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancelled. transitionend a css transition has completed. transitionrun a css transition has begun running (fired before any delay starts). ...
...en transitionstart a css transition has actually started (fired after any delay). transitioncancel a css transition has been cancelled. transitionend a css transition has completed. transitionrun a css transition has begun running (fired before any delay starts). ...
...n abort progression has been terminated (not due to an error). error progression has failed. load progression has been successful. loadend progress has stopped (after "error", "abort", or "load" have been dispatched). loadstart progress has begun. progress in progress. timeout progression is terminated due to preset time expiring. storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast checkboxstatechange hashchange input radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events even...
...ed a push message. pushsubscriptionchange pushevent push api a pushsubscription has expired. ratechange event html5 media the playback rate has changed. readystatechange event html5 and xmlhttprequest the readystate attribute of a document has changed. repeatevent timeevent svg a smil animation element is repeated. reset event dom l2, html5 a form is reset. resize uievent dom l3 the document view has been resized. resourcetimingbufferfull performance resource timing the browser's resource timing buffer is full. result speechrecognitionevent web speech api the speech recognition service returns a result — a word or phrase has been positively reco...

Index - Archive of obsolete content
source kit tools can consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool. although for win2003, it should install into winxp fine (win2000 compatibility is unknown). the only downside is you can't specify how much of the resource to use, only which one to consume. ...
...xul methods, xul reference no summary! 1295 removetab xul methods, xul reference no summary! 1296 removetabsprogresslistener xul methods, xul reference no summary! 1297 removetransientnotifications xul methods, xul reference no summary! 1298 replacegroup xul methods, xul reference no summary! 1299 reset xul methods, xul reference no summary! 1300 rewind xul methods, xul reference no summary! 1301 scrollbyindex xul methods, xul reference no summary! 1302 scrollbypixels xul methods, xul reference no summary! 1303 scrolltoindex xul methods, xul reference no summary! 1304 select xul methods, ...
...e enumerator.atend method returns a boolean value indicating if the enumerator is at the end of the collection. 2034 enumerator.item enumerator, javascript, method the enumerator.item method returns the current item in the collection. 2035 enumerator.movefirst enumerator, example, javascript, method, non-standard, movefirst the enumerator.movefirst method resets the current item in the collection to the first item. 2036 enumerator.movenext enumerator, example, internet explorer, javascript, method, non-standard the enumerator.movenext method moves the current item to the next item in the collection. 2037 error.description example, internet explorer, javascript, non-standard, property, description the error.descr...

Monitoring downloads - Archive of obsolete content
ce.opendatabase(this.dbfile); statement = dbconn.createstatement("replace into items values " + "(?1, ?2, ?3, 0, 0.0, 0)"); statement.bindstringparameter(0, adownload.source.spec); statement.bindint64parameter(1, adownload.size); statement.bindint64parameter(2, adownload.starttime); statement.execute(); statement.reset(); dbconn.close(); break; // record the completion (whether failed or successful) of the download case components.interfaces.nsidownloadmanager.download_finished: case components.interfaces.nsidownloadmanager.download_failed: case components.interfaces.nsidownloadmanager.download_canceled: this.logtransfercompleted(adownload); break; } }, we...
...by looking for a record with both the same uri and start time, we properly support the case where the user downloads the same file multiple times. displaying the...
...it starts by opening the sqlite database containing the log information, then creates a select sql statement to pull all entries from the database. to iterate over the results, we use a while loop that calls the mozistoragestatement object's executestep() method. each time that method is called, one row of the results is fetched. afte...

textbox - Archive of obsolete content
decimalplaces type: integer the number of decimal places to display. the default is 0, which doesn't show any dec...
...tbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, the timer resets. type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a...
... value of the number box. wraparound type: boolean gets and sets the value of the wraparound attribute. methods decrease() return type: no return value decreases the value of the scale or number box by the increment. increase() return type: no return value increases the value of the scale or number box by the increment. reset() return type: no return value resets the preference to its default value. for a textbox it also clears the undo transaction list (gecko 1.9). select() return type: no return value selects all the text in the textbox. setselectionrange( start, end ) return type: no return value sets the selected portion of the textbox, where the sta...

Extra lives - Game development
and replace it with the following line: ball.events.onoutofbounds.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas. ...
...s.add(ballleavescreen, this); we want to decrease the number of lives every time the ball leaves the canvas. ...
... } else { alert('you lost, game over!'); location.reload(); } } instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value. if yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next input (click or touch) the message will be hidden and the ball will start to move again. when the number of available lives reaches zero, the game is over and the game over alert message will be shown. events you have probably noticed the add() and addonce() method calls in the above two code blocks and wondered how they differ. the difference is that the add() method...

Fundamental text and font styling - Learn web development
sans-serif; active learning: playing with styling text in this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! you can either do this using offline html/css files, or enter your code into the live editable example below. if you make a mistake, you can always reset it using the reset button. playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="...
...border: 1px solid #0095dd;"> <p>some sample text for your delight</p> </textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> p { } </textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> </div> </div> const htmlinput = document.queryselector(".html-input"); const cssinput = document.queryselector(".css-input"); const reset = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style...
...nst reset = document.getelementbyid("reset"); let htmlcode = htmlinput.value; let csscode = cssinput.value; const output = document.queryselector(".output"); const styleelem = document.createelement('style'); const headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); htmlinput.addeventlistener("input", drawoutput); cssinput.addeventlistener("input", drawoutput); window.addeventlistener("load", drawoutput); test your skills! you've reached the end of this article, and already did some skill testing in our active learning section, but can ...

Styling links - Learn web development
o make it clear something important is happening! active learning: style your own links in this active learning session, we'd like you to take our empty set of rules and add your own declarations to make the links look really cool. use your imagination, go wild. we are sure you can come up with something cooler and just as functional as our example above. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to insert the example we showed above. playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>there are several browsers ...
...p></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }</textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output ...
...var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #26530...

Styling lists - Learn web development
h the html, and we want you to: give the unordered list square bullets. give the unordered list items and the ordered list items a line-height of 1.5 of their font-size. give the ordered list lower alphabetical bullets. feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find. if you make a mistake, you can always reset it using the reset button. if you get really stuck, press the show solution button to see a potential answer. playable code <div class="body-wrapper" style="font-family: 'open sans light',helvetica,arial,sans-serif;"> <h2>html input</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> <li>first, light the candle.</li> ...
...rod</li> <li>the goblin statue</li> </ol> </li> </ul></textarea> <h2>css input</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> <h2>output</h2> <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> <div class="controls"> <input id="reset" type="button" value="reset" style="margin: 10px 10px 0 0;"> <input id="solution" type="button" value="show solution" style="margin: 10px 0 0 10px;"> </div> </div> var htmlinput = document.queryselector(".html-input"); var cssinput = document.queryselector(".css-input"); var reset = document.getelementbyid("reset"); var htmlcode = htmlinput.value; var csscode = cssinput.value; var output ...
...var htmlcode = htmlinput.value; var csscode = cssinput.value; var output = document.queryselector(".output"); var solution = document.getelementbyid("solution"); var styleelem = document.createelement('style'); var headelem = document.queryselector('head'); headelem.appendchild(styleelem); function drawoutput() { output.innerhtml = htmlinput.value; styleelem.textcontent = cssinput.value; } reset.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = csscode; drawoutput(); }); solution.addeventlistener("click", function() { htmlinput.value = htmlcode; cssinput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; drawoutput(); }); htmlinput.addeventlistener("input", dra...

Client-side form validation - Learn web development
in the course, but to recap: required: specifies whether a form field needs to be filled in before the form can be submitted. minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical input types type: specifies whether the data needs to be a number, an email address, or some other specific preset type. pattern: specifies a regular expression that defines a pattern the entered data needs to follow. if the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid. if not, it is considered invalid. when an element is valid, the following things are true: the element matches the :valid css pseudo-class, which lets you apply a speci...
...getelementbyid('mail'); const emailerror = document.queryselector('#mail + span.error'); email.addeventlistener('input', function (event) { // each time the user types something, we check if the // form fields are valid. if (email.validity.valid) { // in case there is an error message visible, if the field // is valid, we remove the error message. ...
... + span.error'); email.addeventlistener('input', function (event) { // each time the user types something, we check if the // form fields are valid. if (email.validity.valid) { // in case there is an error message visible, if the field // is valid, we remove the error message. ...

Arrays - Learn web development
'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; list.appendchild(listitem); } totalbox.textcontent = 'total: $' + total.tofixed(2); </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', funct...
...stitem.textcontent = itemtext; list.appendchild(listitem); } // if the array length is 5 or more, remove the oldest search term if (myhistory.length >= 5) { // number 2 } // empty the search input and focus it, ready for the next term to be entered searchinput.value = ''; searchinput.focus(); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div> html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); cons...
... .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.value; function updatecode() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; userentry = textarea.value; solutionentry = jssolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; soluti...

Download
omise showcontainingdirectory(); promise cancel(); promise removepartialdata(); promise whensucceeded(); promise finalize([optional] boolean aremovepartialdata); properties attribute type description canceled read only boolean indicates that the download has been canceled. this property can become true, then it can be reset to false when a canceled download is restarted. this property becomes true as soon as the cancel() method is called, though the stopped property might remain false until the cancellation request has been processed. temporary files or part files may still exist even if they are expected to be deleted, until the stopped property becomes true. contenttype string the mime...
... you should use the individual state properties instead, since this value may not be updated after the last piece of data is transferred. error read only downloaderror when the download fails, this is set to a downloaderror instance indicating the cause of the failure. if the download has been completed successfully or has been canceled, this property is null. this property is reset to null when a failed download is restarted. haspartialdata read only boolean indicates whether, at this time, there is any partially downloaded data that can be used when restarting a failed or canceled download. this property is relevant while the download is in progress, and also if it failed or has been canceled. if the download has been completed successfully, this ...
...ldata boolean indicates whether any partially downloaded data should be retained, to use when restarting a failed or canceled download. the default is false. whether partial data can actually be retained depends on the saver and the download source, and may not be known before the download is started. to have any effect, this property must be set before starting the download. resetting this property to false after the download has already started will not remove any partial data. note: if this property is set to true, care should be taken that partial data is removed before the reference to the download is discarded. this can be done using the removepartialdata() or the finalize() methods. methods start() starts the download for the first time, or restarts...

PerfMeasurement.jsm
dules/perfmeasurement.jsm") see measuring performance using the perfmeasurement.jsm code module for details on how to use this api. note: at present, perfmeasurement.jsm is only functional on linux, but it is planned to add support for windows (bug 583322) and osx (bug 583323) as well, and we welcome patches for other operating systems. method overview static bool canmeasuresomething(); void reset(); void start(); void stop(); member fields recorded data variables these variables provide access to the recorded data. any measurable event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff). note: these values are all zeroed (or set to -1, for events not being measured) when you initialize the perfmeasurement object, then they are not zeroed again unless you ...
... void stop(); member fields recorded data variables these variables provide access to the recorded data. any measurable event that was not being recorded has a value of -1 (that is, 0xffffffffffffffff). note: these values are all zeroed (or set to -1, for events not being measured) when you initialize the perfmeasurement object, then they are not zeroed again unless you explicitly call the reset() method. this lets you accumulate measurements over multiple passes through code that you want to analyze. variable type description cpu_cycles uint64 the number of cpu cycles elapsed. instructions uint64 the number of instructions executed. cache_references uint64 the number of memory accesses that occurred. cache_misses uint64 the number of times memory accesses missed the ca...
... all event types. return value a new perfmeasurement object configured to record the specified event types. methods canmeasuresomething() indicates whether or not the platform on which your code is running supports this code module. static bool canmeasuresomething(); parameters none. return value if even one of the event types can be recorded, this will return true. otherwise, it returns false. reset() resets all the enabled counters to zero. void reset(); parameters none. start() starts measuring the performance indicators that were specified when the perfmeasurement object was created. void start(); parameters none. stop() stops measuring performance data. for each enabled counter, the number of measured events of that type that occurred are added to the appropriate visible variable. void...

Shell global objects
tadata callback that may be set. disabletrackallocations() stop capturing the js stack at every allocation. makefinalizeobserver() get a special object whose finalization increases the counter returned by the finalizecount function. finalizecount() return the current value of the finalization counter that is incremented each time an object returned by the makefinalizeobserver is finalized. resetfinalizecount() reset the value returned by finalizecount(). gcpreservecode() preserve jit code during garbage collections. startgc([n [, 'shrinking']]) start an incremental gc and run a slice that processes about n objects. if shrinking is passesd as the optional second argument, perform a shrinking gc rather than a normal gc. gcslice([n]) start or continue an an incremental gc, running a ...
...ing the given promise's global as a debuggee. functions available only if js_gc_zeal is defined gczeal(level, [n]) specifies how zealous the garbage collector should be. some of these modes can be set simultaneously, by passing multiple level options, e.g. "2;4" will activate both modes 2 and 4. modes can be specified by name or number. ...
... [,threadtype]) after count js_malloc memory allocations, fail every following allocation (return nullptr). the optional thread type limits the effect to the specified type of helper thread. oomatallocation(count [,threadtype]) after count js_malloc memory allocations, fail the next allocation (return nullptr). the optional thread type limits the effect to the specified type of helper thread. resetoomfailure() remove the allocation failure scheduled by either oomafterallocations() or oomatallocation() and return whether any allocation had been caused to fail. oomtest(function, [expectexceptiononfailure = true]) test that the passed function behaves correctly under oom conditions by repeatedly executing it and simulating allocation failure at successive allocations until the function comp...

nsIContentViewer
ive code only! void loadcomplete(in unsigned long astatus); void loadstart(in nsisupports adoc); void move(in long ax, in long ay); void open(in nsisupports astate, in nsishentry ashentry); void pagehide(in boolean isunload); boolean permitunload([optional] in boolean acallercloseswindow); boolean requestwindowclose(); void resetclosewindow(); void setbounds([const] in nsintrectref abounds); native code only! void setdocumentinternal(in nsidocumentptr adocument, in boolean aforcereuseinnerwindow); native code only! [noscript,notxpcom,nostdcall] void setnavigationtiming(in nsdomnavigationtimingptr atiming); void setpagemode(in boolean apagemode, in nsiprintsettings aprintsettings); ...
...acallercloseswindow optional indicates that the current caller will close() the window. if the method returns true, all subsequent calls will be ignored. return value true if the document will allow unloading; otherwise false. requestwindowclose() boolean requestwindowclose(); parameters none. ...
...rn value true if the document will allow unloading; otherwise false. requestwindowclose() boolean requestwindowclose(); parameters none. return value missing description exceptions thrown missing exception missing description resetclosewindow() works in tandem with permitunload(), if the caller decides not to close() the window it indicated it will, it is the caller's responsibility to reset that with this method. note: @note this method is only meant to be called on documents for which the caller has indicated that it will close the window. if that is not the case the behavior of this method is undefined. void resetclosewindow(); parameters none. exceptions thrown missing exception missing description native code only!setbounds void setbounds( [const] in nsintrectref ab...

nsICryptoHMAC
netwerk/base/public/nsicryptohmac.idlscriptable this interface provides hmac signature algorithms. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsikeyobject akeyobject); void reset(); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiinputstream astream, in unsigned long alen); constants hashing algorithms. these values are to be used by the init() method to indicate which hashing function to use. these values map onto the values defined in mozilla/security/nss/lib/softoken/pkcs11t.h and are switched to ckm_*_hmac...
... 2 message-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256 4 secure hash algorithm 256 sha384 5 secure hash algorithm 384 sha512 6 secure hash algorithm 512 methods finish() completes this hmac object and produces the actual hmac diegest data. note: this method may be called any time after init() is called. this call resets the object to its pre-init state. acstring finish( in prbool aascii ); parameters aascii if true then the returned value is a base-64 encoded string. if false, then the returned value is binary data. return value a hash of the data that was read by this object. this can be either binary data or base 64 encoded. exceptions thrown ns_error_not_initialized if init() has not be...
... object holding a key. to create the key object use for instance: var keyobject = components.classes["@mozilla.org/security/keyobjectfactory;1"] .getservice(components.interfaces.nsikeyobjectfactory) .keyfromstring(components.interfaces.nsikeyobject.hmac, rawkeydata); exceptions thrown ns_error_invalid_arg if an unsupported algorithm type is passed. reset() reinitialize hmac context to be reused with the same settings (the key and hash algorithm) but on different set of data. void reset(); parameters none. update() void update( [const, array, size_is(alen)] in octet adata, in unsigned long alen ); parameters adata a buffer to calculate the hash over. alen the length of the buffer adata. exceptions thrown ns_error_not_i...

MailNews fakeserver
f. // probably best to include as a constant somewhere. also, use something // larger than 1024 for best results. server.start(port); // set up a nsimsgincomingserver locally localserver.someactionrequiringconnection(); server.performtest(); // nothing will be executed until the connection is closed // localserver.closecachedconnections() is generally a good way to do so server.resettest(); // set up second test server.performtest(); transaction = server.playtransaction(); // finished with tests server.stop(); } currently, fakeserver provides no means to keep a persistent connection past a test, requiring connections to be closed, possibly forcibly. alternatively, one can wait for the timeout, which occurs after 3 minutes, so not closing connections would make th...
...to enable/disable debug...
...on the newsgroups header. there are added in alphabetical order, which may help for purposes that rely on article key orders. the only generated header is lines. ...

3D view - Firefox Developer Tools
d view there are keyboard shortcuts and mouse controls available for the 3d view. ...
...d shortcuts and mouse controls available for the 3d view. ...
... wheel up/down rotate left/right a / d mouse left/right rotate up/down w / s mouse up/down pan left/right ← / → mouse left/right pan up/down ↑ / ↓ mouse up/down reset zoom level 0 resets the zoom level to the default focus on selected node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken html causing layout problems, looking at the 3d view can help find where you've go...

Edit CSS filters - Firefox Developer Tools
applied. you can also add new effects by selecting an effect from the dropdown list at the bottom of the dialog. once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list. once you have added an effect, enter the settings you want and then press enter to update the effect. the change will be apparent as soon as youpress enter. ...
...ropdown list at the bottom of the dialog. once you have selected the effect you want to add, click the plus sign (+) to the right of the dropdown list. once you have added an effect, enter the settings you want and then press enter to update the effect. the change will be apparent as soon as youpress enter. saving filter presets from firefox 42 onwards, you can also add filters to a list of presets. the list of presets will be preserved between browser sessions, making it easy to apply the settings in the future. you can save the current filter to the preset list: click to edit the filter, display the preset list by clicking the icon as shown below. type a name for your preset, and then click the plus sign to add it to the list of presets. you can then apply saved filters to new elem...
...served between browser sessions, making it easy to apply the settings in the future. you can save the current filter to the preset list: click to edit the filter, display the preset list by clicking the icon as shown below. type a name for your preset, and then click the plus sign to add it to the list of presets. you can then apply saved filters to new elements. to apply one of your saved presets, click its name in the list. ...

CanvasRenderingContext2D.addHitRegion() - Web APIs
changes update live in the canvas. ...
...anvas. ...
...stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mou...

CanvasRenderingContext2D.miterLimit - Web APIs
zero, negative, infinity, and nan values are ignored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
...d nan values are ignored. the default value is 10.0. examples using the miterlimit property see the chapter applying styles and color in the canvas tutorial for more information. ...
...e-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.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("in...

Drawing text - Web APIs
extbaseline property. ...
...tbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textar...
... measuretex...

Document.cookie - Web APIs
currences of the word dosomethingonlyonce (the name of the cookie) with a custom name. ...
...yonce (the name of the cookie) with a custom name. ...
...> row.startswith('dosomethingonlyonce'))) { alert("do something here!"); document.cookie = "dosomethingonlyonce=true; expires=fri, 31 dec 9999 23:59:59 gmt"; } } <button onclick="doonce()">only do something once</button> example #4: reset the previous cookie function resetonce() { document.cookie = "dosomethingonlyonce=; expires=thu, 01 jan 1970 00:00:00 gmt"; } <button onclick="resetonce()">reset only once cookie</button> example #5: check a cookie existence //es5 if (document.cookie.split(';').some(function(item) { return item.trim().indexof('reader=') == 0 })) { console.log('the cookie "reader" exists (es5)') } //es2016 if (document.cookie.split(';').some((item) => item.trim().startswith('reader='))) { console.log('the cookie "reader" exists (es6)') } e...

HTMLFormElement - Web APIs
mer to decide how to respond to false. reportvalidity() returns true if the element's child controls satisfy their validation constraints. when false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user. requestsubmit() requests that the form be submitted using the specified submit button and its corresponding configuration. reset() resets the form to its initial state. submit() submits the form to the server. deprecated methods htmlformelement.requestautocomplete() triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on. the form will receive an event once the user has finished with the interface, the event will either be auto...
...t will either be autocomplete when the fields have been filled or autocompleteerror when there was a problem. events listen to these events using addeventlistener(), or by assigning an event listener to the oneventname property of this interface. formdata the formdata event fires after the entry list representing the form's data is constructed. also available via the onformdata property. reset the reset event fires when a form is reset. also available via the onreset property. submit the submit event fires when a form is submitted. also available via the onsubmit property. usage notes obtaining a form element object to obtain an htmlformelement object, you can use a css selector with queryselector(), or you can get a list of all of the forms in the document using its forms pro...
... // call the form's submit() method extract information from a <form> element and set some of its attributes: <form name="forma" action="/cgi-bin/test" method="post"> <p>press "info" for form details, or "set" to change those details.</p> <p> <button type="button" onclick="getforminfo();">info</button> <button type="button" onclick="setforminfo(this.form);">set</button> <button type="reset">reset</button> </p> <textarea id="form-info" rows="15" cols="20"></textarea> </form> <script> function getforminfo(){ // get a reference to the form via its name var f = document.forms["forma"]; // the form properties we're interested in var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptcharset', 'action', 'enctype', 'method', 'target' ]; // i...

XRReferenceSpaceEvent.transform - Web APIs
ordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system. syntax let refspace = xrreferencespaceevent.transform; value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system. usage notes upon receiving a reset event, you can apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just discard any cached positional information and recompute from scratch. the approach you take will depend on your needs. for details on what causes a reset event and how to respond, see the reset event's documentation. examples this exampl...
...n apply the transform to cached position or orientation information to shift them into the updated coordinate system. alternatively, you can just discard any cached positional information and recompute from scratch. the approach you take will depend on your needs. for details on what causes a reset event and how to respond, see the reset event's documentation. ...
...hat causes a reset event and how to respond, see the reset event's documentation. examples this example handles the reset event by walking through all the objects in a scene, updating each object's position by multiplying it with the event's given transform. the scene is represented by a scene object, with all the objects in an array called objects within it. xrreferencespace.addeventlistener("reset", event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform, event.transform); } }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceevent.transform' in that specification. working draft initial definition. ...

Using CSS counters - CSS: Cascading Style Sheets
e of content based on its location in a document. for example, you can use counters to automatically number the headings in a webpage. counters are, in essence, variables maintained by css whose values may be incremented by css rules to track how many times they're used. using counters manipulating a counter's value to use a css counter, it must first be initialized to a value with the counter-reset property (0 by default). the same property can also be used to change its value to any specific number. once initialized, a counter's value can be increased or decreased with counter-increment. the counter's name must not be "none", "inherit", or "initial"; otherwise the declaration is ignored. displaying a counter the value of a counter can be displayed using either the counter() or counters()...
...unters(name, string, style)'. the generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. the counters are rendered in the specified style (decimal by default). basic example this example adds "section [the value of the counter]:" to the beginning of each heading. css body { counter-reset: section; /* set a counter named 'section', and its initial value is 0. */ } h3::before { counter-increment: section; /* increment the value of section counter by 1 */ content: "section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the cont...
... html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3> result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements. using the counters() function, separating text can be inserted between different levels of nested counters. ...

Introducing the CSS Cascade - CSS: Cascading Style Sheets
se, while others simulate them in code, but the end result is the same. some browsers let users modify the user-agent stylesheet. although some constraints on user-agent stylesheets are set by the html specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. to simplify the development process, web developers often use a css reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs. author stylesheets author stylesheets are the most common type of style sheet. these are style sheets that define styles as part of the design of a given web page or site. the author of the page defines the styles for the document using one or more stylesheets, which...
... 2 user normal 3 author normal 4 animations 5 author !important 6 user !important 7 user agent !important 8 transitions in case of equality, the specificity of a value is considered to choose one or the other. resetting styles after your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. this may happen in cases of animations, theme changes, and so forth. the css property all lets you quickly set (almost) everything in css back to a known state. all lets you opt to immediately restore all properties to any of their initial (default) stat...
...hooses the latest defined in the most important document, but never combined all together. example let's look at an example involving multiple sources of css across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left: 3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em } html: <ul> <li class="specific">1^st</li> <li>2^nd</li> </ul> in this case, declarations inside li and .specific rules should apply. no declaration is marked as !important, so the precedence order is author style sheets ...

counter() - CSS: Cascading Style Sheets
mages). note: the counter() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counter, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. <counter-style> a counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east asian or ethiopic predefined counter style, or other predefined counter style. if omitted, the counter-sty...
...opic predefined counter style, or other predefined counter style. ...
... working draft no change css level 2 (revision 1)the ...

counters() - CSS: Cascading Style Sheets
tent. note: the counters() function can be used with any css property, but support for properties other than content is experimental, and support for the type-or-unit parameter is sparse. check the browser compatibility table carefully before using this in production. syntax values <custom-ident> a name identifying the counters, which is the same case-sensitive name used for the counter-reset and counter-increment. the name cannot start with two dashes and can't be none, unset, initial, or inherit. <counter-style> a counter style name or symbols() function, where a counter style name is a numeric, alphabetic, or symbolic simple predefined counter style, a complex longhand east asian or ethiopic predefined counter style, or other predefined counter style. if omitted, the counter-sty...
...om-ident> examples default value compared to upper roman html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li>...
... working d...

grid - CSS: Cascading Style Sheets
repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: you can only specify the explicit or the implicit grid properties in a single grid declaration. the sub-properties you don’t specify are set to their initial value, as normal for shorthands. also, the gutter properties are not reset by this shorthand. constituent properties this property is a shorthand for the following css properties: grid-auto-columns grid-auto-flow grid-auto-rows grid-template-areas grid-template-columns grid-template-rows syntax /* <'grid-template'> values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a" 200px "b" min-content; grid: "a" minmax(100px...
...? ] <'grid-auto-columns'>? sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow is also set to column accordingly, with dense if it’s specified. all other grid sub-properties are reset to their initial values. [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'> sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row according...
...? / <'grid-template-columns'> sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it’s specified. all other grid sub-properties are reset to their initial values. formal definition initial valueas each of the properties of the shorthand:grid-template-rows: nonegrid-template-columns: nonegrid-template-areas: nonegrid-auto-rows: autogrid-auto-columns: autogrid-auto-flow: rowgrid-column-gap: 0grid-row-gap: 0column-gap: normalrow-gap: normalapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:g...

zoom - CSS: Cascading Style Sheets
the non-standard zoom css property can be used to control the magnification level of an element. transform: scale() should be used instead of this property, if possible. however, unlike css transforms, zoom affects the layout size of the element. /* keyword values */ zoom: normal; zoom: reset; /* <percentage> values */ zoom: 50%; zoom: 200%; /* <number> values */ zoom: 1.1; zoom: 0.7; /* global values */ zoom: inherit; zoom: initial; zoom: unset; syntax values normal render this element at its normal size. reset do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing ctrl-- or ctrl++ keyboard shortcuts) to the document. only supported by webkit (and possibly blink). <percentage> zoom factor. 100% is equivalent to normal. values l...
...% is equivalent to normal. values larger than 100% zoom in. values smaller than 100% zoom out. <number> zoom factor. equivalent to the corresponding percentage (1.0 = 100% = normal). values larger than 1.0 zoom in. values smaller than 1.0 zoom out. ...
...tial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%...

Audio and video manipulation - Developer guides
-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2;</textarea> var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setplaybackrate() { eval(textarea.value); } reset...
...value = 25; playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(conte...
...yable-code"> filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25;</textarea> var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function setfilter() { eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; setfilter(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', setfilter); window.addeventlistener('load', setf...

Referer header: privacy and security concerns - Web security
ic) header contains the address of the previous web page from which a link to the currently requested page was followed, which has lots of fairly innocent uses including analytics, logging, or optimized caching. however, there are more problematic uses such as tracking or stealing information, or even just side effects such as inadvertently leaking sensitive information. for example, consider a "reset password" page with a social media link in a footer. if the link was followed, depending on how information was shared the social media site may receive the reset password url and may still be able to use the shared information, potentially compromising a user's security. by the same logic, an image hosted on a third party side but embedded in your page could result in sensitive information bein...
... logic, an image hosted on a third party side but embedded in your page could result in sensitive information being leaked to the third party. even if security is not compromised, the information may not be something the user wants shared. how can we fix this? much of this risk can be mitigated by sensible design of applications. a sensible application would remove such risks by making password reset urls only usable for a single use, or when combined with a unique user token, and transmitting sensitive data in different ways. you should use post rather than get wherever possible, to avoid passing sensitive data to other locations via urls. you should always use https for your sites. this has many security advantages, including the fact that https sites will never transmit referer informati...
...ntages, including the fact that https sites will never transmit referer information to non-https sites. this is becoming less useful in this context now that most of the web is using https, but it is still a worthy consideration. in addition, you should consider removing any third party content (e.g. social networking widgets embedded in <iframe>) from secure areas of your website, like password reset pages, payment forms, login areas, etc. you can also mitigate such risks using: the referrer-policy header on your server to control what information is sent through the referer header. again, a directive of no-referrer would omit the referer header entirely. the referrerpolicy attribute on html elements that are in danger of leaking such information (such as <img> and <a>). this can for exa...

preferences/service - Archive of obsolete content
s of the root of this branch. isset(name) parameters name : string preference name. returns boolean : returns whether or not the application preference name both exists and has been set to a non-default value by the user (or a program acting on the user's behalf). example: var name = "extensions.checkcompatibility.nightly"; if (require("sdk/preferences/service").isset(name)) { // ... ...
... parameters name : string defaultvalue : string preference value. returns string : localized preference value, returns a default value if no preference is set. some preferences refer to a properties file. ...

ui/button/action - Archive of obsolete content
this is an alternative way to set or get the global state. the reason for using this, rather than setting properties individually, is that you can define an object with the properties t...
...ecific state this needs to be the tab object for which you wish to set a specific state, or the string "tab" to select the currently active tab. state : object, null include this parameter only if you are setting state. it is an object containing all the properties you wish to set. for example: button.state("tab", { "label" : "tab-specific label", "icon": "./tab-specific-icon.ico" }); to reset state, pass null: button.state("tab", null); returns state : if you have passed the second state argument to make this function a setter, it returns undefined. otherwise, it functions as a getter and returns the button's state for the specified object. this logs the state for the button associated with the currently active tab: console.log(button.state("tab")); this object represents a snaps...

ui/button/toggle - Archive of obsolete content
this is an alternative way to set or get the global state. the reason for using this, rather than setting state properties individually, is that you can define an object with the proper...
...ecific state this needs to be the tab object for which you wish to set a specific state, or the string "tab" to select the currently active tab. state : object, null include this parameter only if you are setting state. it is an object containing all the properties you wish to set. for example: button.state("tab", { "label" : "tab-specific label", "icon": "./tab-specific-icon.ico" }); to reset state, pass null: button.state("tab", null); returns state : if you have passed the second state argument to make this function a setter, it returns undefined. otherwise, it functions as a getter and returns the button's state for the specified object. this logs the state for the button associated with the currently active tab: console.log(button.state("tab")); this object represents a snaps...

Search Extension Tutorial (Draft) - Archive of obsolete content
guidelines or creating an adverse user experience. due to the large volume of user complaints regarding hidden settings being changed against their will, and not being restored after the add-ons responsible are disabled, mozilla will take any steps necessary to mitigate the impact of offending add-ons. in particular, changing the location bar search keyword url in a way which is not automatically reset when the add-on is removed will result in a reset prompt for users. other settings violations designed to restrict user choice will result in stronger action, such as blacklisting of the add-ons in question. the most technically sound method of achieving this, and the only acceptable way of changing preferences such that they are automatically restored on add-on uninstall, is to make such changes...
...serpref(name); } function startup(data, reason) { firstrun = reason == addon_install; // change the default engine name. // an engine with this name must already exist. setpref("browser.search.defaultenginename", "example engine", true); } function shutdown(data, reason) { // no need to do this if this is app shutdown. if (reason == app_shutdown) return; // reset our changes if the values have not been changed // in the meantime. for (let [name, [origvalue, value]] in iterator(savedprefs)) { if (defaultprefs.getcharpref(name) == value) defaultprefs.setcharpref(name, origvalue); } } function install() {} function uninstall() {} changing the default search engine this change comes in two parts: 1) installing a new search en...

Install script template - Archive of obsolete content
rsion); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(software_name, software_name, version); if (err != 0) cancelinstall(err); } //addfiles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { logcomment("could not add " + plugin_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } // start installing xpt file if this is a scriptable plugin // install to the plugins dire...
... you can also simply call refreshplugins() } else cancelinstall(errblock1); // plid solution -- write keys to the registry /** * function for secondary installation of plugin (firstinstall). * you should not stop the i...

preference - Archive of obsolete content
a checkbox to a preference element using the user interface element's preference attribute. more information is available in the preferences system article. attributes disabled, instantapply, inverted, name, onchange, readonly, tabindex, type properties defaultvalue, disabled, hasuservalue, inverted, locked, name, preferences, readonly, tabindex, type, value, valuefrompreferences methods reset examples <preferences> <preference id="pref_id" name="preference.name" type="int"/> </preferences> see preferences system for a complete example. attributes disabled type: boolean indicates whether the element is disabled or not. if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not res...
... indicating that the preference does not have a user-set value (hasuservalue == false). in this case the actual value to be displayed in the ui is obtained from the defaultvalue property. valuefrompreferences gets and sets the value stored in the user preference, specified in name. (this always accesses the nsiprefbranch apis regardless of the instantapply mode in effect). methods reset() return type: no return value resets the preference to its default value. for a textbox it also clears the undo transaction list (gecko 1.9). type getelementvalue(in domelement element); retrieves the value that should be written to preferences based on the current state of the supplied element. this function calls onsynctopreference. boolean iselementeditable(in domel...

Implementation Status - Archive of obsolete content
xforms-model-destruct supported 4.3.1 xforms-rebuild supported 4.3.2 xforms-recalculate supported 4.3.3 xforms-revalidate supported 4.3.4 xforms-refresh supported 4.3.5 xforms-reset supported 4.3.6 xforms-next xforms-previous supported 4.3.7 xforms-focus supported 4.3.8 xforms-help xforms-hint supported 4.3.9 xforms-submit partial see section 11.2 for more details 4.
...directly. recalculate won't properly mark nodes as dirty if they were changed using javascript interfaces. ...

Finishing up - Game development
ter looks almost the same as drawing the score counter — add the following function to your code, below the drawscore() function: function drawlives() { ctx.font = "16px arial"; ctx.fillstyle = "#0095dd"; ctx.filltext("lives: "+lives, canvas.width-65, 20); } instead of ending the game immediately, we will decrease the number of lives until they are no longer available. we can also reset the ball and the paddle positions when the player begins with their next life. so, in the draw() function replace the following three lines: alert("game over"); document.location.reload(); clearinterval(interval); // needed for chrome to end game with this, we can add slightly more complex logic to it as given below: lives--; if(!lives) { alert("game over"); document.location.relo...
... needed for chrome to end game } else { x = canvas.width/2; y = canvas.height-30; dx = 2; dy = -2; paddlex = (canvas.width-paddlewidth)/2; } now, when the ball hits the bottom edge of the screen, we're subtracting one life from the lives variable. if there are no lives left, the game is lost; if there are still some lives left, then the position of the ball and the paddle are reset, along with the movement of the ball. rendering the lives display now you need to add a call to drawlives() inside the draw() function and add it below the drawscore() call. drawlives(); improving rendering with requestanimationframe() now let's work on something that is not connected to the game mechanics, but to the way it is being rendered. requestanimationframe helps the browser render ...

Cascade and inheritance - Learn web development
inheritance css provides four special universal property values for controlling inheritance. every css property accepts these values. inherit sets the property value applied to a selected element to be the same as that of its parent element. effectively, this "turns on inheritance". initial sets the property value applied to a selected element to the initial value of that property. unset resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial. note: there is also a newer value, revert, which has limited browser support. note: see origin of css declarations in introducing the css cascade for more information on each of these and how they work. we can look at a list of links and explore...
...class-1 applied. this sets the color of the <a> element nested inside to inherit. if you remove the rule how does it change the color of the link? do you understand why the third and fourth links are the color that they are? check the description of the values above if not. which of the links will change color if you define a new color for the <a> element — for example a { color: red; }? resetting all property values the css shorthand property all can be used to apply one of these inheritance values to (almost) all properties at once. its value can be any one of the inheritance values (inherit, initial, unset, or revert). it's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes. in the below example we have t...

Images, media, and form elements - Learn web development
this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing s...
...box-sizing: border-box; padding: 0; margin: 0; } other useful settings in addition to the rules mentioned above, you should also set overflow: auto on <textarea>s to stop ie showing a scrollbar when there is no need for one: textarea { overflow: auto; } putting it all together into a "reset" as a final step, we can wrap up the various properties discussed above into the following "form reset" to provide a consistent base to work from. this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. typica...

CSS FAQ - Learn web development
ormation. how do i restore the default value of a property? initially css didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property. for example: /* heading default color is black */ h1 { color: red; } h1 { color: black; } this has changed with css 2; the keyword initial is now a valid value for a css property. it resets it to its default value, which is defined in the css specification of the given property. /* heading default color is black */ h1 { color: red; } h1 { color: initial; } how do i derive one style from another? css does not exactly allow one style to be defined in terms of another. (see eric meyer's note about the working group's stance). however, assigning multiple classes to a single element ...
... to avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector. use of a shorthand property using shorthand properties for defining style rules is good because it uses a very compact syntax. using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to their default values. this means that a previous rule for a single attribute could be implicitly overridden. #stockticker { font-size: 12px; font-family: verdana; font-weight: bold; } .stocksymbol { font: 14px arial; color: red; } <div id="stockticker"> nys: <span class="stocksymbol">ge</span> +1.0 ... </div> in the previous example the problem occurred on rules belonging to different e...

Test your skills: Advanced styling - Learn web development
on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. advanced form styling 1 in our first advanced styling tasks, we want you to handle making a search input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers. we've already provided you with a basic reset to build upon. first of all, try giving the search box a consistent width, height, padding, and border color across browsers. you'll find that some browsers will not behave in terms of the form element's height. this is due to native os styling being used in some cases. how can you remove this native styling? once you've removed the native styling, you'll need to add back one of the features...
...ht of the search box, and be lined up vertically as well? try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. advanced form styling 2 in our next task we provide you with a set of three radio buttons. we want you to give them custom styling. we've already provided you with a basic reset to build upon. first of all, get rid of their default styling. next, give the radio buttons a reasonable base style — the style they have when the page first loads. this can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background color. now give the radio buttons a different style for when th...

Beginning our React todo list - Learn web development
", the value of defaultchecked will be "true" — a string literal. remember — this is actually javascript, not html! the aria-pressed attribute used in our earlier code snippet has a value of true because aria-pressed is not a true boolean attribute in the way checked is. ...
...erit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__dan...

Starting our Svelte Todo list app - Learn web development
on jsx elements. svelte aims to implement all of them in its compiler, and most of them have already been ported to svelte. on github you can see which accessibility checks are still missing. you can check the meaning of each rule by clicking on its link. styling our markup let's make the todo list look a little better. ...
...erit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ /* global styles */ .form-group > input[type="text"] { display: inline-block; margin-top: 0.4rem; } .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-transform: capitalize; } .btn.toggle-btn { border-width: 1px; border-color: #d3d3d3; } .btn.toggle-btn[aria-pressed="true"] { text-decoration: underline; border-color: #4d4d4d; } .btn__da...

Getting started with Vue - Learn web development
stall the cli, run the following command in your terminal: npm install --global @vue/cli or if you'd prefer to use yarn: yarn global add @vue/cli once installed, to initialize a new project you can then open a terminal in the directory you want to create the project in, and run vue create <project-name>. the cli will then give you a list of project configurations you can use. there are a few preset ones, and you can make your own. these options let you configure things like typescript, linting, vue-router, testing, and more. we’ll look at using this below. initializing a new project to explore various features of vue, we will be building up a sample todo list app. we'll begin by using the vue cli to create a new app framework to build our app into. follow the steps below: in termina...
...nue. now, you will select how we want your config files to be managed. "in dedicated config files" will put your config settings for things like eslint into their own, dedicated files. the other option, "in package.json", will put all of your config settings into the app's package.json file. select "in dedicated config files" and push enter. finally, you are asked if you want to save this as a preset for future options. this is entirely up to you. if you like these settings over the existing presets and want to use them again, type y , otherwise type n. the cli will now begin scaffolding out your project, and installing all of your dependencies. if you've never run the vue cli before, you'll get one more question — you'll be asked to choose a package manager. you can use the arrow keys t...

Introduction to automated testing - Learn web development
make nascent css features run in older browsers. at the end of the pipe chain, we output our modified prefixed css to the build directory. ...
...our original code included a fat arrow function, which babel has modified into an old...

Introduction to cross browser testing - Learn web development
...
...e most popular desktop and mobile (ios, android, windows phone) browsers — this should include chrome (and opera as it is based on the same rendering engine as chrome), firefox, ie/edge, and safari. it should also provide an acceptable experience on ie 8 and 9, and be accessible with wcag aa compliance. now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. for example, if the e-commerce site owner wants a webgl-powered 3d tour of each product built into the product pages, they will need to accept that this just won't work in ie versions before 11. you'd have to agree to provide a version of the site without this feature to users of older ie versions. you should compile a list of the potential problem are...

Introducing a complete toolchain - Learn web development
s that we will have it available in our browsers without needing build tools. until then, parcel will do the transformation between nested css and natively supported css with the help of postcss, which parcel works with out of the box. since we've specifically decided this project should use css nesting (instead of sass), the project will need to include a postcss plugin. ...
...s), the project will need to include a postcss plugin. let's use the postcss-preset-env, which lets us "use tomorrow's css today". to do so, follow these steps: add a single file called .postcssrc to the root of your project directory. add the following contents to the new file, which will automagically give us full access to the latest css features: { "plugins": { "postcss-preset-env": { "stage": 0 } } } that’s all we need to do — remember that parcel installs the dependencies for us by default! although this stage of our toolchain can be quite painful, because we've chosen a tool that purposely tries to reduce configuration and complexity, there's really nothing more we need to do during the development phase. modules are correctly imported, nested c...

Creating Sandboxed HTTP Connections
xt, the nsichannel is qied to an nsiuploadchannel. ...
...he type (in this case, "application/x-www-form-urlencoded"): var uploadchannel = gchannel.queryinterface(components.interfaces.nsiuploadchannel); uploadchannel.setuploadstream(inputstream, "application/x-www-form-urlencoded", -1); due to a bug, calling setuploadstream will reset the nsihttpchannel to be a put request, so now the request type is set to post: // order important - setuploadstream resets to put httpchannel.requestmethod = "post"; ...

HTML parser threading
or executes a tree op that attempts to execute a script, the tree op is first checked for a tree builder state snapshot. there will be a snapshot if the tree op came from the parser thread. there won't be one if the tree op came from document.write() on the main thread (discussed later). if there is a snapshot, the tokenizer used for parsing document.write()-originating data on the main thread is reset to the data state. there's no need to snapshot the tokenizer state, because the state of the tokenizer is always the same immediately after the tokenizer has emitted a script end tag. then the tree builder that is used for parsing document.write()-originating data is initialized from the state snapshot. now the tokenizer/tree builder pair used for parsing document.write() data is in the same stat...
...ilder are flushed straight to the tree op executor and the tree op stage is set as the tree op sink for the tree builder. the executor is told that it's reading from the stage again. if the speculation failed, the first buffer corresponding to the starting point of the speculation gets its start index restored to the index stored on the speculation object. subsequent buffers get their start index reset back to zero. the tokenizer gets its line number restored from the speculation object. this is equivalent to rewinding the input to where it was when speculation started. all the speculations in the speculation queue are destroyed. pending tree ops in the tree builder are cleared. the tree op stage is set as the tree op sink for the tree builder. the executor is told that it's reading from the st...

Log.jsm
length: 1 keys of prototype: append(); doappend(); level: 0 basicformatter(); length: 1 keys of prototype: format(); boundedfileappender(); length: 2 keys of prototype: doappend(); reset(); consoleappender(); length: 1 keys of prototype: doappend(); dumpappender(); length: 1 keys of prototype: doappend(); fileappender(); length: 2 keys of prototype: doappend(); reset(); ...
...s loggerrepository(); length: 0 keys of prototype: getlogger(); rootlogger storagestreamappender(); length: 1 keys of prototype: doappend(); getinputstream(); newoutputstream(); outputstream reset(); structuredformatter(); length: 0 keys of prototype: format(); method overview enumerateinterfaces(); length: 0 enumerateproperties(); length: 2 member fields variable type description level object contains the following fields: ...

source-editor.jsm
ndnext(boolean awrap); number findprevious(boolean awrap); event management void addeventlistener(string aeventtype, function acallback); void removeeventlistener(string aeventtype, function acallback); undo stack operations boolean canredo(); boolean canundo(); void endcompoundchange(); boolean redo(); void resetundo(); void startcompoundchange(); boolean undo(); display management operations void focus(); number gettopindex(); boolean hasfocus(); void settopindex(number atopindex); content management operations number getcharcount(); string getindentationstring(); string getlinedelimiter(); number ...
...false. removeeventlistener() removes an event listener (previously established by calling addeventlistener() from the editor. void removeeventlistener( string aeventtype, function acallback ); parameters aeventtype the name of the event type to stop listening for; see event name constants for possible values. acallback the function to stop calling when the specified event occurs. resetundo resets the undo stack, removing all possible undo and redo operations from the stack. void resetundo(); parameters none. setcaretoffset() sets the current caret position (insertion point) for newly-entered text. void setcaretoffset( number aoffset ); parameters aoffset the 0-based offset into the text at which to place the caret. setcaretposition() sets the current caret po...

Mozilla Style System Documentation
| | [quote: a] [quote: a] | [span: e] the reason the rule tree shares style data naturally is that most style rules specify properties in very few structs. as stated above, each style struct contains only features that are inherited by default or those that are set to their initial value ("reset") by default. this leads to (or perhaps three, depending on how you count) two types of sharing. for those structs where all the values are inherited by default, a style context can often (when none of the rules matched by the style context specifies any properties in the struct, or when explicit inherit is used) use the same struct as its parent style context. for the structs where all the prope...
...ult. this leads to (or perhaps three, depending on how you count) two types of sharing. for those structs where all the values are inherited by default, a style context can often (when none of the rules matched by the style context specifies any properties in the struct, or when explicit inherit is used) use the same struct as its parent style context. for the structs where all the properties are reset by default, if no explicit inherit values or em or similar units are used, the style struct can be cached on the rule node rather than the style context and shared between all style contexts pointing to that rule node. furthermore, if the rule specifies no values for a struct, it can use the same struct as its parent. while the style context tree is generally quite deep, since it corresponds roug...

Index
eate a certificate request file that can be submitted to a certificate authority (ca) for processing into a finished certificate. output defaults to standard out unless you use -o output-file argument. use the -a argument to specify ascii output. -s create an individual certificate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the n...
...this operation is performed on the device which stores the data, not directly on the security databases, so the location must be referenced through the token name (-h) as well as any directory path. if there is no external token used, ...

FC_InitToken
inlen argument should be 0. fc_inittoken() ignores the plabel argument. return value fc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected we don't have a reference to the key database (we failed to open the key database or we have released our reference). ...
... return value fc_inittoken() returns the following return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected we don't have a reference to the key database (we failed to open the key database or we have released our reference). ckr_device_error: failed to reset the key database. application usage fc_inittoken() is used to reset the password for the key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls fc_inittoken(). the "-t" (token reset) command of certutil calls fc_inittoken(). note: resetting the password clears all permanent secret and private keys. you won't be able to decrypt the ...

NSC_InitToken
return codes. ckr_ok: token initialization succeeded. ckr_slot_id_invalid: slot id is invalid. ckr_token_write_protected slot id is 1. (the non-fips mode has two slots: 1 and 2. the key database is in slot 2. slot 1 doesn't have a key database.) we don't have a reference to the key database (we failed to open the key database or we have released our reference). ...
...id is invalid. ckr_token_write_protected slot id is 1. (the non-fips mode has two slots: 1 and 2. the key database is in slot 2. slot 1 doesn't have a key database.) we don't have a reference to the key database (we failed to open the key database or we have released our reference). ckr_device_error: failed to reset the key database. examples application usage nsc_inittoken() is used to reset the password for the key database when the user forgets the password. the "reset password" button of the mozilla application suite and seamonkey (in preferences->privacy & security->master passwords) calls nsc_inittoken(). the "-t" (token reset) command of certutil calls nsc_inittoken(). note: resetting the password clears all permanent secret and private keys. you won't be able to decrypt th...

NSS functions
ssl_optionset mxr 3.2 and later ssl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfiletostream mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelock...
...gs mxr 3.6 and later pk11_pubunwrapsymkeywithflagsperm mxr 3.9 and later pk11_pubwrapsymkey mxr 3.2 and later pk11_randomupdate mxr 3.2 and later pk11_readrawattribute mxr 3.9.2 and later pk11_referencesymkey mxr 3.2 and later pk11_resettoken mxr 3.4 and later pk11_restorecontext mxr 3.2 and later pk11_savecontext mxr 3.2 and later pk11_savecontextalloc mxr 3.6 and later pk11_setfortezzahack mxr 3.2 and later pk11_setpasswordfunc mxr 3.2 and later pk11_setprivateke...

NSS tools : certutil
icate request file that can be submitted to a certificate authority (ca) for processing into a finished certificate. output defaults to standard out unless you use -o output-file argument. use the -a argument to specify ascii output. -s create an individual certificate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge two databases into one. --upgrade-merge upgrade an old database and merge it into a new ...
...this operation is performed on the device which stores the data, not directly on the security databases, so the location must be referenced through the token name (-h) as well as any directory path. if there is no external token...

certutil
eate a certificate request file that can be submitted to a certificate authority (ca) for processing into a finished certificate. output defaults to standard out unless you use -o output-file argument. use the -a argument to specify ascii output. -s create an individual certificate and add it to a certificate database. -t reset the key database or token. -u list all available modules or print a single named module. -v check the validity of a certificate and its attributes. -w change the password to a key database. --merge merge a source database into the target database. this is used to merge legacy nss databases (cert8.db and key3.db) into the n...
...this operation is performed on the device which stores the data, not directly on the security databases, so the location must be referenced through the token name (-h) as well as any directory path. if there is no external token used, ...

Tutorial: Embedding Rhino
hell using its built-in defineclass function. we'll see how to add it to runscript later. (note that because the java -jar option preempts the rest of the classpath, we can't use that and access the counter class.) $ java -cp "js.jar;examples" org.mozilla.javascript.tools.shell.main js> defineclass("counter") js> c = new counter(7) [object counter] js> c.count 7 js> c.count 8 js> c.count 9 js> c.resetcount() js> c.count 0 counter's constructors the zero-argument constructor is used by rhino runtime to create instances. for the counter example, no initialization work is needed, so the implementation is empty. public counter () { } the method jsconstructor defines the javascript constructor that was called with the expression new counter(7) in the javascript code above. public void jscons...
...eturn "counter"; } dynamic properties dynamic properties are defined by methods beginning with jsget_ or jsset_. the method jsget_count defines thecount property. public int jsget_count() { return count++; } the expression c.count in the javascript code above results in a call to this method. defining javascript "methods" methods can be defined using the jsfunction_ prefix. here we define resetcount for javascript. public void jsfunction_resetcount() { count = 0; } the call c.resetcount() above calls this method. adding counter to runscript now take a look at the runscript4 example. it's the same as runscript except for two additions. the method scriptableobject.defineclass uses a java class to define the counter "class" in the top-level scope: scriptableobject.defineclass(scope, ...

JS_SetDefaultLocale
this article covers features introduced in spidermonkey 24 set and reset the default locale for the ecmascript internationalization api. syntax bool js_setdefaultlocale(jsruntime *rt, const char *locale); void js_resetdefaultlocale(jsruntime *rt); name type description rt jsruntime * pointer to a js runtime locale const char * string represents locale. description js_setdefaultlocale sets the default locale for the ecmascript internationalization api (intl.collator, intl.numberformat, intl.datetimeformat). note that the internationalization api encourages clients to specify their own locales. the locale string remains owned by the caller. js_resetdefaultlocale resets the default locale to os defaults. see also mxr id sea...
...sets the default locale for the ecmascript internationalization api (intl.collator, intl.numberformat, intl.datetimeformat). ...

Using the Places keywords API
ls module: components.utils.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazymodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); setting a keyword for an url the insert() method accepts a keyword entry object describing the keyword to insert. it has the following properties: keyword: string representing the keyword url: either a url or spec represeting the url to associate to postdata: optional post data string. should be omitted if there's no post data. placesutils.keywords.insert({ keyword: "my_keyword", url: "http://www.example.com/" postdata: "post+data=1&test=2" }).then(() => { /* success */ }, e => { /* ...
... e => { /* failure */ }); note that setting an already existing keyword to a different url, will silently update the existing keyword to the new url. fetching an entry by keyword the fetch() method acceps a keyword string (or an object having a keywords property) and might resolve to a keyword entry with the following properties: keyword: string representing the keyword url: the url represeted by the keyword postdata: optional post data string. not defined if there's no post data. if no keyword exists, will resolve to null. placesutils.keywords.fetch("my_keyword").then(entry => { /* entry is either null, or a keyword entry */ }, e => { /* failure */}); fetching entries by url the fetch() method also accepts a keyword entry, wher...

imgIContainer
obsolete since gecko 2.0 void setdiscardable(in string amimetype); native code only! obsolete since gecko 2.0 void setframeblendmethod(in unsigned long framenumber, in print32 ablendmethod); obsolete since gecko 2.0 void setframedisposalmethod(in unsigned long framenumber, in print32 adisposalmethod); ob...
... the xpcom interface guidelines requestrefresh() indicates that this imgicontainer has been triggered to update its internal animation state. likely this should only be called from within nsimageframe or objects of similar type. void requestrefresh( [const] in timestamp atime ); parameters atime missing description exceptions thrown missing exception missing description resetanimation() void resetanimation(); parameters none. exceptions thrown missing exception missing description native code only!restoredatadone obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void restoredatadon...

mozIStorageFunction
the mozistorageconnection method mozistorageconnection, like this: dbconn.createfunction("square", 1, function(aarguments) { let value = aarguments.getint32(0); return value * value; }); // run some query that uses the function. let stmt = dbconn.createstatement("select square(value) from some_table"); try { while (stmt.executestep()) { // handle the results } } finally { stmt.reset(); } in earlier versions of gecko, however, you'll need to actually create an object containing the onfunctioncall method. this still works in gecko 1.9.1.4 and later, so you may wish to do it this way for compatibility for the time being. // first, create our object that will represent our function. var squarefunction = { onfunctioncall: function(aarguments) { let value = aarguments.get...
...uments) { let value = aarguments.getint32(0); return value * value; } }; // now, register our function with the database connection. dbconn.createfunction("square", 1, squarefunction); // run some query that uses the function. let stmt = dbconn.createstatement("select square(value) from some_table"); try { while (stmt.executestep()) { // handle the results } } finally { stmt.reset(); } c++ // first, create our class that will represent our function. class squarefunction : public mozistoragefunction { public: ns_imethod onfunctioncall(mozistoragevaluearray *aarguments, nsivariant **_result) { print32 value; nsresult rv = aarguments->getint32(&value); ns_ensure_success(rv, rv); nscomptr<nsiwritablevariant> result = do...

mozIStorageStatementWrapper
atures directly into the mozistoragestatement interface, so this interface is essentially deprecated. storage/public/mozistoragestatementwrapper.idlscriptable please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void initialize(in mozistoragestatement astatement); void reset(); boolean step(); void execute(); attributes attribute type description statement mozistoragestatement the statement that is wrapped. row mozistoragestatementrow the current row. throws an exception if no row is currently available. useful only from script. the value of this is only valid while the statement is still executing,...
...statement is still executing, and is still on the appropriate row. params mozistoragestatementparams the parameters; these can be set in lieu of using the call notation on this. methods initialize() this method initializes this wrapper with astatement. void initialize( in mozistoragestatement astatement ); parameters astatement the statement to be initialized. reset() this method resets the wrapped statement. void reset(); parameters none. step() this method steps the wrapped statement. boolean step(); parameters none. return value returns true if the stepping the wrapped statement was successful, otherwise returns false. execute() this method executes the wrapped statement. void execute(); parameters none. see also storage mozistoragestatement moz...

nsIConsoleService
obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. void getmessagearray(...
... a listener, to notify when an error is logged. note: to guard against stack overflows from listeners which could log messages (this could be done inadvertently through listeners implemented in javascript), we do not call any listeners when another error is already being logged. void registerlistener( in nsiconsolelistener listener ); parameters listener the nsiconsolelistener to add. reset() to clear the message buffer (for example, for privacy reasons): void reset(); parameters none. note: console listeners expect you to log an empty string message before calling reset, so they too can clear their message buffers. (this also works before gecko 19.) unregisterlistener() deregisters a listener. void unregisterlistener( in nsiconsolelistener listener ); parameters lis...

nsILocalFile
the result returned from this method may be used with setrelativedescriptor() to initialize a nsilocalfile instance. initwithfile() initializes this object with another file. void initwithfile( in nsilocalfile afile ); parameters afile the file this becomes equivalent to. initwithnativepath() used to set the full path that this nsilocalfile references. all current settings will be reset. void initwithnativepath( in acstring filepath ); parameters filepath a string that specifies a platform-specific, full path to a file or directory. must be in the native file system character set. exceptions thrown ns_error_file_unrecognized_path indicates that filepath is not an absolute file path or that it contains characters that are invalid for the filesystem. initwithpath(...
... specifies a platform-specific, full path to a file or directory. must be in the native file system character set. exceptions thrown ns_error_file_unrecognized_path indicates that filepath is not an absolute file path or that it contains characters that are invalid for the filesystem. initwithpath() used to set the full path that this nsilocalfile references. all current settings will be reset. void initwithpath( in astring filepath ); parameters filepath a string that specifies a platform-specific, full path to a file or directory. exceptions thrown ns_error_file_unrecognized_path indicates that filepath is not an absolute file path or that it contains characters that are invalid for the filesystem. launch() requests that the operating system attempt to open this fil...

nsIMsgDatabase
ummary to this article. ...
...n nsimsgfolder afolder); parameters afolder close() void close(in boolean aforcecommit); parameters aforcecommit commit() void commit(in nsmsgdbcommit committype); parameters committype forceclosed() force closed is evil, and we should see if we can do without it. in 4.x, it was mainly used to remove corrupted databases. void forceclosed(); clearcachedhdrs() void clearcachedhdrs(); resethdrcachesize() void resethdrcachesize(in unsigned long size); getmsghdrforkey() nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); parameters key getmsghdrformessageid() nsimsgdbhdr getmsghdrformessageid(in string messageid); parameters messageid containskey() returns whether or not this database contains the given key. boolean containskey(in nsmsgkey key); parameters key createnewhdr() m...

nsIPrefService
preferences files and also facilitates access to the preference branch object which allows the direct manipulation of the preferences themselves. inherits from: nsisupports last changed in gecko 1.7 method overview nsiprefbranch getbranch(in string aprefroot); nsiprefbranch getdefaultbranch(in string aprefroot); void readuserprefs(in nsifile afile); void resetprefs(); void resetuserprefs(); void savepreffile(in nsifile afile); methods getbranch() call to get a preferences "branch" which accesses user preference data. using a set method on this object will always create or set a user preference value. when using a get method a user set value will be returned if one exists, otherwise a default value will be returned. nsiprefbr...
.... return value nsiprefbranch - the object representing the requested default branch. readuserprefs() called to read in the preferences specified in a user preference file. note: if nsnull is passed in for the afile parameter the default preferences file(s) [prefs.js, user.js] will be read and processed. void readuserprefs( in nsifile afile ); parameters afile the file to be read. resetprefs() called to completely flush and re-initialize the preferences system. void resetprefs(); parameters none. resetuserprefs() called to reset all preferences with user set values back to the application default values. void resetuserprefs(); parameters none. savepreffile() called to write current preferences state to a file. note: if nsnull is passed in for the afile parameter th...

nsIXSLTProcessor
this will make the processor use the default-value for all parame...
...esheet (or xsl:transform) element of an xslt stylesheet. removeparameter() removes a parameter, if set. this will make the processor use the default-value for the parameter as specified in the stylesheet. void removeparameter( in domstring namespaceuri, in domstring localname ); parameters namespaceuri the namespaceuri of the xslt parameter. localname the local name of the xslt parameter. reset() remove all parameters and stylesheets from this nsixsltprocessor. void reset(); parameters none. setparameter() sets a parameter to be used in subsequent transformations with this nsixsltprocessor. if the parameter doesn't exist in the stylesheet the parameter will be ignored. void setparameter( in domstring namespaceuri, in domstring localname, in nsivariant value ); parameters namesp...

Network request list - Firefox Developer Tools
e page. each request is displayed in its own row: by default, the network monitor is cleared each time you navigate to a new page or reload the current page. you can override this behavior by checking "enable persistent logs" in the settings. network request columns you can toggle columns on and off by right-clicking on the table header and choosing the specific column from the context menu. a reset columns command is available on the context menu to reset the columns to their initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a co...
...r initial configuration. you can also change the width of the columns to help make the information you are looking for easier to view. the mouse pointer changes to a resize icon when you move it over the border of a column. you can drag to manually set the size of column. starting in firefox 76 you can double-click a column divider to resize the column to the left of it to fit its contents. the reset columns command on the context menu also resets the width of the columns to the default values. clicking the column header label sorts the request list by that column. you can reset the sort to the default by selecting "reset sorting" from the context menu. here is a list of all available columns: status: the http status code returned. the numeric code is displayed on a colored backgroun...

CanvasPattern.setTransform() - Web APIs
trix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</te...
.../mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventli...

CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
etcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <input id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = tex...
...30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintov...

Basic animations - Web APIs
arger than canvas cleary = imgh; } else { cleary = canvasysize; } // get canvas context ctx = document.getelementbyid('canvas').getcontext('2d'); // set refresh rate return setinterval(draw, speed); } function draw() { ctx.clearrect(0, 0, clearx, cleary); // clear the canvas // if image is <= canvas size if (imgw <= canvasxsize) { // reset, start from beginning if (x > canvasxsize) { x = -imgw + x; } // draw additional image1 if (x > 0) { ctx.drawimage(img, -imgw + x, y, imgw, imgh); } // draw additional image2 if (x - imgw > 0) { ctx.drawimage(img, -imgw * 2 + x, y, imgw, imgh); } } // image is > canvas size else { ...
... from beginning if (x > canvasxsize) { x = -imgw + x; } // draw additional image1 if (x > 0) { ctx.drawimage(img, -imgw + x, y, imgw, imgh); } // draw additional image2 if (x - imgw > 0) { ctx.drawimage(img, -imgw * 2 + x, y, imgw, imgh); } } // image is > canvas size else { // reset, start from beginning if (x > (canvasxsize)) { x = canvasxsize - imgw; } // draw aditional image if (x > (canvasxsize-imgw)) { ctx.drawimage(img, x - imgw + 1, y, imgw, imgh); } } // draw image ctx.drawimage(img, x, y,imgw, imgh); // amount to move x += dx; } below is the <canvas> in which the image is scrolled.

Drawing shapes with canvas - Web APIs
s a straight line to the path, going to the start of the current sub-path. stroke() draws the shape by stroking its outline. fill() draws a solid shape by filling the path's content area. the first step to create a path is to call the beginpath(). internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together form a shape. every time this method is called, the list is reset and we can start drawing new shapes. note: when the current path is empty, such as immediately after calling beginpath(), or on a newly created canvas, the first path construction command is always treated as a moveto(), regardless of what it actually is. for that reason, you will almost always want to specifically set your starting position after resetting a path. the second step is calling th...
...tly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path. rect(x, y, width, height) draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height. before this method is executed, the moveto() method is automatically called with the parameters (x,y). in other words, the current pen position is automatically reset to the default coordinates. making combinations so far, each example on this page has used only one type of path function per shape. however, there's no limitation to the number or types of paths you can use to create a shape. so in this final example, let's combine all of the path functions to make a set of very famous game characters. <html> <body onload="draw();"> <canvas id="canvas" w...

Document: drag event - Web APIs
px; } javascript var dragged; /* events fired on the draggable target */ document.addeventlistener("drag", function(event) { }, false); document.addeventlistener("dragstart", function(event) { // store a ref. ...
...over", function(event) { // prevent default to allow drop event.preventdefault(); }, false); document.addeventlistener("dragenter", function(event) { // highlight potential drop target when the draggable element enters it if (event.target.classname == "dropzone") { event.target.style.background = "purple"; } }, false); document.addeventlistener("dragleave", function(event) { // reset background of potential drop target when the draggable element leaves it if (event.target.classname == "dropzone") { event.target.style.background = ""; } }, false); document.addeventlistener("drop", function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "...

Document.requestStorageAccess() - Web APIs
el origin. the number of origins the requesting origin has storage access to is incremented by one. note that this number is also incremented when automatic access grants are given through our compatibility heuristics. the ephemeral storage access grant is: invalidated at the end of the browser session. not persisted to disk (e.g. will not persist if the browser crashes). reset after 24 hours in the case of a long-running browser session. ...equal or more origins than the maximum: the user is prompted if the user clicks “allow” or “allow on any site” the request is resolved. if the user clicks “don’t allow”, the storage access request is rejected and the requesting origin can re-request once it receives another user interaction. if the user al...
...in can re-request once it receives another user interaction. if the user allows storage the requesting origin is given a persistent storage access grant on the current top-level origin. the number of origins the requesting origin has storage access to is incremented by one. the persistent storage access permission is: persisted to disk and will remain valid in future browser sessions. reset after 30 days. when an ephemeral or persistent storage access grant expires, the number of origins the requesting origin has storage access to is decremented by one. note: if the requesting origin is not classified as a tracking origin, the access request is automatically given an ephemeral storage access grant, which will go away when the page is reloaded. the user is never shown a prom...

Element: click event - Web APIs
the most specific ancestor element that contained both elements. click fires after both the mousedown and mouseup events have fired, in that order. usage notes the mouseevent object passed into the event handler for click has its detail property set to the number of times the target was clicked. in other words, detail will be 2 for a double-click, 3 for triple-click, and so forth. this counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across platforms. the interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to perform multiple clicks with adaptive interfaces. internet explorer internet explorer 8 & 9 suffer f...
...his example displays the number of consecutive clicks on a <button>. html <button>click</button> javascript const button = document.queryselector('button'); button.addeventlistener('click', event => { button.innerhtml = `click count: ${event.detail}`; }); result try making rapid, repeated clicks on the button to increase the click count. if you take a break between clicks, the count will reset. specifications specification status ui events working draft document object model (dom) level 3 events specificationthe definition of 'click' in that specification. obsolete document object model (dom) level 2 events specificationthe definition of 'click' in that specification. obsolete ...

Element: mouseout event - Web APIs
hat list items obscure the underlying <ul>. ...
... // highlight the mouseleave target event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseout' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseout' in that specification. obsolete ...

Element: mouseover event - Web APIs
eover and mouseenter events. ...
...rget event.target.style.color = "purple"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false); result specifications specification status ui eventsthe definition of 'mouseover' in that specification. working draft document object model (dom) level 3 events specificationthe definition of 'mouseover' in that specification. obsolete ...

HTMLInputElement - Web APIs
e empty string if the control is not a candidate for constraint validation (willvalidate is false), or it satisfies its constraints. this value can be set by the setcustomvalidity method. willvalidate read only boolean: returns whether the element is a candidate for constraint validation. it is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a <datalist> ancestor; its disabled property is true. properties that apply only to elements of type checkbox or radio checked boolean: returns / sets the current state of the element when type is checkbox or radio. defaultchecked boolean: returns / sets the default state of a radio button or checkbox as originally specified in html that created ...
...rrently selected files or directories. properties that apply only to text/number-containing or elements autocomplete string: returns / sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the browser. ignored if the value of the type attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). possible values are: on: the browser can autocomplete the value using previously stored value off: the user must explicity enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value. maxlength long: returns / sets the el...

Pinch zoom gestures - Web APIs
a pointer is raised from the contact surface. when this occurs, the event is removed from the event cache and the target element's background color and border are restored to their original values. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. ...
...lication, this handler is also used for pointercancel, pointerleave and pointerout events. function pointerup_handler(ev) { log(ev.type, ev); // remove this pointer from the cache and reset the target's // background and border remove_event(ev); ev.target.style.background = "white"; ev.target.style.border = "1px solid black"; // if the number of pointers down is less than two then reset diff tracker if (evcache.length < 2) { prevdiff = -1; } } application ui the application uses a <div> element for the touch area and provides buttons to enable logging and to clear the log. to prevent the browser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element. <body onload="init();" style="touch-...

SVGAngle - Web APIs
nd unittype to be updated automatically to reflect this setting. exceptions on setting: a domexception with code syntax_err is raised if the assigned string cannot be parsed as a valid <angle>. a domexception with code no_modification_allowed_err is raised when the length corresponds to a read-only attribute, or when the object itself is read-only. methods newvaluespecifiedunits reset the value as a number with an associated unittype, thereby replacing the values for all of the attributes on the object. exceptions: a domexception with code not_supported_err is raised if unittype is svg_angletype_unknown or not a valid unit type constant (one of the other svg_angletype_* constants defined on this interface). a domexception with code no_modification_allowed_err is raised whe...
...ot_supported_err is raised if unittype is svg_angletype_unknown or not a valid unit type constant (one of the other svg_angletype_* constants defined on this interface). a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. converttospecifiedunits preserve the same underlying stored value, but reset the stored unit identifier to the given unittype. object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a result of this method. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgelement' in that specification. candidate recommendation adds the dataset property. scala...

SVGLength - Web APIs
igned string cannot be parsed as a valid <length>. a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. methods name & arguments return description newvaluespecifiedunits(in unsigned short unittype, in float valueinspecifiedunits) void reset the value as a number with an associated unittype, thereby replacing the values for all of the attributes on the object. exceptions: a domexception with code not_supported_err is raised if unittype is svg_lengthtype_unknown or not a valid unit type constant (one of the other svg_lengthtype_* constants defined on this interface). a domexception with code no_modification_allowe...
...own or not a valid unit type constant (one of the other svg_lengthtype_* constants defined on this interface). a domexception with code no_modification_allowed_err is raised when the length corresponds to a read only attribute or when the object itself is read only. converttospecifiedunits(in unsigned short unittype) void preserve the same underlying stored value, but reset the stored unit identifier to the given unittype. object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a result of this method. for example, if the original value were "0.5cm" and the method was invoked to convert to millimeters, then the unittype would be changed to svg_lengthtype_mm, valueinspecifiedunits would be changed to the numeric value 5 and valueasst...

SourceBuffer.abort() - Web APIs
the mse api is fully asynchronous, but this step seems to suggest a synchronous (blocking) operation, which doesn't make sense. ...
... sourcebuffer.abort(); parameters none. return value undefined. exceptions exception explanation invalidstateerror 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 — consider for example step 1 of reset parser state. the mse api is fully asynchronous, but this step seems to suggest a synchronous (blocking) operation, which doesn't make sense. saying that, current implementations can be useful in certain situations, when you want to stop the current append (or whatever) operation occuring on a sourcebuffer, and then immediately start performing operations on it again. for example, consider this ...

Signaling and video calling - Web APIs
socket documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users. you can try out this example on glitch, and you can remix the example to experiment with it as well. you can also look at the full project on github. note: if you try out the example on glitch, please note that any changes made to the code will immediately reset any connections. in addition, there is a short timeout period; the glitch instance is for quick experiments and testing only. the signaling server establishing a webrtc connection between two devices requires the use of a signaling server to resolve how to connect them over the internet. a signaling server's job is to serve as an intermediary to let two peers find and establish a connection wh...
... quit their browser, or had a system crash. in any case, all good things must come to an end. hanging up when the user clicks the "hang up" button to end the call, the hangupcall() function is called: function hangupcall() { closevideocall(); sendtoserver({ name: myusername, target: targetusername, type: "hang-up" }); } hangupcall() executes closevideocall() to shut down and reset the connection and release resources. it then builds a "hang-up" message and sends it to the other end of the call to tell the other peer to neatly shut itself down. ending the call the closevideocall() function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the rtcpeerconnection object: function closevideocall() { var remotevideo = document.getelementby...

WebSocket.bufferedAmount - Web APIs
syntax var bufferedamount = awebsocket.bufferedamount; value an unsigned long. ...
... syntax var bufferedamount = awebsocket.bufferedamount; value an unsigned long. ...

Movement, orientation, and motion: A WebXR example - Web APIs
and their effects are: the w key slides the viewer forward by move_distance. the s key slides the viewer backward move_distance. the a key slides the viewer to the left by move_distance. the d key slides the viewer to the right by move_distance. the up arrow key, ↑, moves the viewer upward by move_distance. the down arrow key, ↓, moves the viewer downward by move_distance. the r key resets the viewer to their starting position and orientation by resetting the transport offsets all to 0. these offsets will be applied by the renderer starting with the next frame drawn. pitching and yawing with the mouse we also have a mousedown event handler which checks to see if the right mouse button is down, and if so, calls the rotateviewby() function, defined next, to calculate and store t...
... arbitratily-sized textures for mipmapping. ispowerof2() returns true if the specified value is a power of two; otherwise returns false. putting it all together when you take all of this code and add in the html and the other javascript code not included above, you get what you see when you try out this example on glitch. remember: as you wander around, if you get lost, just hit the r key to reset yourself to the beginning. a tip: if you don't have an xr device, you may be able to get some of the 3d effect if you bring your face very close to the screen, with your nose centered along the border between the left and right eye images in the canvas. by carefully focusing through the screen at the image, and slowly moving forward and backward, you should eventually be able to bring the 3d ima...

XRReferenceSpace - Web APIs
erence space of the object on which the method is called into a different coordinate space. this is useful for positioning objects while rendering, and to perform the needed transforms when changing the viewer's position and/or orientation in 3d space. events in addition to other events that may be sent to xrspace or eventtarget objects, the following also apply to xrreferencespace objects. reset the reset event is sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin relative to the user's environment or location. this can happen, for example, after the user recalibrates their xr device, or if the device automatically adjusts its origin after losing and regaining tracking. in addition to using addeventlistener()...
... sent to an xrreferencespace object when the browser detects a discontinuity has occurred wherein the tracked object's origin relative to the user's environment or location. this can happen, for example, after the user recalibrates their xr device, or if the device automatically adjusts its origin after losing and regaining tracking. in addition to using addeventlistener(), you can establish a reset event handler by setting the onreset event handler property. reference space types the reference space returned by xrsession.requestreferencespace() is either xrreferencespace or xrboundedreferencespace. the "interface" column in the table below indicates which of the two types is returned for each reference space type constant.. reference space descriptors the types of reference space are...

XRReferenceSpaceEvent() - Web APIs
eventinitdict an object based on the xrreferencespaceeventinit dictionary, containing data used to initialize the new event object. ...
... eventinitdict an object based on the xrreferencespaceeventinit dictionary, containing data used to initialize the new event object. ...

XRReferenceSpaceEvent - Web APIs
constructor xrreferencespaceevent() returns a new xrreferencespaceevent with the specified type and configured using the values in the given xrreferencespaceeventinit dictionary. properties in addition to inheriting the properties available on the parent interface, event, xrreferencespaceevent objects include the following properties: referencespace read only an xrreferencespace indicating the reference space that generated the event. ...
...he reference space that generated the event. transform read only an xrrigidtransform object indicating the position and orientation of the specified referencespace's native origin after the event, defined relative to the coordinate system before the event. methods while xrreferencespaceevent does not define any methods, it inherits the methods of its parent interface, event. event types reset the reset event is sent to a reference space when its native origin is changed due to a discontinuity, recalibration, or device reset. this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed. specifications specification...

::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. ...
...the button, submit, reset, and color types of the <input> element. note: using ::-moz-focus-inner with anything than the buttons that support it doesn't match anything and has no effect. syntax syntax not found in db! examples html <input type="submit" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard. ...

Alternative style sheets - CSS: Cascading Style Sheets
lso accessed from view > page style. chrome requires an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes. ...
...itle="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected. when the user selects a different style, the page will immediately be re-rendered using that style sheet. no matter what style is selected, the rules from the reset.css stylesheet will always be applied. try it out click here for a working example you can try out. details any stylesheet in a document falls into one of the following categories: persistent (no rel="alternate", no title=""): always applies to the document. preferred (no rel="alternate", with title="..." specified): applied by default, but disabled if an alternate stylesheet is selected.

CSS Animations tips and tricks - CSS: Cascading Style Sheets
wever, there are things you might want to do that aren't obvious, or clever ways to do things that you might not come up with right away. this article is a collection of tips and tricks we've found that may make your work easier, including how to run a stopped animation again. run an animation again the css animations specification doesn't offer a way to run an animation again. there's no magic resetanimation() method on elements, and you can't even just set the element's animation-play-state to "running" again. instead, you have to use clever tricks to get a stopped animation to replay. here's one way to do it that we feel is stable and reliable enough to suggest to you. html content first, let's define the html for a <div> we wish to animate and a button that will play (or replay) the an...
..."; }); }); } this looks weird, doesn't it? that's because the only way to play an animation again is to remove the animation effect, let the document recompute styles so that it knows you've done that, then add the animation effect back to the element. to make that happen, we have to be creative. here's what happens when the play() function gets called: the box's list of css classes is reset to simply "box". this has the effect of removing any other classes currently applied to the box, including the "changing" class that handles animation. in other words, we're removing the animation effect from the box. however, changes to the class list don't take effect until the style recomputation is complete and a refresh has occurred to reflect the change. to be sure that the styles are reca...

Grid template areas - CSS: Cascading Style Sheets
these can quickly become difficult to read for other developers, or even your future self. however they are part of the specification and it is likely you will come across them in examples or in use by other developers, even if you choose not to use them. before using any shorthand it is worth remembering that shorthands not only enable the setting of many properties in one go, they also act to reset things to their initial values that you do not, or cannot set in the shorthand. therefore if you use a shorthand, be aware that it may reset things you have applied elsewhere. the two shorthands for the grid container are the explicit grid shorthand grid-template and the grid definition shorthand grid. grid-template the grid-template property sets the following properties: grid-template-row...
...ax(100px, auto) is doing. then after grid-template-areas we have a forward slash, after that is an explicit track listing of column tracks. grid the grid shorthand goes a step further and also sets properties used by the implicit grid. so you will be setting: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow the property also resets the grid-gap property to 0, however you cannot specify the gaps in this shorthand. you can use this syntax in the exact same way as the grid-template shorthand, just be aware than when doing so you will reset the other values set by the property. .wrapper { display: grid; grid: "hd hd hd hd hd hd hd hd hd" minmax(100px, auto) "sd sd sd main main main main main main" minma...

initial - CSS: Cascading Style Sheets
ord applies the initial (or default) value of a property to an element. it can be applied to any css property. this includes the css shorthand all, with which initial can be used to restore all css properties to their initial state. on inherited properties, the initial value may be unexpected. you should consider using the inherit, unset, or revert keywords instead. examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification. cand...
... full support full support no support no supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use. see also use unset to set a property to its inherited value if it inherits, or to its initial value if not. use revert to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist). use inherit to make an element's property the same as its parent. the all property lets you reset all properties to their initial, inherited, reverted, or unset state at once. ...

revert - CSS: Cascading Style Sheets
it can be applied to any css property, including the css shorthand all. ...
...gent's default style. if used within the user agent's default styles, this keyword is functionally equivalent to unset. the revert keyword works exactly the same as unset in many cases. the only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side). revert will not affect rules applied to children of an element you reset (but will remove effects of a parent rule on a child). so if you have a color: green for all sections and all: revert on a specific section the color of the section will be black. but if you have a rule to make all paragraphs red then all paragraphs will still be red in all sections. revert is just a value. it is still possible to override revert value using specificity. the revert keyword i...

<input type="button"> - HTML: Hypertext Markup Language
methods none value an <input type="button"> elements' value attribute contains a domstring that is used as the button's label. <input type="button" value="click me"> if you don't specify a value, you get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset forms, respectively). to make buttons do anything, you have to write javascript code to do the work. a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <form> <input type="button" value="start machine"> </form> <p>t...
...enabling a button to disable a button, simply specify the disabled global attribute on it, like so: <input type="button" value="disable me" disabled> you can enable and disable buttons at run time by simply setting disabled to true or false. in this example our button starts off enabled, but if you press it, it is disabled using button.disabled = true. a settimeout() function is then used to reset the button back to its enabled state after two seconds. hidden code 1 <input type="button" value="enabled"> const button = document.queryselector('input'); button.addeventlistener('click', disablebutton); function disablebutton() { button.disabled = true; button.value = 'disabled'; window.settimeout(function() { button.disabled = false; button.value = 'enabled'; }, 2000); } ...

Network Error Logging - HTTP
d for security reasons, if the server ip address that delivered the original report is different to the current server ip address at time of error generation, the report data will be downgraded to only include information about this problem and the type set to dns.address_changed. ...
...e server ip address that delivered the original report is different to the current server ip address at time of error generation, the report data will be downgraded to only include information about this problem and the type set to dns.address_changed. ...

Iterators and generators - JavaScript
bove). the next() method also accepts a value, which can be used to modify the internal state of the generator. a value passed to next() will be received by yield . note: a value passed to the first invocation of next() is always ignored. ...
...he internal state of the generator. a value passed to next() will be received by yield . note: a value passed to the first invocation of next() is always ignored. ...

Function.prototype.bind() - JavaScript
this : otherthis, baseargs ); }; if (this.prototype) { // function.prototype doesn't have a prototype property fnop.prototype = this.prototype; } fbound.prototype = new fnop(); return fbo...
... inserted at the start of the arguments passed to the target function, followed by whatever arguments are passed bound function at the time it is called. function list() { return array.prototype.slice.call(arguments); } function addarguments(arg1, arg2) { return arg1 + arg2 } const list1 = list(1, 2, 3); // [1, 2, 3] const result1 = addarguments(1, 2); // 3 // create a function with a preset leading argument const leadingthirtysevenlist = list.bind(null, 37); // create a function with a preset first argument. const addthirtyseven = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const result2 = addthirtyseven(5); // 37 + 5 = 42 const result3 = addthirtyseven(5, 10); // 37 + 5 = 42 //...

RegExp.prototype.exec() - JavaScript
ps)" examples finding successive matches if your regular expression uses the "g" flag, you can use the exec() method multiple times to find successive matches in the same string. when you do so, the search starts at the substring of str specified by the regular expression's lastindex property (test() will also advance the lastindex property). note that the lastindex property will not be reset when searching a different string, it will start its search at its existing lastindex . for example, assume you have this script: let myre = /ab*/g; let str = 'abbcdefabh'; let myarray; while ((myarray = myre.exec(str)) !== null) { let msg = 'found ' + myarray[0] + '. '; msg += 'next match starts at ' + myre.lastindex; console.log(msg); } this script displays the following text: found ...
...array[0] + '. '; msg += 'next match starts at ' + myre.lastindex; console.log(msg); } this script displays the following text: found abb. next match starts at 3 found ab. next match starts at 9 warning: do not place the regular expression literal (or regexp constructor) within the while condition! it will create an infinite loop if there is a match, due to the lastindex property being reset upon each iteration. also, be sure that the global flag ("g") is set, or it will also cause an infinite loop. using exec() with regexp literals you can also use exec() without creating a regexp object explicitly: let matches = /(hello \s+)/.exec('this is a hello world!'); console.log(matches[1]); this will log a message containing 'hello world!'. specifications specification ...

Understanding latency - Web Performance
owser’s request for a resource to the moment when the requested resource arrives at the browser. network throttling to emulate the latency of a low bandwidth network, you can use developer tools and switch to a lower end network connection. in the developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc. ...
...nd switch to a lower end network connection. in the developer tools, under the network table, you can switch the throttling option to 2g, 3g, etc. different browser developer tools have different preset options, the characteristics emulated include download speed, upload speed, and minimum latency, or the minimum amount of type it takes to send a packet of data. ...

dominant-baseline - SVG: Scalable Vector Graphics
s and the dominant baseline is used to select the baseline-table that corresponds to that baseline. the baseline-table font-size component is set to the value of the font-size attribute on the element on which the dominant-baseline attribute occurs. no-change the dominant-baseline, the baseline-table, and the baseline-table font-size remain the same as that of the parent text content element. reset-size the dominant-baseline and the baseline-table remain the same, but the baseline-table font-size is changed to the value of the font-size attribute on this element. this re-scales the baseline-table for the current font-size. ideographic the baseline-identifier for the dominant-baseline is set to be ideographic, the derived baseline-table is constructed using the ideographic baseline-table...
... 30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of 'dominant-baseline' in that specification. candidate recommendation refers to the specification in working draft and explicitly mentions the removal of the values use-script, no-change, and reset-size. css inline layoutthe definition of 'dominant-baseline' in that specification. working draft removed the values use-script, no-change, and reset-size and introduced the text-top value. scalable vector graphics (svg) 1.1 (second edition)the definition of 'dominant-baseline' in that specification. recommendation initial definition browser compatibility the...

Sidebar - Archive of obsolete content
byid("sidebar-box").width=newwidth; } you can also disable the ability to resize it manually, using the mouse, by hiding the sidebar's splitter element. for this snippet to work, you have to declare mainwindow as in the previous code block then write: mainwindow.document.getelementbyid("sidebar-splitter").hidden = true; be aware that if you change the splitter's hidden attribute, you need to reset it to a safe value when your sidebar is closed, or replaced by another sidebar. for example, use this in your sidebar's unload event handler: mainwindow.document.getelementbyid("sidebar-splitter").hidden = mainwindow.document.getelementbyid("sidebar-box").hidden; see also bootstrap demo addon that creates a sidebar with html content: https://gist.github.com/noitidart/8728393 ...

Enhanced Extension Installation - Archive of obsolete content
location if it is functioning (for a directory install location such as app-profile or app-global the location is functioning if it the directory exists. if any location is not functioning, or any of the manifests listed above does not exist, all manifests are removed and the system rebuilds everything from scratch. this should prevent against random file deletions and allow developers to easily reset their state by deleting one of the required system files. since we can now install by simply detecting the presence of a {guid} folder under the app-profile and app-global install locations, we no longer need installed-extensions.txt for registration of pre-configured items such as the default theme. the firefox build system will just create the {guid} folder for the default theme and place its ...

Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
me: why 'nearly' ?), so adding a trailing space when you search serves as a delimiter on the inheritance position, and makes it easier to specify what you’re looking for (see figures 6, 7).4 this results in the file nsilocalfile.idl. let’s display it. every method includes explanatory comments. in initwithpath, the nsilocalfile object gets initialized, and any information already in it gets reset. also be aware of a potential problem when using paths not representing entities.5 this requires a full path as an argument. relative paths will throw errors. this should help you understand the initwithpath specification. fixme: figure 6: searching without a trailing space fixme: figure 7: searching with a trailing space fixme: listing 7: source-code fragment var file = components.classes[...

Adding Toolbars and Toolbar Buttons - Archive of obsolete content
he correct context attribute value) and clicking on the customize option. other than what we have stated before, you should take into account the controls at the bottom of the customize toolbars dialog. you should test your toolbar buttons and items under all combinations of icons / icons and text / text, use small icons, and having your icons in different toolbars. you should also test that the reset to defaults button works correctly. adding elements to your toolbar that are not toolbarbutton or toolbaritem will cause it to fail. make sure your icons look ok while the customize dialog is open, and after clicking on the ok button. if you use xbl bindings, make sure everything works normally after customizing toolbars. all of this is very important to test because, when the dialog is opened, f...

Adding windows and dialogs - Archive of obsolete content
the borders to appear. see the firefox preferences window for an example of this: sections are defined using groupbox elements, but their style is quite different from the default. attribute persistence user actions can change the state of your windows, such as selecting an option in a listbox, or entering text in a textbox. if the user closes and then reopens your window, all the controls are reset to their defaults, which may not be what you want. you need some way of remembering the user-manipulated attribute values so that the window reloads it last state when opened. most xul elements support the persist attribute, which has this exact function. you set the persist attribute with a space-separated list of attribute names, indicating which attribute values must be persisted across windo...

Appendix B: Install and Uninstall Scripts - Archive of obsolete content
is stage, it's a good time to show the uninstall feedback form. it is not a good time to clean up your files, at least not without prior user consent. remember that the user can revert this decision. so, you should listen to other events, like canceling the operation, to make sure that you know what is going on. set a boolean flag that indicates if your add-on is set to be uninstalled or not, and reset it when necessary. the second stage is knowing when the application is actually going to be closed. then you'll have reasonable certainty that the add-on will be removed and you can perform any cleanup operations safely. for this, you need to add an observer for the quit-application topic. this is when you'll know the application will close. then you can check the flag you set up on the first st...

Custom XUL Elements with XBL - Archive of obsolete content
me as fields, and they're the ones we prefer for public members. when you add a node to a xul document using an xbl binding, all normal dom operations can be performed on it. you can move it around, delete it or clone it. but there is one thing you need to know about moving or cloning your node: all internal state in the node will be lost. this means that all your properties and fields will be reset. if you want some value to be preserved after such dom operations, you must set it as an attribute and not an internal value. methods our "person" binding has a single method that removes the item from the list: <method name="remove"> <parameter name="aevent" /> <body><![cdata[ this.parentnode.removechild(this); ]]></body> </method> as you can see, it's very easy to define a m...

JavaScript Object Management - Archive of obsolete content
variable in the browseroverlay object, and increment it every time the message is going to be shown. once you have this working right, try the following: open the message a few times, so that the number increments. now open a new window and display the message from the new window. what do you think will happen? what will the count be this time? you probably didn't expect this, but the count was reset in the new window. each window keeps its own counter, and now the extension is not behaving as expected. this is a fundamental lesson: the chrome is not global, it's window-specific. all of your scripts and objects are replicated for each window, and they work independently from each other. this is an issue that is very easy to overlook, since most firefox users, specially power users, have a sin...

Repackaging Firefox - Archive of obsolete content
butor=<name> app.distributor.channel=<name> other preferences some settings are commonly set in partner distributions. this is not meant to be a comprehensive list of preferences, however. if you find a preference you think is generally useful to most partner repacks, please add it below, using the same style: localizable preferences browser.startup.homepage=<string> browser.startup.homepage_reset=<string> url for the default homepage, and what the homepage gets reset to when the user hits "restore to default" in the preferences. these should both be the same url. startup.homepage_welcome_url=<string> url to the first-run page. this is loaded in addition to the homepage, the very first time that firefox is run. browser.search.defaultenginename=<string> name of the default search en...

JavaScript Client API - Archive of obsolete content
e scheduler to decide when your engine will be synced. setting it to zero means "i have no need to sync". the higher you set this number, the more urgently the scheduler treats your request. setting it to 100 means "sync me immediately". it's up to you to figure out the best way to assign a score based on the current state of whatever data type you're tracking. your tracker score is automatically reset to zero after each time your engine syncs. the changed guid list the base class maintains a list of guids that need syncing. when your tracker detects that an item has changed, you should add it to this list by calling: this.addchangedid(guid); these guids correspond to the .id fields of your record objects; see the section on the store class for more about defining and maintaining the mapping ...

Simple Storage - Archive of obsolete content
notes : [{ label: "(empty)", disabled: true }]) });}// modify the page's context menu by sneaking in before it's shown. if there's// a selection, add a note menuitem that makes a new note. otherwise, don't// modify the menu at all. we'll limit the number of notes to 20. old notes// will be forgotten. ...

Simple Storage - Archive of obsolete content
[{ label: "(empty)", disabled: true }]) }); } // modify the page's context menu by sneaking in before it's shown. if there's // a selection, add a note menuitem that makes a new note. otherwise, don't // modify the menu at all. we'll limit the number of notes to 20. old notes // will be forgotten. :( jetpack.menu.context.page.beforeshow = function (menu) { menu.reset(); if (jetpack.selection.text) menu.add({ label: "note", command: function () { notes.unshift(jetpack.selection.text); if (notes.length > 20) notes.pop(); updatejetpackmenu(); } }); }; // initialize the jetpack menu with the current notes. updatejetpackmenu(); see also settings jep 11 ...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
localname) gets the value of a parameter in the imported xslt stylesheet. void removeparameter(string namespaceuri, string localname) removes all set parameters from the imported xslt stylesheet and makes them default to the xslt-defined defaults. void clearparameters() removes all set parameters and sets them to defaults specified in the xslt stylesheet. void reset() removes all parameters and stylesheets. original document information author(s): doron rosenberg, ibm corporation published: 26 jul 2005 link: http://www.ibm.com/developerworks/we...y/wa-ie2mozgd/ ...

Stress testing - Archive of obsolete content
...

Table Layout Regression Tests - Archive of obsolete content
1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0" /> <list data="100 100 " /> <position data="left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto " /> <text data="0 0 0 normal normal 0[0x0]tw normal " /> <textreset data="0 10[0xa]enum " /> <display data="0 1 0 0 0 0 0 0 0 0 0 0 " /> <visibility data="0 1 1.000000" /> <table data="0 0 4 -1 1 " /> <tableborder data="1 null null 0 2 " /> <content data="0 0 0 null " /> <quotes data="0 " /> <ui data="3 0 0 1 " /> <uireset data="7 0 4" /> <xul data="0 0 0 0 0 1 <svg data="0 1.000000 1.000000 0 1.000000" /> </stylecont...

Using Breakpoints in Venkman - Archive of obsolete content
s to caller", and thrown an exception from the breakpoint script. the log result checkbox tells venkman you want the result of the script to show up in the interactive session view. when used with the continue regardless of result option, the breakpoint can be used as a simple log message. the number of times the breakpoint has been hit is passed in as a parameter to the breakpoint script. to reset the count, enter a 0 in the "trigger count" field. meta comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta comments. meta comments are specially formatted comments that pull in the script named after the comment and specify how to treat the output of that script. the following meta comment types are available: ...

getLastError - Archive of obsolete content
getlasterror returns the most recent nonzero error code. method of install object syntax int getlasterror (); parameters none. returns the most recent nonzero error code. for a list of possible values, see return codes. description use getlasterror method to obtain the most recent nonzero error code since initinstall or reseterror were called. this method allows you to defer checking for error codes each time you call addfile or adddirectory until the last addfile or adddirectory call. the getlasterror method does not return errors from methods that return objects, such as getfolder. example the following example calls getlasterror after a series of addfile calls: addfile("npplug", ...); addfile("/ms/shared/ctl3d.dll", ...); addfile("/nethelp/royalplug/royalhelp.html",...); err = getl...

Methods - Archive of obsolete content
specified property file. logcomment add a comment line to the install log. patch applies a set of differences between two versions. performinstall finalizes the installation of the software. refreshplugins refreshes the list of plug-ins registered for the browser. registerchrome registers chrome with the chrome registry. reseterror resets a saved error code to zero. setpackagefolder sets the default package folder that is saved with the root node. ...

XPInstall API reference - Archive of obsolete content
rectory addfile alert cancelinstall confirm deleteregisteredfile execute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources logcomment patch performinstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compareversion enabled getversion install installchrome startsoftwareupdate installversion properties methods compareto init tostring file no properties methods copy ...

norestorefocus - Archive of obsolete content
...

timeout - Archive of obsolete content
tbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, the timer resets. ...

Building accessible custom components in XUL - Archive of obsolete content
a specific cell. but since the individual cells are not in the tab order, clicking on a spreadsheet cell and tabbing off will move to the spreadsheet's next sibling control, which is what we want. the only remaining issue is that when the spreadsheet regains focus (by pressing shift-tab, or cycling all the way around the tab order and coming back into the spreadsheet), we need to programmatically reset the focus to the previously focused cell. this is handled in the spreadsheet_focus function, which is registered as a handler for the focus event. <code> var gfocuscell = null; function install_handlers() { var spreadsheet = window.document.getelementbyid('accjaxspreadsheet'); spreadsheet.addeventlistener('focus', spreadsheet_focus, true); spreadsheet.addeventlistener('click', spread...

Index - Archive of obsolete content
elp, xul methods, xul reference no summary! 564 removetab xul methods, xul reference no summary! 565 removetabsprogresslistener xul methods, xul reference no summary! 566 removetransientnotifications xul methods, xul reference no summary! 567 replacegroup xul methods, xul reference no summary! 568 reset xul methods, xul reference no summary! 569 rewind xul methods, xul reference no summary! 570 scrollbyindex xul methods, xul reference no summary! 571 scrollbypixels xul methods, xul reference no summary! 572 scrolltoindex xul methods, xul reference no summary! 573 select xul methods, xul r...

List of commands - Archive of obsolete content
also obtained from http://www.mozilla.org/unix/customizing.html ...

Methods - Archive of obsolete content
ubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotification removeprogresslistener removesession removetab removetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumen...

textbox (Toolkit autocomplete) - Archive of obsolete content
tbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, the timer resets. type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number ...

Textbox (XPFE autocomplete) - Archive of obsolete content
tbox starts searching for completions. the default is 50 milliseconds. for search textboxes, the number of milliseconds before the timer fires a command event. the default is 500 milliseconds. for timed textboxes, the number of milliseconds before the timer fires a command event. there is no default. the timer starts after the user types a character. if the user types another character, the timer resets. type type: one of the values below you can set the type attribute to one of the values below for a more specialized type of textbox. don't set the type if you wish to use a regular textbox. autocomplete a textbox that supports autocomplete. for more information about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number ...

Numeric Controls - Archive of obsolete content
gh the values. as with other textboxes, the default value can be specified with the value attribute. naturally, this value should be a number. however, the minimum and maximum values can also be specified using the min and max attributes. if these are set, you can control the range of values that the textbox may be set to. if the user enters a value less or greater than this value, it will be reset to the minimum or maximum value as necessary. for instance, the following numeric textbox has a range between 1 and 20. <textbox type="number" min="1" max="20"/> as the default value isn't specified, it will default to 1, the minimum value. the min attribute is set to 1 to indicate a minimum possible value of 1 and the max attribute is set to 20 to indiciate a maximum possible value of 20. if th...

panel - Archive of obsolete content
e panel will be hidden when the user clicks outside the panel or switches focus to another application. if true, the panel will only be closed when the hidepopup method is called. norestorefocus type: boolean if false, the default value, then when the panel is hidden, the keyboard focus will be restored to whatever had the focus before the panel was opened. if true, the focus will not be reset, although it will be cleared if the focus is within the panel. onpopuphidden type: script code this event is sent to a popup after it has been hidden. this event may also be received while the popup is still open, but when sub-menus contained within this popup are hidden. example: <menupopup id="top" onpopuphidden="console.log('the onpopuphidden method of id=top was called.');"> ...

Mozprofile - Archive of obsolete content
profile /tmp/tmp4q1ieu.mozrunner (mozmill)> ls /tmp/tmp4q1ieu.mozrunner user.js to run mozprofile from the command line enter: mozprofile --help for a list of options. api usage to use mozprofile as an api you can import mozprofile.profile and/or the addonmanager. mozprofile.profile features a generic profile class. in addition, subclasses firefoxprofile and thundebirdprofile are available with preset preferences for those applications. installing addons addons may be installed individually or from a manifest. example: from mozprofile import firefoxprofile # create new profile to pass to mozmill/mozrunner profile = firefoxprofile(addons=["adblock.xpi"]) setting preferences preferences can be set in several ways: using the api: you can pass preferences in to the profile class's constructor:...

Archived Mozilla and build documentation - Archive of obsolete content
an consume various resources: physical memory, cpu time, page file, disk space and even the kernel pool. although for win2003, it should install into winxp fine (win2000 compatibility is unknown). the only downside is you can't specify how much of the resource to use, only which one to consume. also be warned: always remember the -time option, or you may be hitting that physical reset button sooner than you would have liked! structure of an installable bundle xulrunner applications, extensions, and themes all share a common directory structure, and in some cases the same bundle can be used as a standalone xulrunner application as well as an installable application extension. supporting private browsing mode f...

Extentsions FAQ - Archive of obsolete content
n it comes to application shutdown. the sanitize stuff does this (clean stuff on exit). http://lxr.mozilla.org/mozilla1.8/so...ents/nsbrowser... firefox will clean all those preferences which are still "default", that is not changed by the user or the application/extension. to provide those default preferences to your extension see: http://kb.mozillazine.org/dev_:_usin...lt_preferences btw: resetting prefences to default will clear them in case no default prefence is (still) available. those will be completely removed upon next application launch. is it possible to create a sidebar on the top of the page? not unless you make it a separate window. there's a bug in bugzilla about stacking other widgets on top of browser/iframe, which hopefully will be fixed for gecko 1.9. could some...

2006-12-24 - Archive of obsolete content
summary: mozilla.dev.tech.layout november 24 -december 1, 2006 announcements none this week. discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal centering style). but in firefox the document is reset (shifted both horizontally and vertically) to its 0,0 position before being centered horizontally. ...

2006-12- 02 - Archive of obsolete content
summary: mozilla.dev.tech.layout - november 24 2006 - december 2, 2006 announcements none this week. discussions [reset issue for overflow='hidden' in ie and opera there is a very modest horizontal shift of the document due to reflow associated with the removal of the vertical scroll bar (because the document content is using a horizontal centering style). but in firefox the document is reset (shifted both horizontally and vertically) to its 0,0 position before being centered horizontally. ...

Enumerator.moveFirst - Archive of obsolete content
syntax enumobj.movefirst( ) remarks the required enumobj reference is any enumerator object. if there are no items in the collection, the current item is set to undefined. ...

Enumerator - Archive of obsolete content
ivestring += "not ready"; } drivestring += "<br />";; e.movenext(); } document.write(drivestring); // output: <drive information properties the enumerator object has no properties. methods enumerator.atend returns a boolean value indicating if the enumerator is at the end of the collection. enumerator.item returns the current item in the collection. enumerator.movefirst resets the current item in the collection to the first item. enumerator.movenext moves the current item to the next item in the collection. requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, and internet explorer 10 standards. not supported in windows 8.x store a...

WebVR — Virtual Reality for the Web - Game development
ameters, setting the field of view, etc. for example: function setcustomfov(up,right,down,left) { var testfov = new vrfieldofview(up,right,down,left); ghmd.setfieldofview(testfov,testfov,0.01,10000.0); } the gpositionsensor variable holds the positionsensorvrdevice — using this you can get the current position or orientation state (for example to update the scene view on every frame), or reset the sensor. for example, the below code outputs position information on the screen: function setview() { var posstate = gpositionsensor.getstate(); if(posstate.hasposition) { pospara.textcontent = 'position: x' + roundtotwo(posstate.position.x) + " y" + roundtotwo(posstate.position.y) + " z" + roundtotwo(posstate.position.z...

Desktop gamepad controls - Game development
then, if the buttons are available we loop through them; if the pressed property is set to true, then we add them to the buttonspressed array for later processing. next, we'll consider the gamepadbuttonpressedhandler() function: function gamepadbuttonpressedhandler(button) { var press ...

Initialize the framework - Game development
e min.js option as it keeps the source code smaller, and you are unlikely need to go through the source code anyway. save the phaser code inside a /js directory in the same location as your index.html file. update the src value of the first <script> element as shown above. walking through what we have so far at this point we have a charset defined, <title> and some basic css in the header to reset the default margin and padding. we also have a <script> element to apply the phaser source code to the page. the body contains a second <script> element, where we will write the javascript code to render the game and control it. the <canvas> element is generated automatically by the framework. we are initializing it by creating a new phaser.game object and assigning it to the game variable. the ...

2D maze game with device orientation - Game development
ball.body.velocity.y = 0; this.showlevel(); } }, if the current level is equal to the maximum number of levels (in this case 5), then the game is finished — you'll get a congratulations message along with the number of seconds elapsed through the whole game, and a button to press that takes you to the main menu. if the current level is lower than 5, all the neccesary variables are reset and the next level is loaded. ideas for new features this is merely a working demo of a game that could have lots of additional features. we can for example add power-ups to collect along the way that will make our ball roll faster, stop the timer for a few seconds or give the ball special powers to go through obstacles. there’s also room for the traps which will slow the ball down or make it...

Test your skills: The Cascade - Learn web development
y be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. task one in this task, you need to use one of the special values we looked at in the controlling inheritance section to write a declaration in a new rule that will reset the background color back to white, without using an actual color value. in the example below see if you can match the image above. for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like y...

Type, class, and ID selectors - Learn web development
another element and a descendant combinator). in the following example we have used the universal selector to remove the margins on all elements. this means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily. this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below. using the universal selector to make your selectors easier to read one use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. for example, if i wa...

How CSS is structured - Learn web development
in the course, you will encounter many other examples of shorthand properties. mdn's css reference is a good resource for more information about any shorthand property. try using the declarations (above) in your own css exercise to become more familiar with how it works. you can also experiment with different values. warning: one less obvious aspect of using css shorthand is how omitted values reset. a value not specified in css shorthand reverts to its initial value. this means an omission in css shorthand can override previously set values. comments as with any coding work, it is best practice to write comments along with css. this helps you to remember how the code works as you come back later for fixes or enhancement. it also helps others understand the code. css comments begin with ...

HTML forms in legacy browsers - Learn web development
of the type attribute of an <input> element, it will fall back as if the value were text. ...

How to build custom form controls - Learn web development
; box-sizing : border-box; height : 100%; width : 2em; padding-top : .1em; border-left : .2em solid #000; border-radius: 0 .1em .1em 0; background-color : #000; color : #fff; text-align : center; } next, let's style the list of options: .select .optlist { z-index : 2; /* we explicitly said the list of options will always be on top of the down arrow */ /* this will reset the default style of the ul element */ list-style: none; margin : 0; padding: 0; box-sizing : border-box; /* if the values are smaller than the control, the list of options will be as wide as the control itself */ min-width : 100%; /* in case the list is too long, its content will overflow vertically (which will add a vertical scrollbar automatically) but never horizont...

CSS property compatibility table for form controls - Learn web development
earance:none to be able to apply this property to search fields. on windows 7, internet explorer 9 does not apply the border unless background:none is applied. on opera the border-radius property is applied only if an explicit border is set. box-shadow no partial[1] ie9 does not support this property. buttons see the button, submit, and reset input types and the <button> element. property n t note css box model width yes yes height partial[1] yes this property is not applied on webkit based browsers on mac osx or ios. border partial yes margin yes yes padding partial[1] yes this pr...

Test your skills: Styling basics - Learn web development
n, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. styling basics 1 our basic form styling assessment is fairly free-form, and you have a lot of flexibility over what you end up doing here. but your css should aim to fulfill the following requirements: add some kind of lightweight "reset" to make fonts, padding, margin, and sizing more consistent to begin with. on top of that, add in some nice, consistent styling for the inputs and button. use some kind of layout technique to make the inputs and labels line up neatly. download the starting point for this task to work in your own editor or in an online editor. assessment or further help you can practice these examples in t...

UI pseudo-classes - Learn web development
ter of the circle, rather than having it appear to grow from the circle's corner. :default and :indeterminate as mentioned above, the :default pseudo-class matches radios/checkboxes that are checked by default, on page load, even when unchecked. this could be useful for adding an indicator to a list of options to remind the user what the defaults (or starting options) were, in case they want to reset their choices. also mentioned above radios/checkboxes will be matched by the :indeterminate pseudo-class when they are in a state where they are neither checked nor unchecked. but what does this mean? elements that are indeterminate include: <input/radio> inputs, when all radio buttons in a same-named group are unchecked <input/checkbox> inputs whose indeterminate property is set to true via...

Your first form - Learn web development
t complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. this is done by using the <button> element; add the following just above the closing </ul> tag: <li class="button"> <button type="submit">send your message</button> </li> the <button> element also accepts a type attribute — this accepts one of three values: submit, reset, or button. a click on a submit button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element. a click on a reset button resets all the form widgets to their default value immediately. from a ux point of view, this is considered bad practice, so you should avoid using this type of button unless you really have a good reason to include o...

Video and audio content - Learn web development
ent doesn't support the width/height attributes — again, there is no visual component, so there is nothing to assign a width or height to. it also doesn't support the poster attribute — again, no visual component. other than this, <audio> supports all the same features as <video> — review the above sections for more information about them. ...

Drawing graphics - Learn web development
ssible). we are deliberately slowing down the frame rate because we only have six sprites to work with, and if we display one every 60th of a second, our character will move way too fast! inside the outer block we use an if ... else statement to check whether the sprite value is at 5 (the last sprite, given that the sprite numbers run from 0 to 5). if we are showing the last sprite already, we reset sprite back to 0; if not we just increment it by 1. next we need to work out how to change the posx value on each frame — add the following code block just below your last one. if(posx > width/2) { newstartpos = -((width/2) + 102); posx = math.ceil(newstartpos); console.log(posx); } else { posx += 2; } we are using another if ... else statement to see if the v...

Introduction to web APIs - Learn web development
o — the <audio> element will be played from: const audioelement = document.queryselector('audio'); const playbtn = document.queryselector('button'); const volumeslider = document.queryselector('.volume'); const audiosource = audioctx.createmediaelementsource(audioelement); next up we include a couple of event handlers that serve to toggle between play and pause when the button is pressed and reset the display back to the beginning when the song has finished playing: // play/pause audio playbtn.addeventlistener('click', function() { // check if context is in suspended state (autoplay policy) if (audioctx.state === 'suspended') { audioctx.resume(); } // if track is stopped, play it if (this.getattribute('class') === 'paused') { audioelement.play(); ...

Basic math in JavaScript — numbers and operators - Learn web development
operators. change the line that calculates x so the box is 200px wide, but the 200 is calculated using the number 4 and an assignment operator. change the line that calculates y so the box is 200px high, but the 200 is calculated using the numbers 50 and 3, the multiplication operator, and the addition assignment operator. don't worry if you totally mess the code up. you can always press the reset button to get things working again. after you've answered all the above questions correctly, feel free to play with the code some more or create your own challenges. comparison operators sometimes we will want to run true/false tests, then act accordingly depending on the result of that test — to do this we use comparison operators. operator name purpose example ==...

What went wrong? Troubleshooting JavaScript - Learn web development
age for more details about this error. syntax errors round three now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of guesses. at that point, the game fails again, and the same error is spat out that we got at the beginning — "typeerror: resetbutton.addeventlistener is not a function"! however, this time it's listed as coming from line 94. looking at line number 94, it is easy to see that we've made the same mistake here. we again just need to change addeventlistener to .addeventlistener. do this now. a logic error at this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice ...

Working with Svelte stores - Learn web development
the handler from the array. when we call set(), we update the value of the store, and call each handler — passing the new value as a parameter. anyway, usually you don't implement stores from scratch; instead you'd use the writable store to create custom stores with domain-specific logic. in the following example we create a counter store, which will only allow us to add one to the counter or reset its value: import { writable } from 'svelte/store'; function mystore() { const { subscribe, set, update } = writable(0); return { subscribe, addone: () => update(n => n + 1), reset: () => set(0) }; } if our to-do list app gets too complex, we could let our todos store handle every state modification. we could move all the methods that modify the todo array (like addtodo(), re...

Handling common HTML and CSS problems - Learn web development
historically this used to be much more of a problem, but recently, with modern browsers tending to support css more consistently, layout issues tend to be more commonly associated with: lack of (or differences in) support for modern layout features. layouts not looking good in mobile browsers (i.e. responsive design problems). note: historically web developers used to use css files called resets, which removed all the default browser styling applied to html, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout. however, it has more recently been seen as overkill. the best equivalent we have in modern times is normalize.css, a neat bit of cs...

Accessibility/LiveRegionDevGuide
some sort of event filtering logic must be employed. the following is a list of potential filtering techniques: the "event-from-input" object attribute can be used to filter events that were triggered by user action. the ":system" (or lack thereof) can be used to filter events that are system generated. (at-spi only) a global variable can be set in a document:load:complete event listener and reset in a object:state-changed:busy listener. this variable can then be used to quickly determine if an event was triggered by the document being loaded. an event containing an object that does not have state visible is probably from a hidden tab. an event containing an object that has state selectable is not a live region. an event containing an object that has the attribute "container-live" is a ...

Adding a new CSS property
on.) it should generally be grouped with related properties. remember that each style struct contains only properties that inherit by default or only properties that do not. (which set the property is in is given in the specification, which says "inherited: yes" or "inherited: no" in the property's definition.) also note that some of the style structs intentionally contain only properties set/reset by a particular common shorthand property; this improves the effectiveness of some of the performance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct. once you know which struct you're going to use (or that the property is a shorthand), you can add appropriate entry to nscssproplist.h. again, see the docum...

Browser chrome tests
st related stuff here. }); function test() { // add some test related stuff. } when writing tests, design for failure. it is much better to call registercleanupfunction() than doing the cleanup after you have successfully run your tests because the cleanup functions are always called, no matter what. for instance, if you change a preference you want to make sure that the preference is always reset so that it doesn't impact other tests after yours. adding a new browser chrome test to the tree to add a new browser chrome test to the tree, add it to the browser.ini file in the same folder as the test. also remember that the test file's name must begin with "browser_" for the test to be recognized as a browser chrome test. if you are adding the first tests in a directory, make sure to also i...

Command line options
t with the dom inspector, if installed, and inspect the given url (where url is optional). -jsdebugger start application with browser toolbox (formerly browser debugger). that is different to venkman debugger (see option -venkman). -jsconsole start application with the error console, or, in firefox, the browser console. -purgecaches gecko (layout engine) has a javascript cache, which is not reset on startup, this clears it. -start-debugger-server port firefox only. start the debugger server on port. this will enable another instance of firefox to connect the firefox developer tools to this firefox instance. see the article on remotely debugging firefox desktop. the port argument is optional, and if it is omitted, the server will listen on port 6000. -venkman start with the javascript...

Error codes returned by Mozilla APIs
10) ns_error_no_content (0x804b0011) returned from nsichannel.asyncopen() to indicate that ondataavailable will not be called because there is no content available. this is used by helper app style protocols (for example, mailto). ns_error_unknown_protocol (0x804b0012) the uri scheme corresponds to an unknown protocol handler. ...

Firefox and the "about" protocol
the array maps most of the urls, like config to urls in the chrome: pseudo protocol, such as chrome://global/content/config.xul. the about location information is duplicated in docshell/build/nsdocshellmodule.cpp. note: you must access about: protocol pages by typing them into the address bar. att...

mozbrowsererror
s an anonymous javascript object with the following properties: type a domstring representing the type of error that occurred. ...

IME handling guide
nge event dispatched by widget. however, if the last composition string is only an ideographic space, it shouldn't be committed. see the previous case note that this case doesn't work as expected when composition is in a remote process in e10s mode. the composition is not committed on linux, there is no api to request commit or canceling composition forcibly. instead, gecko uses gtk_im_context_reset() api for this purpose because most ime cancel composition with it. but there are some imes which do nothing when gecko calls it. if this occurs, gecko should restart composition with a dom compositionstart event , a dom compositionupdate event and a dom text event at caret position. this issue hasn't been supported yet. ime state management ime is a text input system. it means that except ...

Introduction to Layout in Mozilla
olves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs. ...

DeferredTask.jsm
quested. the "arm" method can be used to start the internal timer that will result in the eventual execution of the task. multiple attempts to arm the timer don't introduce further delays: savedeferredtask.arm(); // the task will be executed in 2 seconds from now. yield waitonesecond(); savedeferredtask.arm(); // the task will be executed in 1 second from now. the timer can be disarmed to reset the delay, or just to cancel execution: savedeferredtask.disarm(); savedeferredtask.arm(); // the task will be executed in 2 seconds from now. when the internal timer fires and the execution of the task starts, the task cannot be canceled anymore. it is, however, possible to arm the timer again during the execution of the task, in which case the task will need to finish before the timer is st...

WebChannel.jsm
sters the channel itself with the webchannelbroker. parameters callback callback function containing function(id, message, sendercontext) parameters. id - webchannel id of the incoming messages message - incoming message object sendercontext - incoming message context - this should be treated as an opaque object and passed to the .send() method stoplistening() resets the callback for messages on this channel. removes the channel from the webchannelbroker. parameters none send() sends messages over the webchannel id using the "webchannelmessagetocontent" event. parameters message the message object that will be sent sendercontext the sendercontext parameter passed to the .listen method. examples setting up a webchannel between ...

openLocationLastURL.jsm
rivate browsing mode for you. the value preserved across accesses is not preserved when the user exits private browsing mode. using the openlocationlasturl object to get or set the value of the open location edit box, simply read the value of, or set the value of, the openlocationlasturl.value field: var url = openlocationlasturl.value; openlocationlasturl.value = "http://www.mozilla.org/"; to reset the value of the edit box to the default (which is an empty string), you can call the reset() method: method overview reset() methods reset the reset() method resets the saved url to the default, which is an empty string. reset(); parameters none. ...

L10n Checks
compare two files. you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names will be shown in a hierarchic...

Fonts for Mozilla 2.0's MathML engine
even without stix fonts. the font contains the necessary glyphs for stretchy operators but mozilla does not yet make use of all of these. the license allows you to "use this font as permitted by the eula for the product in which this font is included to display and print content", so consulting your lawyer is recommended if considering installing this on systems without the associated product. reset old preferences if users have previously changed the "font.mathfont-family" preference for a previous version of mozilla, then it is best to reset this to the default value. to do this, enter the url "about:config", "filter" for "mathfont", and "reset" to the default value through the context menu on the preference. mathml font selection with css you can get these fonts from the mathml-fonts add-...

Mozilla Quirks Mode Behavior
e a border style of inset or outset, the border color is based on the background color of the table or of the nearest ancestor with non-transparent background. [this may have been an accurate description when written in june 2001, but it no longer appears correct. i don't follow the code in nscssrenderingborders well enough to tell, though.] in quirks mode a fixed width specified on a table cell resets the nowrap attribute. if the nowrap attribute is present the cell width will never be smaller than the specified fixed width (bug 277232). in quirks mode, tables with no rows/rowgroups have zero height even when a height is specified (bug 241161). something about the overhanging border (i.e., the half of the border that's outside the border-box) in border-collapse tables differs between quirks...

JS::PerfMeasurement
tart() call this on a perfmeasurement instance to start timing. void stop() and call this to stop timing again. the counter variables do not update in real time; they only change when stop is called. counter values are accumulated across many start/stop cycles, and you can modify their values if you want; stop simply adds counts read back from the os to whatever is already in each counter. void reset() resets all enabled counters to zero. uint64 cpu_cycles, uint64 instructions, etc. each potentially-measurable event corresponds to a regular old instance variable, which you can read and even modify. all presently-measurable events are measured with counters, not timers; that is, there is no defined relation between the numbers you get from this interface, and wall-clock time. perfmeasurement*...

Measuring performance using the PerfMeasurement.jsm code module
er start/stop cycles (that is, it doesn't automatically zero the counters each time you start recording). when you're done benchmarking, you can read out each of the counters you asked for as properties: let report = "cpu cycles: " + monitor.cpu_cycles + "\n" + "cache refs: " + monitor.cache_references + "\n" + "cache misses: " + monitor.cache_misses + "\n"; monitor.reset(); alert(report); the reset() method clears all of the enabled counters, as you might expect. when you're done with your measurements, just let the monitor object go out of scope. ...

Memory Profiler
struction. it can be obtained by installing the memory profiler add-on. you may need to set the "xpinstall.signatures.required" pref to false in order to install it, since the xpi is not yet signed. using the add-on open the devtools panel or webide. select the memoryprofiler tab. to take a profile you can use the buttons in the profiler panel. start - start profiling stop - stop profiling reset - clear profile data when profiler is stopped profile data is accumulated and resumed after start. use reset to start a new recording. understanding the profiles traditional memory analysis tools look at the data. they build the referring-to, namely retaining graphs. this is helpful in exploring the relationships among objects and identifying memory leaks. however, the information exposed...

tools/power/rapl
sier to understand. invocation first, do a standard build of firefox. mac on mac, rapl can be run as follows. $objdir/dist/bin/rapl linux on linux, rapl can be run as root, as follows. sudo $objdir/dist/bin/rapl alternatively, it can be run without root privileges by setting the contents of /proc/sys/kernel/perf_event_paranoid to 0. note that if you do change this file, its contents may reset when the machine is next rebooted. you must be running linux kernel version 3.14 or later for rapl to work. otherwise, it will fail with an error message explaining this requirement. windows unfortunately, rapl does not work on windows, and porting it would be difficult because windows does not have apis that allow easy access to the relevant model-specific registers. output the following is...

A brief guide to Mozilla preferences
ences in two ways: the administrator may add an all-companyname.js preference file (install_directory/browser/defaults/preferences/all-companyname.js). this will be parsed last during the preference loading process. the administrator may alternatively put a user.js file in app_dir/defaults/profile/ ; this will put a copy of the user.js in all new profiles. this method has the advantage of resetting preferences back to administrator defaults at every start-up. note that, because a user typically has access privilege to his or her profile directory, he or she can change the default values if he or she knows how. another disadvantage is that existing profiles will not be affected. this method is considered user-hostile. any use of this technique by software such as firefox extension to ove...

Profile Manager
path and last-modified date. rename - allows you to specify a new name for the profile. version - allows you change the default application version to be used with the profile. future enhancements ability to install/uninstall/enable/disable extensions in profiles. ability to copy certain assets (e.g., bookmarks) between profiles. add 'profile size' to the properties dialog. ability to reset a profile (return it to a default state excluding bookmarks and passwords). add option to specify the location of profiles.ini. ...

Interval Timing
common in nspr functions such as those used for i/o operations and operations on condition variables. nspr 2.0 provides interval times that are efficient in terms of performance and storage requirements. conceptually, they are based on free-running counters that increment at a fixed rate without possibility of outside influence (as might be observed if one was using a time-of-day clock that gets reset due to some administrative action). the counters have no fixed epoch and have a finite period. to make use of these counters, the application must declare a point in time, the epoch, and an amount of time elapsed since that epoch, the interval. in almost all cases the epoch is defined as the value of the interval timer at the time it was sampled. printervaltime interval functions interval t...

NSPR Error Handling
rform the operation requested. pr_operation_not_supported_erro the requested operation is not supported by the platform. pr_protocol_not_supported_error the host operating system does not support the protocol requested. pr_remote_file_error access to the remote file has been severed. pr_buffer_overflow_error the value retrieved is too large to be stored in the buffer provided. pr_connect_reset_error the (tcp) connection has been reset by the peer. pr_range_error unused. pr_deadlock_error performing the requested operation would have caused a deadlock. the deadlock was avoided. pr_file_is_locked_error an attempt to acquire a lock on a file has failed because the file is already locked. pr_file_too_big_error completing the write or seek operation would have resulted in a file la...

PR_Now
ime. syntax #include <prtime.h> prtime pr_now(void); parameters none. returns the current time as a prtime value. description pr_now() returns the current time as number of microseconds since the nspr epoch, which is midnight (00:00:00) 1 january 1970 utc. you cannot assume that the values returned by pr_now() are monotonically increasing because the system clock of the computer may be reset. to obtain monotonically increasing time stamps suitable for measuring elapsed time, use pr_intervalnow(). ...

Process Management and Interprocess Communication
stants the types defined for process management are: prprocess prprocessattr process management functions the process manipulation function fall into these categories: setting the attributes of a new process creating and managing processes setting the attributes of a new process the functions that create and manipulate attribute sets of new processes are: pr_newprocessattr pr_resetprocessattr pr_destroyprocessattr pr_processattrsetstdioredirect pr_processattrsetcurrentdirectory pr_processattrsetinheritablefd creating and managing processes the functions that create and manage processes are: pr_createprocess pr_detachprocess pr_waitprocess pr_killprocess ...

Cryptography functions
gs mxr 3.6 and later pk11_pubunwrapsymkeywithflagsperm mxr 3.9 and later pk11_pubwrapsymkey mxr 3.2 and later pk11_randomupdate mxr 3.2 and later pk11_readrawattribute mxr 3.9.2 and later pk11_referencesymkey mxr 3.2 and later pk11_resettoken mxr 3.4 and later pk11_restorecontext mxr 3.2 and later pk11_savecontext mxr 3.2 and later pk11_savecontextalloc mxr 3.6 and later pk11_setfortezzahack mxr 3.2 and later pk11_setpasswordfunc mxr 3.2 and later pk11_setprivateke...

NSS 3.12.4 release notes
esn't have valid functions prototypes bug 492131: a failure to import a cert from a p12 file leaves error code set to zero bug 492385: crash freeing named crl entry on shutdown bug 493135: bltest crashes if it can't open the input file bug 493364: can't build with --disable-dbm option when not cross-compiling bug 493693: sse2 instructions for bignum are not implemented on os/2 bug 493912: sqlite3_reset should be invoked in sdb_findobjectsinit when error occurs bug 494073: update rsa/dsa powerupself tests to be compliant for 2011 bug 494087: passing null as the value of cert_pi_trustanchors causes a crash in cert_pkixsetparam bug 494107: during nss_nodb_init(), softoken tries but fails to load libsqlite3.so crash [@ @0x0 ] bug 495097: sdb_mapsqlerror returns signed int bug 495103: nss_initreadwr...

NSS_3.12_release_notes.html
[[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome://pippki/content/resetpassword.xul in url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 403910: cert_findusercertbyusage() returns wrong certificate if multiple certs with same subject available bug 404919: memory leak in sftkdb_readsecmoddb() (sftkmod.c) bug 406120: allow application to specify ocsp timeout bug 361025: support for camellia cipher suites to tls rfc4132 bug 376417:...

NSS 3.15.1 release notes
traints on the common name in libpkix when no subjectaltname is present. bug 875156 - add const to the function arguments of sec_certnicknameconflict. bug 877798 - fix ssltap to print the certificate_status handshake message correctly. bug 882829 - on windows, nss initialization fails if nss cannot call the rtlgenrandom function. bug 875601 - secmod_closeuserdb/secmod_openuserdb fails to reset the token delay, leading to spurious failures. bug 884072 - fix a typo in the header include guard macro of secmod.h. bug 876352 - certutil now warns if importing a pem file that contains a private key. bug 565296 - fix the bug that shlibsign exited with status 0 even though it failed. the nss_survive_double_bypass_failure build option is removed. bugs fixed in nss 3.15.1 https://bugz...

NSS 3.28.1 release notes
cn = symantec class 2 public primary certification authority - g6 sha-256 fingerprint: cb:62:7d:18:b5:8a:d5:6d:de:33:1a:30:45:6b:c6:5c:60:1a:4e:9b:18:de:dc:ea:08:e7:da:aa:07:81:5f:f0 the version number of the updated root ca list has been set to 2.11 a misleading assertion/alert has been removed, when nss tries to flush data to the peer but the connection was already reset. bugs fixed in nss 3.28.1 bug 1296697 - december 2016 batch of root ca changes bug 1322496 - internal error assert when the other side closes connection before reading eoed compatibility nss 3.28.1 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.28.1 shared libraries without recompili...

NSS 3.46 release notes
ault maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...

NSS 3.54 release notes
6 - fix undefined reference to `port_zalloc_stub' in seed.c. bug 1642153 - fix infinite recursion building nss. bug 1642638 - fix fuzzing assertion crash. bug 1642871 - enable ssl_sendsessionticket after resumption. bug 1643123 - support ssl_exportearlykeyingmaterial with external psks. bug 1643557 - fix numerous compile warnings in nss. bug 1644774 - ssl gtests to use clearservercache when resetting self-encrypt keys. bug 1645479 - don't use secitem_makeitem in secutil.c. bug 1646520 - stricter enforcement of asn.1 integer encoding. this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.54 compatibility nss 3.54 shared libraries are backward...

FC_InitPIN
read/write, that is, the session must be in the "r/w so functions" state (cks_rw_so_functions). the role of the pkcs #11 so is to initialize a token and to initialize the normal user's pin. in the nss cryptographic module, one uses the empty string password ("") to log in as the pkcs #11 so. the module only allows the pkcs #11 so to log in if the normal user's pin has not yet been set or has been reset. return value fc_initpin() returns the following return codes. ckr_ok: normal user's pin initialization succeeded. ckr_session_handle_invalid: the session handle is invalid. ckr_user_not_logged_in: the session is not in the "r/w so functions" state. ckr_pin_invalid: the pin has an invalid utf-8 character. ckr_pin_len_range: the pin is too short, too long, or too weak (doesn't have enough...

OLD SSL Reference
ssl_getsessionid ssl_setsockpeerid ssl functions used by callbacks ssl_peercertificate ssl_revealurl ssl_revealpinarg ssl handshake functions ssl_forcehandshake ssl_rehandshake ssl_resethandshake nss shutdown function nss_shutdown deprecated functions ssl_enabledefault ssl_enable ssl_enablecipher ssl_setpolicy ssl_redohandshake chapter 5 certificate functions this chapter describes th...

sslintro.html
note that this step would not be necessary if the socket weren't already connected. for an ssl socket that is configured before it is connected, ssl figures this out when the application calls pr_connect or pr_accept. if the socket is already connected before ssl gets involved, you must provide this extra hint. ...

SSL functions
ssl_optionset mxr 3.2 and later ssl_optionsetdefault mxr 3.2 and later ssl_peercertificate mxr 3.2 and later ssl_preencryptedfiletostream mxr 3.2 and later ssl_preencryptedstreamtofile mxr 3.2 and later ssl_rehandshake mxr 3.2 and later ssl_rehandshakewithtimeout mxr 3.11.4 and later ssl_resethandshake mxr 3.2 and later ssl_restarthandshakeaftercertreq mxr 3.2 and later ssl_restarthandshakeafterservercert mxr 3.2 and later ssl_revealcert mxr 3.2 and later ssl_revealpinarg mxr 3.2 and later ssl_revealurl mxr 3.2 and later ssl_securitystatus mxr 3.2 and later ssl_setmaxservercachelock...

Index
ect with js_newobject, but if you do not set a prototype at that time, you can later call js_setprototype to do so. 475 js_setregexpinput jsapi reference, reference, référence(2), spidermonkey js_setregexpinput sets the pending input string of the built-in regexp object to the specified input string. the jsreg_multiline is set to multiline parameter, and other flags are all reset. 476 js_setscriptstackquota jsapi reference, obsolete, spidermonkey set the quota on the number of bytes that stack-like data structures can use when the runtime compiles and executes scripts. these structures also consume heap space, so js_setthreadstacklimit does not bound their size. the default quota is 32mb which is quite generous. 477 js_setthreadstacklimit ...

JS::PersistentRooted
e member of js::persistentrooted<t>, typed with t. method description void init(jscontext* cx) initialize with optional initial value (if not provided, it will be initialized with the initial value of the type). added in spidermonkey 38 void init(jscontext* cx, t initial) void init(jsruntime* rt) void init(jsruntime* rt, t initial) void reset() reset the value to initial value of the type. added in spidermonkey 38 t& get() returns ptr. const t& get() const operator const t&() const const t& operator->() const t* address() returns a pointer to ptr. const t* address() const persistentrooted<t>& operator=(const t& p) sets the value of ptr. persistentroote...

JS_ClearDateCaches
runtime information. ...

JS_ScheduleGC
he associated jsruntime is set. frequency uint32_t the value of nextscheduled parameter of gc. description js_schedulegc sets the nextscheduled parameter of gc. at every allocation nextscheduled is decremented. when it reaches zero, we do either a full or a compartmental gc. at this point, if zeal is one of the types that trigger periodic collection, then nextscheduled is reset to the value of frequency. otherwise, no additional gcs take place. see also mxr id search for js_schedulegc js_setgczeal bug 650978 ...

JS_SetRegExpInput
obj js::handleobject a pointer to a global object. input js::handlestring a pointer to the input string. multiline bool true if input is multiline. description js_setregexpinput sets the pending input string of the built-in regexp object to the specified input string. the jsreg_multiline is set to multiline parameter, and other flags are all reset. on successful, js_setregexpinput returns true, otherwise returns false. see also mxr id search for js_setregexpinput js_newregexpobject js_newucregexpobject jsreg_multiline js_clearregexpstatics regexp ...

JSAPI reference
monkey 31 js::identifystandardinstanceorprototype added in spidermonkey 31 js::identifystandardconstructor added in spidermonkey 38 date js_newdateobject added in spidermonkey 1.8.5 js_newdateobjectmsec added in spidermonkey 1.8.5 js_objectisdate added in spidermonkey 1.8.5 js_cleardatecaches added in spidermonkey 17 js_now intl api js_setdefaultlocale added in spidermonkey 24 js_resetdefaultlocale added in spidermonkey 24 properties these functions correspond directly to the ways scripts access object properties: js_getproperty js_getucproperty js_getpropertybyid added in spidermonkey 1.8.1 js_setproperty js_setucproperty js_setpropertybyid added in spidermonkey 1.8.1 js_hasproperty js_hasucproperty js_haspropertybyid added in spidermonkey 1.8.1 js_hasownpropert...

SpiderMonkey 45
stack (bug 1160307) js::getsavedframesource (bug 1216819) js::getsavedframeline (bug 1216819) js::getsavedframecolumn (bug 1216819) js::getsavedframefunctiondisplayname (bug 1216819) js::getsavedframeasynccause (bug 1216819) js::getsavedframeasyncparent (bug 1216819) js::getsavedframeparent (bug 1216819) js::buildstackstring (bug 1133191) js::flushperformancemonitoring (bug 1181175) js::resetperformancemonitoring (bug 1181175) js::disposeperformancemonitoring (bug 1208747) js::setstopwatchismonitoringcpow (bug 1156264) js::getstopwatchismonitoringcpow (bug 1156264) js::setstopwatchismonitoringjank (bug 1156264) js::getstopwatchismonitoringjank (bug 1156264) js::isstopwatchactive (bug 674779) js::getperfmonitoringtestcpurescheduling (bug 1181175) js::addcpowperformancedelta (bu...

TPS Tests
t list has a number of built-in functions you can call, described in the section on asset lists; there are also some additional built-in functions. built-in functions sync(options) initiates a sync operation. if no options are passed, a default sync operation is performed. otherwise, a special sync can be performed if one of the following are passed: sync_wipe_server, sync_wipe_client, sync_reset_client. this will cause tps to set the firstsync pref to the relevant value before syncing, so that the described actionwill take place logger.loginfo(msg) logs the given message to the tps log. logger.asserttrue(condition, msg) asserts that condition is true, otherwise an exception is thrown and the test fails. logger.assertequal(val1, val2, msg) asserts that val1 is equal to val2, otherwi...

compare-locales
. options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff format. ab-cd browser chrome/browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name. the file names will be shown in a hierarchi...

Places Developer Guide
ces.id = moz_historyvisits.place_id; ]]></cdata>.tostring(); var sql_stmt = getplacesdbconn.createstatement(sql); sql_stmt.params.visit_id = visit_id; var from_visit; try { // here we can't use the "executeasync" method since have to return a // result right-away. while (sql_stmt.executestep()) { from_visit = sql_stmt.row.from_visit; } } finally { sql_stmt.reset(); } return from_visit; } note: the <cdata><![cdata[ xxx ]]></cdata>.tostring() notation is e4x and it makes possible to write multi-line strings in javascript. this is very useful when writing long sql statements. searching history queries are executed through the history service. the example below shows how to search through browser history, and to iterate over the results. var history ...

extIExtension
attribute extievents the events object for the extension. supports: "uninstall" methods fixme: see also see extapplication.js line:395 for the implementation of firstrun. a preference "install-event-fired" under your extensions preferences branch (e.g. extensions.your_extension_id.install-event-fired) will be set to false after your extension has been installed. you may need to reset this preference in about:config during testing. also, see the fuel (firefox), steel (thunderbird) and smile (seamonkey) pages. ...

Accessing the Windows Registry Using XPCOM
key has changed since you last checked it, you can use the startwatching(), stopwatching(), and haschanged() methods. you must call startwatching() for the key to be monitored. the method takes one parameter, a boolean indicating whether child keys should be watched. after that, you can call haschanged() to determine whether or not you need to reread the value. calling haschanged() automatically resets the watch, so you can be sure that if it returns true there are changes. this example demonstrates a trivial registry value cache for one key: var cache = {}; function readregistryvaluenocache(wrk, value) { switch (wrk.getvaluetype(value)) { case wrk.type_string: return wrk.readstringvalue(value); case wrk.type_binary: return wrk.readbinaryvalue(value); case wrk.type_...

Building the WebLock UI
quiring that one or another of the elements be selected, but not both. the xul that defines the radiogroup in the web lock manager dialog is this: <radiogroup> <radio label="lock"/> <radio label="unlock" selected="true"/> </radiogroup> since the weblock component always starts up in the unlocked position, you can add the selected="true" attribute and value on the unlock radio button and reset it dynamically as the user takes action. site adding ui the next step is to create that part of the user interface that lets you add a new site to the white list. there are other, more sophisticated ways to do this; you may also want to include some ui that lets you view the white list or edit it as a list. in this part of the tutorial, however, we only provide the means of adding an url provid...

Starting WebLock
ng interface. the first method returns a boolean if there are more elements in the set. internally, the object knows the number of elements it has in its enumeration, and every time a client calls getnext, it decrements a counter - or adjusts a pointer to the next element. when the counter goes to zero or the pointer points to a non-element, hasmoreelements will return false. there is no way to reset an nsisimpleenumerator. for example, you can't re-enumerate the set. if you need random access to the elements in a nsisimpleenumerator, you can read them from the nsisimpleenumerator, store them in an array, and access them there. the getnext method returns a nsisupports interface pointer. when you want to pass primitive data types like numbers, strings, characters, void *, and others, the solu...

nsAutoRef
utoptr and nsrefptr but does not require that the handle is a pointer to an object that was created with new or has addref() and release() methods. nsautoref is therefore useful for managing a reference to a foreign object. no copy constructor nor copy assignment operators are available, so the handle to the resource will be held until released on destruction of the nsautoref or until explicitly reset() or transferred through provided methods. in order to use nsautoref<t> for a class t associated with a particular resource type, the type of the handle to the resource and the method for releasing the resource must be provided for class t. this is usually done by providing a specialization of nsautoreftraits<t>. nsautoref is defined in xpcom/base/nsautoref.h. see also nsautoreftraits, nscounted...

mozIStorageAggregateFunction
this._numbers = []; return math.sqrt(total / ilength); } }; // now, register our function with the database connection. dbconn.createaggregatefunction("stddev", 1, standarddeviationfunc); // run some query that uses the function. let stmt = dbconn.createstatement("select stddev(value) from some_table"); try { while (stmt.executestep()) { // handle the results } } finally { stmt.reset(); } c++ // first, create our class that will represent our function. class standarddeviationfunc : public mozistorageaggregatefunction { public: ns_imethod onstep(mozistoragevaluearray *aarguments) { print32 value; nsresult rv = aarguments->getint32(&value); ns_ensure_success(rv, rv); mnumbers.appendelement(value); } ns_imethod onfinal(nsivariant **_result) { p...

mozIStorageConnection
: "foo integer, bar string". exceptions thrown ns_error_failure table already exists or the requested table couldn't be created. executeasync() asynchronously executes an array of queries created with this connection, using any currently bound parameters. the statements are run wrapped in a transaction. note: the statements may be reused immediately, and the statements do not need to be reset individually. mozistoragependingstatement executeasync( [array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, in mozistoragestatementcallback acallback optional ); parameters astatements the array of statements to execute asynchronously. they will be executed sequentially, in the order in which they appear in the array. prior to ge...

mozIStorageVacuumParticipant
e in the range 512 to 65,536. the recommended value is mozistorageconnection::default_page_size. note: if the database is using the wal journal node and the current page size is not the expected one, the journal node will be changed to truncate because wal doesn't allow page size changes. the vacuum manager will try to restore wal mode, but this will only work reliably if the participant properly resets statements. if the attempt to restore the journal node fails, it will remain truncate. methods onbeginvacuum() called when a vacuum operation begins. once you receive this notification, you should avoid using the database until onendvacuum() is called. boolean onbeginvacuum(); parameters none. return value return true to allow the vacuum operation to proceed, or false if you don't want the ...

nsIContentView
64-bit unsigned integer. read only. scrollx float horizontal scroll offset in chrome-document css pixels. when this view is active (that is it is being painted because it's in the visible region of the screen), this value is at first lined up with the content's scroll offset. note: when this view becomes inactive, the new content view will have scroll values that are reset to the default. read only. scrolly float horizontal scroll offset in chrome-document css pixels. read only. viewportheight float height of the viewport in chrome-document css pixels. read only. viewportwidth float width of the viewport in chrome-document css pixels. read only. methods scrollby() scrolls the content view by the specifi...

nsICryptoHash
sage-digest algorithm 5 sha1 3 secure hash algorithm 1 sha256 4 secure hash algorithm 256 sha384 5 secure hash algorithm 384 sha512 6 secure hash algorithm 512 methods finish() completes the hash object and produces the actual hash data. note: this method may be called any time after " .. manch("init") .. " is called. this call resets the object. acstring finish( in prbool aascii ); parameters aascii if true then the returned value is a base-64 encoded string. if false, then the returned value is binary data. return value this method returns a hash of the data that was read by this object. this can be either binary data or a base-64 encoded string. exceptions thrown ns_error_not_initialized indicates that ini...

nsIDNSRecord
eturns the value of the next ip address as a string and increments the internal address iterator. acstring getnextaddrasstring(); parameters none. return value the value of the next ip address as a string. hasmore() this method checks if there is another address in the record. boolean hasmore(); parameters none. return value true if there is another address in the record. rewind() this function resets the internal address iterator to the first address in the record. void rewind(); parameters none. ...

nsIDOMEvent
0000010 mousedrag 0x00000020 click 0x00000040 dblclick 0x00000080 keydown 0x00000100 keyup 0x00000200 keypress 0x00000400 dragdrop 0x00000800 focus 0x00001000 blur 0x00002000 select 0x00004000 change 0x00008000 reset 0x00010000 submit 0x00020000 scroll 0x00040000 load 0x00080000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00800000 locate 0x01000000 move 0x02000000 resize 0x04000000 forward 0x08000000 ...

nsIDOMNSHTMLDocument
or compatibility with netscape 4.x read only. vlinkcolor domstring same as body.vlink width long the width of the body element. read only. obsolete since gecko 6.0 methods captureevents() provided for compatibility with netscape 4.x, but does not actually do anything. void captureevents( in long eventflags ); parameters eventflags clear() used to reset a document to blank, but deprecated since gecko 1.0 and provided for compatibility with netscape 4.x; use open() and close() instead. void clear(); parameters none. execcommand() boolean execcommand( in domstring commandid, in boolean doshowui, in domstring value ); parameters commandid the name of the command to execute. see rich-text editing in mozilla for a list of supported c...

nsIDocShell
eded properties on it and then pass it to loaduri. aloadflags flags to modify load behaviour. flags are defined in nsiwebnavigation. note that using flags outside load_flags_mask is only allowed if passing in a non-null loadinfo. and even some of those might not be allowed. use at your own risk. firstparty true if this is the master top-level document. preparefornewcontentmodel() reset state to a new content model within the current document and the document viewer. called by the document before initiating an out of band document.write(). void preparefornewcontentmodel(); parameters none. resumerefreshuris() restart the xpcom timers for each meta-refresh uri in this docshell, and this docshell's children, recursively. if the timers are already running, this has no effect. void...

nsIEditor
asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); selected content removal void deleteselection(in short action, in short stripwrappers); document info and file methods void resetmodificationcount(); long getmodificationcount(); void incrementmodificationcount(in long amodcount); void incrementmodificationcount(in long amodcount); transaction methods void dotransaction(in nsitransaction txn); void enableundo(in boolean enable); void undo(in unsigned long count); void canundo(out boolean isenabled, out ...

nsIHttpServer
enerate this string from trusted data risk security vulnerabilities. */ void registercontenttype(in string extension, in string type); /** * sets the handler used to display the contents of a directory if * the directory contains no index page. * * @param handler * an object which will handle any requests for directories which * do not contain index pages, or null to reset to the default * index handler; if while the server is running the handler * throws an exception while responding to a request, an http 500 * response will be returned. an nsifile corresponding to the * directory is available from the metadata object passed to the * handler, under the key "directory". */ void setindexhandler(in nsihttprequesthandler handler); /**...

nsISHEntry
ntifier(); parameters none. seturi() uri for the document. void seturi( in nsiuri auri ); parameters auri native code only!setviewerbounds void setviewerbounds( in nsintrect bounds ); parameters bounds syncpresentationstate() ensure that the cached presentation members are self-consistent. if either contentviewer or windowstate are null, then all of the following members are cleared/reset: contentviewer, sticky, windowstate, viewerbounds, childshells, refreshurilist. void syncpresentationstate(); parameters none. example see nssessionstore.js for a real example. ...

nsIScriptableIO
specified, writing to a transport such as a socket doesn't return until all data has been written. this may cause a delay if the socket's underlying buffer is full. if you don't specify this mode, an exception is thrown if the buffer is full. nocreate: if the file doesn't already exist, don't create a new file. notruncate: if the file already exists, overwrite the existing content instead of resetting the file size to 0 bytes. syncsave: writing methods do not return until the data is properly saved. acharset the character set to use for interpreting the text data being written. used only in conjunction with the text input mode. by default, streams are interpreted in utf-8. areplacechar the character used to replace unknown characters in the output stream. ...

nsISelectionImageService
layout/base/nsiselectionimageservice.idlnot scriptable please add a summary to this article. inherits from: nsisupports last changed in gecko 1.7 method overview void getimage(in short selectionvalue, out imgicontainer container); void reset(); methods getimage() retrieve the image for alpha blending. void getimage( in short selectionvalue, out imgicontainer container ); parameters selectionvalue container reset() the current image is marked as invalid. void reset(); parameters none. ...

nsIWebProgressListener
tification. arequest the associated nsirequest. this may be null in some cases. alocation the uri of the location that is being loaded. aflags this is a value which explains the situation or the reason why the location has changed. optional from gecko 11 onprogresschange() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange() being called with astateflags including the state_stop and state_is_window flags). note: if any progress value is unknown, or if its value would exceed the maximum value of type long, then its value is replaced with -1. note: if the object also implements nsiwebprogresslistener2 and the caller knows about that ...

nsIWebProgressListener2
in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsiwebprogress awebprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with awebprogress. progress totals are reset to zero when all requests in awebprogress complete (corresponding to onstatechange being called with astateflags including the state_stop and state_is_window flags). this function is identical to nsiwebprogresslistener.onprogresschange(), except that this function supports 64-bit values. note: if any progress value is unknown, then its value is replaced with -1. void onprogresschange64( in nsiw...

Debugger keyboard shortcuts - Firefox Developer Tools
ows and linux or cmd + opt + s on macos would open/close the debugger. ...

UI Tour - Firefox Developer Tools
current line of javascript code. step out (shift-f11): runs the script until the current function exits. a button that deactivates all breakpoints. a settings menu that contains: disable javascript: disables javascript for this tab. this option enables you to see how your web page looks if the user has disabled javascript via an extension or a configuration setting. the setting is reset when the developer tools are closed (except in firefox 77, see bug 1640318). inline variable preview: enabled by default, this option displays variable values within the source pane when the debugger is paused. source maps: enabled by default, this option directs the debugger to load the original versions of files, and map them to the generated ones loaded in a page, to ease debugging of tr...

Debugger.Memory - Firefox Developer Tools
the timestamp values are timestamps of the gc slice’s start and end events. reason a very short string describing the reason why the collection was triggered. ...

DevTools API - Firefox Developer Tools
return value: a promise that is fulfilled once the new host is ready. reloadtarget(force) reloads the current target of the toolbox. parameters: force {boolean} - if true the target is shift-reloaded i.e. the cache is bypassed during the reload. zoomin() increases the zoom level of the toolbox document. zoomout() decreases the zoom level of the toolbox document. zoomreset() resets the zoom level of the toolbox document. setzoom(value) set the zoom level to an arbitrary value. parameters: value {number} - the zoom level such as 1.2. destroy() closes the toolbox. return value: a promise that is resolved once the toolbox is destroyed. events the toolbox object emits following events via the eventemitter interface. host-changed the ho...

All keyboard shortcuts - Firefox Developer Tools
md + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 source editor this table lists the default shortcuts for the source editor. in the editor preferences section of the developer tools settings, you can choose to use vim, emacs, or sublime text key bindings instead. to select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs", or "sublime" to th...

Examine and edit CSS - Firefox Developer Tools
ements values by 100. track changes when you are editing the rules in the rules view, you can see the changes you have made in the changes pane. note: you can view changes made to the rules view only. if you edit the css using the style editor, the changes will not be shown in the changes pane. also remember, as noted above, that changes you make to the css rules are temporary and will be reset if you reload the page. if you are satisfied with the changes you have made, you can copy the new settings to page the edited rule into your stylesheet. right-click on the changes panel and select copy rule from the context menu. the copy rule command copies the entire element, class, or id definition, including any unchanged rules and the rules that describe your changes. for example, copyi...

Examine and edit HTML - Firefox Developer Tools
only-demo/index.html. shadow roots any shadow roots present in the dom are exposed in the html page in the same manner as the regular dom. the shadow root is signified by a node named #shadow-root — you can click its expansion arrow to see the full contents of the shadow dom, and then manipulate the contained nodes in a similar way to other part of the page's dom (although with a limited featureset — you can't, for example, drag and drop or delete shadow dom nodes). if a shadow dom contains a "slotted" element (an element with a slot attribute after it has been inserted inside a <slot> element — see adding flexibility with slots for an explanation of how these are used), the "slotted" element will be shown inside its corresponding <slot> element, with a "reveal" link alongside it. cl...

Work with animations - Firefox Developer Tools
one way to specify the timing function is with a cubic bézier curve. ...

Page inspector keyboard shortcuts - Firefox Developer Tools
ew only, when more information is shown for a property and a css file reference is focused). enter return enter global shortcuts these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 ...

Toolbox - Firefox Developer Tools
cmd + shift + d ctrl + shift + d toggle split console (except if console is the currently selected tool) esc esc esc these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 ...

Web console keyboard shortcuts - Firefox Developer Tools
autocomplete suggestions home home home scroll to end of autocomplete suggestions end end end global shortcuts these shortcuts work in all tools that are hosted in the toolbox. command windows macos linux increase font size ctrl + + cmd + + ctrl + + decrease font size ctrl + - cmd + - ctrl + - reset font size ctrl + 0 cmd + 0 ctrl + 0 ...

AddressErrors - Web APIs
, we generate the error. that's done by removing all shipping options currently set on the request, then set up an object named shippingaddresserrors which contains a country property which is an error message describing why the stated country isn't being permitted as a value. then a paymentdetailsupdate object is created with its error set to a generic message about address errors and with the reset of the object's values taken from shippingaddresserrors, and, using "...defaultpaymentdetails" as the final entry in the object, the remeainder of the properties' values are taken from defaultpaymentdetails. the final step is to call the event's updatewith() method, passing along the updatedetails object. this lets the payment request api know to present the specified error or errors but to allo...

Animation.pause() - Web APIs
cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopp...

Animation.playState - Web APIs
tears.foreach(function(el) { el.pause(); el.currenttime = 0; }); specifications specification status comment web animationsthe definition of 'playstate' in that specification. working draft initial definition. ...

AudioBufferSourceNode.loopEnd - Web APIs
ime indicated by the loopstart property. this is only used if the loop property is true. syntax audiobuffersourcenode.loopend = endoffsetinseconds; var endoffsetinseconds = audiobuffersourcenode.loopend; value a floating-point number indicating the offset, in seconds, into the audio buffer at which each loop will loop return to the beginning of the loop (that is, the current play time gets reset to audiobuffersourcenode.loopstart). this property is only used if the loop property is true. the default value is 0. example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and put it into an audiobuffersourcenode. buttons are provided to play and stop the audio playback, and slider controls are used to change the playbackrate, loopstart and loope...

AudioContext.close() - Web APIs
err exception if called on an offlineaudiocontext. syntax var audioctx = new audiocontext(); audioctx.close().then(function() { ... }); await audioctx.close(); returns a promise that resolves with void. example the following snippet is taken from our audiocontext states demo (see it running live.) when the stop button is clicked, close() is called. when the promise resolves, the example is reset to its beginning state. stopbtn.onclick = function() { audioctx.close().then(function() { startbtn.removeattribute('disabled'); susresbtn.setattribute('disabled', 'disabled'); stopbtn.setattribute('disabled', 'disabled'); }); } specifications specification status comment web audio apithe definition of 'close()' in that specification. working draft ...

Background Tasks API - Web APIs
this example will create a random number of tasks (between 100 and 200 of them). to do so, we use the getrandomintinclusive() function that's provided as an example in the documentation for math.random() to get the number of tasks to create. then we start a loop to create the actual tasks. for each task, we create an object, taskdata, which inc...

BlobBuilder - Web APIs
ructed using the data passed through calls to append(). blob getblob( in domstring contenttype optional ); parameters contenttype optional the mime type of the data to be returned in the blob. this will be the value of the blob object's type property. return value a blob object containing all of the data passed to any calls to append() made since the blobbuilder was created. this also resets the blobbuilder so that the next call to append() is starting a new, empty blob. getfile() returns a file object. file getfile( in domstring name, [optional] in domstring contenttype ); parameters name the file name. contenttype optional the mime type of the data to be returned in the file. this will be the value of the file object's type property. return value a file object.

CSSKeywordValue.CSSKeywordValue() - Web APIs
the csskeywordvalue constructor creates a new csskeywordvalue object which represents css keywords and other identifiers. syntax var csskeywordvalue = new csskeywordvalue(val) parameters value sets or returns the value of the new csskeywordvalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get(...

CSSKeywordValue.value - Web APIs
the value property of the csskeywordvalue interface returns or sets the value of the csskeywordvalue. syntax var val = csskeywordvalue.value csskeywordvalue.value = val value a usvstring. examples the following example resets the css display property to its defaults. let indicator = document.getelementbyid('indicator'); indicator.attributestylemap.set('display', new csskeywordvalue('initial')); indicator.attributestylemap.get('display').value // 'initial' specifications specification status comment css typed om level 1the definition of 'undefined' in that specification. working draft initial definition. ...

CSSKeywordValue - Web APIs
interface instance name is a stringifier meaning that when used anywhere a string is expected it will return the value of csskeyword.value. constructor csskeywordvalue.csskeywordvalue() creates a new csskeywordvalue object. properties csskeywordvalue.value returns or sets the value of the csskeywordvalue. methods inherits methods from cssstylevalue. examples the following example resets the css display property to its defaults, setting the inline style attribute to style="display: initial" if viewed in the developer tools inspector. #myelement { display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let myelement = document.getelementbyid('myelement').attributestylemap; myelemen...

CanvasRenderingContext2D.rotate() - Web APIs
the non-rotated rectangle is gray, and the rotated rectangle is red. rotating a shape around its center this example rotates a shape around its center point. to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the ...

CanvasRenderingContext2D.scale() - Web APIs
tally and by 3x vertically. thus, its final size is a width of 72 and a height of 60. notice that its position on the canvas also changes. since its specified corner is (10, 10), its rendered corner becomes (90, 30). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // scaled rectangle ctx.scale(9, 3); ctx.fillstyle = 'red'; ctx.fillrect(10, 10, 8, 20); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // non-scaled rectangle ctx.fillstyle = 'gray'; ctx.fillrect(10, 10, 8, 20); result the scaled rectangle is red, and the non-scaled rectangle is gray. flipping things horizontally or vertically you can use scale(-1, 1) to flip the context horizontally and scale(1, -1) to flip it vertically. in this ex...

CanvasRenderingContext2D.setTransform() - Web APIs
this lets you scale, rotate, translate (move), and skew the context. note: see also the transform() method; instead of overriding the current transform matrix, it multiplies it with a given one. syntax ctx.settransform(a, b, c, d, e, f); ctx.settransform(matrix); the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settransform() has two types of parameter that it can accept. ...

CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcontext2d.transform() method of the canvas 2d api multiplies the current transformation with the matrix described by the arguments of this method. this lets you scale, rotate, translate (move), and skew the context. note: see also the settransform() method, which resets the current transform to the identity matrix and then invokes transform(). syntax void 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. a value of 1 results in no scaling. b (m12) vertical skewing. c (m21) horizontal skewing. d (m22) vertical scaling. a value of 1 results in no scaling. e (dx) horizontal translation (moving). f (dy)...

CanvasRenderingContext2D.translate() - Web APIs
arison. html <canvas id="canvas"></canvas> javascript the translate() method translates the context by 110 horizontally and 30 vertically. the first square is shifted by those amounts from its default position. const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray. specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.translate' in that specification. ...

CanvasRenderingContext2D - Web APIs
ng transformation to the canvas units by x horizontally and by y vertically. canvasrenderingcontext2d.translate() adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. canvasrenderingcontext2d.transform() multiplies the current transformation matrix with the matrix described by its arguments. canvasrenderingcontext2d.settransform() resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments. canvasrenderingcontext2d.resettransform() resets the current transform by the identity matrix. compositing canvasrenderingcontext2d.globalalpha alpha value that is applied to shapes and images before they are composited onto the canvas. default 1.0 (opaque). canvasrenderingco...

Pixel manipulation with canvas - Web APIs
reading the uint8clampedarray.length attribute: var numbytes = imagedata.data.length; creating an imagedata object to create a new, blank imagedata object, you should use the createimagedata() method. there are two versions of the createimagedata() method: var myimagedata = ctx.createimagedata(width, height); this creates a new imagedata object with the specified dimensions. all pixels are preset to transparent black (all zeroes i.e rgba(0,0,0,0)). you can also create a new imagedata object with the same dimensions as the object specified by anotherimagedata. the new object's pixels are all preset to transparent black. this does not copy the image data! var myimagedata = ctx.createimagedata(anotherimagedata); getting the pixel data for a context to obtain an imagedata object containin...

Transformations - Web APIs
d{array} \right] if any of the arguments are infinity the transformation matrix must be marked as infinite instead of the method throwing an exception. the parameters of this function are: a (m11) horizontal scaling. b (m12) horizontal skewing. c (m21) vertical skewing. d (m22) vertical scaling. e (dx) horizontal moving. f (dy) vertical moving. settransform(a, b, c, d, e, f) resets the current transform to the identity matrix, and then invokes the transform() method with the same arguments. this basically undoes the current transformation, then sets the specified transform, all in one step. resettransform() resets the current transform to the identity matrix. this is the same as calling: ctx.settransform(1, 0, 0, 1, 0, 0); example for transform and settransform functi...

console - Web APIs
e: this feature is available in web workers. note: the actual console interface is defined as all lower case (i.e. not console), for historical reasons. methods console.assert() log a message and stack trace to console if the first argument is false. console.clear() clear the console. console.count() log the number of times this line has been called with the given label. console.countreset() resets the value of the counter with the given label. console.debug() outputs a message to the console with the log level debug. console.dir() displays an interactive listing of the properties of a specified javascript object. this listing lets you use disclosure triangles to examine the contents of child objects. console.dirxml() displays an xml/html element representation of the specif...

Document: dragover event - Web APIs
the dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds). the event is fired on the drop target(s). bubbles yes cancelable yes default action reset the current drag operation to "none". interface dragevent event handler property ondragover examples see the drag event for example code or this jsfiddle demo. specifications specification status comment html living standardthe definition of 'dragover' in that specification. living standard ...

Document - Web APIs
thandlers.onpointerlockerror is an eventhandler representing the code to be called when the pointerlockerror event is raised. globaleventhandlers.onprogress is an eventhandler representing the code to be called when the progress event is raised. globaleventhandlers.onratechange is an eventhandler representing the code to be called when the ratechange event is raised. globaleventhandlers.onreset is an eventhandler representing the code to be called when the reset event is raised. globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. globaleventhandlers.onscroll is an eventhandler representing the code to be called when the scroll event is raised. globaleventhandlers.onseeked is an eventhandler representing the code to b...

Element: msContentZoom event - Web APIs
the mscontentzoom event fires when a user zooms the element (changes the scale of the content). it is a proprietary event specific to microsoft edge and internet explorer. zoomed elements can expose their zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with element.mszoomto(). bubbles unknown cancelable unknown interface unknown event handler property unknown example contentzoom.addeventlistener("mscontentzoom", function(e) { zoomfactor.value = contentzoom.mscontentzoomfactor.tofixed(2); }); specifications not part of any specification. ...

Element.msZoomTo() - Web APIs
use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mszoomto method scrolls and/or zooms an element to its specified coordinate with animation. zoomed elements can expose their zoom level through mscontentzoom (ie. scrolltop/left). the zoom level can be reset with mszoomto. this proprietary method is specific to internet explorer and microsoft edge. syntax element.mszoomto(arguments); parameters args[in] type: mszoomtooptions contentx[in]: the x-coordinate of the content that is the target of the scroll/zoom. if no value is specified, defaults to the current centerpoint of visible content, horizontally. contenty[in]: the y-coordinate of the c...

ElementCSSInlineStyle.style - Web APIs
ties 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 overriding the existing inline styles. note that the property names are in camel-case and not kebab-case while setting the style using elt.style.<property> (i.e., elt.style.fontsize, not elt.style.font-size). a style declaration is reset by setting it to null or an empty string, e.g., elt.style.color = null. internet explorer requires setting it to an empty string, and does not do anything when setting it to null. examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; border: 1px solid blue;"); // set specific style while lea...

EventTarget.addEventListener() - Web APIs
mentbyid('my-button-id'); const someobject = {aproperty: 'data'}; mybutton.addeventlistener('click', function() { console.log(someobject.aproperty); // expected value: 'data' someobject.aproperty = 'data again'; // change the value }); window.setinterval(function() { if (someobject.aproperty === 'data again') { console.log('data again: true'); someobject.aproperty = 'data'; // reset value to wait for next event execution } }, 5000); in this example, even though the scope in which both the event listener and the interval function are defined would have finished executing before the original value of someobject.aproperty would have changed, because someobject persists in memory (by reference) in both the event listener and interval function, both have access to the same da...

FontFace.FontFace() - Web APIs
properties. takes the same type of values as the font-family descriptor of @font-face . source the font source. this can be either: a url binary font data descriptors optional a set of optional descriptors passed as an object. ...

FontFace - Web APIs
rnal resource described by an url or from an arraybuffer. properties this interface doesn't inherit any property. fontface.display a cssomstring that determines how a font face is displayed based on whether and when it is downloaded and ready to use. fontface.family a cssomstring that retrieves or sets the family of the font. it is equivalent to the font-family descriptor. fontface.featuresettings a cssomstring that retrieves or sets infrequently used font features that are not available from a font's variant properties. it is equivalent to the font-feature-settings descriptor. fontface.loaded read only returns a promise that resolves with the current fontface object when the font specified in the object's constructor is done loading or rejects with a syntaxerror. fontface.status...

GlobalEventHandlers - Web APIs
thandlers.onpointerlockerror is an eventhandler representing the code to be called when the pointerlockerror event is raised. globaleventhandlers.onprogress is an eventhandler representing the code to be called when the progress event is raised. globaleventhandlers.onratechange is an eventhandler representing the code to be called when the ratechange event is raised. globaleventhandlers.onreset is an eventhandler representing the code to be called when the reset event is raised. globaleventhandlers.onresize is an eventhandler representing the code to be called when the resize event is raised. globaleventhandlers.onscroll is an eventhandler representing the code to be called when the scroll event is raised. globaleventhandlers.onseeked is an eventhandler representing the code to b...

HTMLDialogElement: cancel event - Web APIs
o dismiss the current open dialog. for example, the browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the browser's ui. ...

HTMLDialogElement.close() - Web APIs
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>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); di...

HTMLDialogElement: close event - Web APIs
the close event is fired on an htmldialogelement object when the dialog it represents has been closed. ...

HTMLDialogElement.open - Web APIs
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>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); di...

HTMLDialogElement.show() - Web APIs
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>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); di...

HTMLDialogElement.showModal() - Web APIs
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>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); di...

HTMLDialogElement - Web APIs
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>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel'); var dialog = document.getelementbyid('favdialog'); di...

HTMLInputElement: search event - Web APIs
put> element of type="search". bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <input> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced). current ua implementations of <input type="search"> have an additional control to clear the field. using this control also fires the search event. in that case the value of the <input> element will be the empty string. examples // addeventlistener version const input = document.queryselector('input[type="search"]'); input.addeventliste...

HTMLMediaElement: loadstart event - Web APIs
tent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media ev...

HTMLMediaElement: progress event - Web APIs
tent = eventlog.textcontent + `${event.type}\n`; } video.addeventlistener('loadstart', handleevent); video.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' ...

HTMLMediaElement - Web APIs
given a string specifying a mime media type (potentially with the codecs parameter included), canplaytype() returns the string probably if the media should be playable, maybe if there's not enough information to determine whether the media will play or not, or an empty string if the media cannot be played. htmlmediaelement.fastseek() directly seeks to the given time. htmlmediaelement.load() resets the media to the beginning and selects the best available source from the sources provided using the src attribute or the <source> element. htmlmediaelement.mozcapturestream() [enter description] htmlmediaelement.mozcapturestreamuntilended() [enter description] htmlmediaelement.mozgetmetadata() returns object, which contains properties that represent metadata from the playing media r...

HTMLOutputElement - Web APIs
this element behaves in one of two modes: default mode and value mode. default mode initially, the element is in default mode, and so the contents of the element represent both the value of the element and its default value. if the element is in default mode when the descendants of the element are changed in any way, the defaultvalue property is set to the value of the textcontent property. resetting the form puts the element into default mode, and sets the textcontent property to the value of the defaultvalue property. value mode the element goes into value mode when the contents of the value property are set. the value property otherwise behaves like the textcontent property. when the element is in value mode, the default value is accessible only through the defaultvalue property. sp...

HTMLSelectElement - Web APIs
dicates no element is selected. htmlselectelement.selectedoptionsread only an htmlcollection representing the set of <option> elements that are selected. htmlselectelement.size a long reflecting the size html attribute, which contains the number of visible items in the control. the default is 1, unless multiple is true, in which case it is 4. htmlselectelement.typeread only a domstring represeting the form control's type. when multiple is true, it returns "select-multiple"; otherwise, it returns "select-one". htmlselectelement.validationmessageread only a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any). this attribute is the empty string if the control is not a candidate for constraint validation (willval...

Ajax navigation example - Web APIs
: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritative information", 204: "no content", 205: "reset content", 206: "partial content", 207: "multi-status", 208: "already reported", 226: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 305: "use proxy", 306: "reserved", 307: "temporary redi...

Checking when a deadline is due - Web APIs
variable to manipulate the data. request.onsuccess = function(event) { note.innerhtml += '<li>new item added to database.</li>'; title.value = ''; hours.value = null; minutes.value = null; day.value = 01; month.value = 'january'; year.value = 2020; }; } this next section creates a log message to say the new item addition is successful, and resets the form so it's ready for the next task to be entered. // update the display of data to show the newly added item, by running displaydata() again. displaydata(); }; last of all, we run the displaydata() function, which updates the display of data in the app to show the new task that was just entered. checking whether a deadline has been reached at this point our data is in the database...

Key Values - Web APIs
ntrol moving the picture-in-picture view. vk_pinp_move "pinptoggle" toggles display of th epicture-in-picture view on and off. vk_pinp_toggle "pinpup" a button to move the picture-in-picture view upward. vk_pinp_up "playspeeddown" decreases the media playback rate. vk_play_speed_down "playspeedreset" returns the media playback rate to normal. vk_play_speed_reset "playspeedup" increases the media playback rate. vk_play_speed_up "randomtoggle" toggles random media (also known as "shuffle mode") on and off. vk_random_toggle gdk_key_audiorandomplay (0x1008ff99) "rclowbattery" a code sent when the remote control's ...

MediaDeviceInfo.deviceId - Web APIs
for private browsing, a different identifier is used that is not persisted across sessions. syntax var deviceid = mediadeviceinfo.deviceid value a domstring. ...

MediaDeviceInfo - Web APIs
the list of devices obtained by calling navigator.mediadevices.enumeratedevices() is an array of mediadeviceinfo objects, one per media device. properties mediadeviceinfo.deviceidread only returns a domstring that is an identifier for the represented device that is persisted across sessions. it is un-guessable by other applications and unique to the origin of the calling application. it is reset when the user clears cookies (for private browsing, a different identifier is used that is not persisted across sessions). mediadeviceinfo.groupidread only returns a domstring that is a group identifier. two devices have the same group identifier if they belong to the same physical device — for example a monitor with both a built-in camera and a microphone. mediadeviceinfo.kindread only r...

Multi-touch interaction - Web APIs
= "dashed"; } pointer up the pointerup event is fired when a pointer is raised from the contact surface. when this occurs, the event is removed from the associated event cache. in this application, this handler is also used for pointercancel, pointerleave and pointerout events. function pointerup_handler(ev) { if (logevents) log(ev.type, ev); // remove this touch point from the cache and reset the target's // background and border remove_event(ev); update_background(ev); ev.target.style.border = "1px solid black"; } application ui the application uses <div> elements for the touch areas and provides buttons to enable logging and to clear the log. to prevent the browser's default touch behavior from overriding this application's pointer handling, the touch-action property is ...

RTCDataChannel.bufferedAmount - Web APIs
ed by the user agent itself; it doesn't include any framing overhead or buffering done by the operating system or network hardware. the user agent may implement the process of actually sending data in any way it chooses; this may be done periodically during the event loop or truly asynchronously. as messages are actually sent, this value is reduced accordingly. closing the data channel doesn't reset this count, even though the user agent purges the queued messages. however, even after closing the channel, attempts to send messages continue to add to the bufferedamount value, even though the messages are neither sent nor buffered. whenever this value decreases to fall to or below the value specified in the bufferedamountlowthreshold property, the user agent fires the bufferedamountlow event...

RTCInboundRtpStreamStats.bytesReceived - Web APIs
urce (ssrc). syntax var bytesreceived = rtcinboundrtpstreamstats.bytesreceived; value an unsigned integer value indicating the total number of bytes received so far on this rtp stream, not including header and padding bytes. this value can be used to calculate an approximation of the average media data rate: avgdatarate = rtcinboundrtpstreamstats.bytesreceived / elapsedtime; this value gets reset to zero if the sender's ssrc identifier changes for any reason. specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats.bytesreceived' in that specification. candidate recommendation initial definition. ...

RTCPeerConnection: icecandidate event - Web APIs
s null prior to sending the candidate along. if you need to perform any special actions when there are no further candidates expected, you're much better off watching the ice gathering state by watching for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { switch(pc.icegatheringstate) { case "new": /* gathering is either just starting or has been reset */ break; case "gathering": /* gathering has begun or is ongoing */ break; case "complete": /* gathering has ended */ break; } }); as you can see in this example, the icegatheringstatechange event lets you know when the value of the rtcpeerconnection property icegatheringstate has been updated. if that value is now complete, you know that ice gathering ha...

RTCPeerConnection.restartIce() - Web APIs
will fire the negotiationneeded event. this process continues until an ice restart has been successfully completed. syntax rtcpeerconnection.restartice(); parameters none. return value undefined. usage notes after calling restartice(), the next offer created using createoffer() will initiate ice restart once sent to the remote peer over your signaling mechanism. restarting ice essentially resets ice so that it creates all new candidates using new credentials. existing media transmissions continue uninterrupted during this process. for details about how ice restart works, see ice restart in lifetime of a webrtc session and rfc 5245, section 9.1.1.1: ice specification. example this example creates a handler for the iceconnectionstatechange event that handles a transition to the failed ...

SourceBuffer - Web APIs
nupdateend. sourcebuffer.onupdateend fired whenever sourcebuffer.appendbuffer() method or the sourcebuffer.remove() has ended. this event is fired after onupdate. sourcebuffer.onupdatestart fired whenever the value of sourcebuffer.updating transitions from false to true. methods inherits methods from its parent interface, eventtarget. sourcebuffer.abort() aborts the current segment and resets the segment parser. sourcebuffer.appendbuffer() appends media segment data from an arraybuffer or arraybufferview object to the sourcebuffer. sourcebuffer.appendbufferasync() starts the process of asynchronously appending the specified buffer to the sourcebuffer. returns a promise which is fulfilled once the buffer has been appended. sourcebuffer.appendstream() appends media segment data...

Storage Access API - Web APIs
indexeddb, dom cache, and so on. in firefox, the storage access grants are phased out after 30 calendar days passing, whereas in safari the storage access grants are phased out after 30 days of browser usage passed without user interaction. this is currently a limitation of the firefox implementation, which we may address in a future version. in safari, successful use of the storage access api resets this counter. documentation for firefox's new storage access policy for blocking tracking cookies includes a detailed description of the scope of storage access grants. storage access api methods the storage api methods are implemented on the document interface: document.hasstorageaccess() returns a promise that resolves with a boolean value indicating whether the document has access to ...

USBDevice - Web APIs
sbdevice.isochronoustransferout() returns a promise that resolves with a usbisochronousouttransferresult when time sensitive information has been transmitted from the usb device. usbdevice.open() returns a promise that resolves when a device session has started. usbdevice.releaseinterface() returns a promise that resolves when a cliamed interface is released from exclusive access. usbdevice.reset() returns a promise that resolves when the device is reset and all app operations canceled and their promises rejected. usbdevice.selectalternateinterface() returns a promise that resolves when the specified alternative endpoint is selected. usbdevice.selectconfiguration() returns a promise that resolves when the specified configuration is selected. usbdevice.transferin() returns a promise...

VideoPlaybackQuality.totalVideoFrames - Web APIs
y returns the total number of video frames that have been displayed or dropped since the media was loaded. syntax value = videoplaybackquality.totalvideoframes; value the total number of frames that the <video> element has displayed or dropped since the media was loaded into it. essentially, this is the number of frames the element would have presented had no problems occurred. this value is reset when the media is reloaded or replaced. example this example calls getvideoplaybackquality() to obtain a videoplaybackquality object, then determines what percentage of frames have been lost by either corruption or being dropped. if that exceeds 10% (0.1), a function called lostframesthresholdexceeded() is called to, perhaps, update a quality indicator to show an increase in frame loss. var vi...

WebGLRenderingContext.clear() - Web APIs
the scissor box, dithering, and buffer writemasks can affect the clear() method. syntax void gl.clear(mask); parameters mask a glbitfield bitwise or mask that indicates the buffers to be cleared. possible values are: gl.color_buffer_bit gl.depth_buffer_bit gl.stencil_buffer_bit return value none. exceptions if mask is not one of the listed possible values, a gl.invalid_enum error is thrown. examples the clear() method accepts multiple values. ...

WebGLRenderingContext.isContextLost() - Web APIs
ter has multiple graphics processors (such as a laptop with both mobile and desktop class gpus, the former used primarily when on battery power), and the user or system decides to switch gpus. in this case, all contexts are lost, then restored after switching gpus. another page running in the user's browser performs an operation using the gpu that takes too long, causing hte browser to decide to reset the gpu in order to break the stall. this would cause every webgl context to be lost throughout the entire browser. the user updates their graphics driver on an operating system that allows graphics drivers to be updated without restarting the system. examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if...

WebGLRenderingContext.vertexAttribPointer() - Web APIs
gl.linkprogram(shaderprogram); or we can use the index provided by the graphics card instead of setting the index ourselves; this avoids the re-linking of the shader program. const locposition = gl.getattriblocation(shaderprogram, 'position'); gl.vertexattribpointer(locposition, 3, gl.float, false, 20, 0); gl.enablevertexattribarray(locposition); const l...

WebGLRenderingContext - Web APIs
gcontext.uniformmatrix[234]fv() specifies a matrix value for a uniform variable. webglrenderingcontext.vertexattrib[1234]f[v]() specifies a value for a generic vertex attribute. webglrenderingcontext.vertexattribpointer() specifies the data formats and locations of vertex attributes in a vertex attributes array. drawing buffers webglrenderingcontext.clear() clears specified buffers to preset values. webglrenderingcontext.drawarrays() renders primitives from array data. webglrenderingcontext.drawelements() renders primitives from element array data. webglrenderingcontext.finish() blocks execution until all previously called commands are finished. webglrenderingcontext.flush() empties different buffer commands, causing all commands to be executed as quickly as possible. worki...

WebGL model view projection - Web APIs
hich is pointed toward the camera. then consider moving the camera away from the box until it's two meters away (by adding a meter to the camera's z position), then sliding it 10 centimeters to the its left. the box recedes from the camera by that amount and slides to the right slightly, thereby appearing smaller to the camera and exposing a small amount of its left side to the camera. now let's reset the scene, placing the box back in its starting point, with the camera two meters from, and directly facing, the box. this time, however, the camera is locked down on the table and cannot be moved or turned. this is what working in webgl is like. so how do we simulate moving the camera through space? instead of moving the camera backward and to the left, we apply the inverse transform to the box...

WebRTC connectivity - Web APIs
d that a single ice session may result in the controlling agent choosing more than one candidate pair. each time it does so and shares that information with the controlled agent, the two peers reconfigure their connection to use the new configuration described by the new candidate pair. once the ice session is complete, the configuration that's currently in effect is the final one, unless an ice reset occurs. at the end of each generation of candidates, an end-of-candidates notification is sent in the form of an rtcicecandidate whose candidate property is an empty string. this candidate should still be added to the connection using addicecandidate() method, as usual, in order to deliver that notification to the remote peer. when there are no more candidates at all to be expected during the c...

Window.captureEvents() - Web APIs
ure all events of the specified type. syntax window.captureevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example <!doctype html> <html lang="en"> <head> <!-- ... --> <script> function reg() { window.captureevents(event.click); window.onclick = page_click; } function page_click() { alert('page click event detected!'); } </script> </head> <body onload="reg();"> <p>click anywhere on this page.</p> </body> </html> notes events raised ...

Window: popstate event - Web APIs
such data. if new-entry has a different document object than current-entry, the browsing context is updated so that its document property refers to the document referred to by new-entry, and the context's name is updated to match the context name of the now-current document. each form control within new-entry's document that has autocomplete configured with its autofill field name set to off is reset. see the html autocomplete attribute for more about the autocomplete field names and how autocomplete works. if new-entry's document is already fully loaded and ready—that is, its readystate is complete—and the document is not already visible, it's made visible and the pageshow event is fired at the document with the pagetransitionevent's persisted attribute set to true. the document's url ...

Window.releaseEvents() - Web APIs
m trapping events of a specific type. syntax window.releaseevents(eventtype) eventtype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload. example window.releaseevents(event.keypress) notes note that you can pass a list of events to this method using the following syntax: window.releaseevents(event.keypress | event.keydown | event.keyup). see also window.captureevents ( ). specification this is not part of any specification. browser compatibility the compatibility ta...

Window.scrollY - Web APIs
t. if the document isn't scrolled at all up or down, then scrolly is 0. if you need an integer value, you can use math.round() to round it off. in more technical terms, scrolly returns the y coordinate of the top edge of the current viewport. if there is no viewport, the returned value is 0. example // make sure and go down to the second page if (window.scrolly) { window.scroll(0, 0); // reset the scroll position to the top left of the document. } window.scrollbypages(1); notes use this property to check that the document hasn't already been scrolled when using relative scroll functions such as scrollby(), scrollbylines(), or scrollbypages(). the pageyoffset property is an alias for the scrolly property: window.pageyoffset === window.scrolly; // always true for cross-browser comp...

Window.setCursor() - Web APIs
this function is a part of chromewindow interface. this function is unavailable to web pages, which can use the css cursor property instead. specification this is not part of any specification. browser compatibility the compatibility table in this page is generated from structured data. ...

Window - Web APIs
called when network connection is established. see online event. windoweventhandlers.onpagehide called when the user navigates away from the page, before the onunload event. see pagehide event. windoweventhandlers.onpageshow called after all resources and the dom are fully loaded. see pageshow event. windoweventhandlers.onpopstate called when a back button is pressed. globaleventhandlers.onreset called when a form is reset globaleventhandlers.onresize called continuously as you are resizing the window. globaleventhandlers.onscroll called when the scroll bar is moved via any means. if the resource fully fits in the window, then this event cannot be invoked globaleventhandlers.onwheel called when the mouse wheel is rotated around any axis globaleventhandlers.onselect called after ...

XMLHttpRequest.multipart - Web APIs
to true, the content type of the initial response must be multipart/x-mixed-replace or an error will occur. all requests must be asynchronous. this enables support for server push; for each xml document that's written to this request, a new xml dom document is created and the onload handler is called between documents. note: when this is set, the onload handler and other event handlers are not reset after the first xmldocument is loaded, and the onload handler is called after each part of the response is received. ...

XMLHttpRequest: timeout event - Web APIs
the timeout event is fired when progression is terminated due to preset time expiring. bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification. living standard ...

XMLHttpRequest - Web APIs
s completed, whether successfully (after load) or unsuccessfully (after abort or error). also available via the onloadend property. loadstart fired when a request has started to load data. also available via the onloadstart property. progress fired periodically when a request receives more data. also available via the onprogress property. timeout fired when progress is terminated due to preset time expiring. also available via the ontimeout property. specifications specification status comment xmlhttprequest living standard live standard, latest version ...

XRBoundedReferenceSpace - Web APIs
this extends xrreferencespace, which describes an essentially unrestricted space around the viewer's position. these bounds are defined using an array of points, each of which defines a vertex in a polygon inside which the user is allowed to move. this is typically used when the xr system is capable of tracking the user's physical movement within a limited distance of their starting position. ...

XRReferenceSpaceEventInit.referenceSpace - Web APIs
used to establish the value of a newly-constructed xrreferencespaceevent object when calling the xrreferencespaceevent() constructor. syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrreferencespace indicating the source of the event. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification. working draft initial definition. ...

XRReferenceSpaceEventInit.transform - Web APIs
ost-event coordiante system. syntax let eventinitdict = { referencespace: xrreferencespace, transform: xrrigidtransform }); value an xrrigidtransform object providing a transform that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.transform' in that specification. working draft initial definition. ...

XRReferenceSpaceEventInit - Web APIs
iginated. transform an xrrigidtransform which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system. usage notes all of this dictionary's properties must have valid values set on them before calling the xrreferencespaceevent() constructor. examples this simple snippet calls the constructor to create a new reference space event of type reset. let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification. working draft initial definition. ...

XRRigidTransform - Web APIs
described by a position and orientation. xrrigidtransform is used to specify transforms throughout the webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace(). the transform of an xrview. the transform of an xrpose. the xrreferencespaceevent event's transform property, as found in the reset event received by an xrreferencespace. the advantage to using xrrigidtransform in these places rather than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like computing the inverse of the transform. even better, once it's been computed, it's cached so that subsequent requests are significantly faster. constructor new xrrigidtransform() cre...

XRSession.onsqueeze - Web APIs
nd. xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.transform.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach. specifications specification status comment webxr device apithe definition of 'xrsession.onsqueeze' in that specification. working draft initial definition. ...

XRWebGLLayer() - Web APIs
rer for the session. any options specified in layerinit are used to tailor the rendering system's configuration. exceptions invalidstateerror 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. the specified webgl context, context, has been lost for any reason, such as a gpu switch or reset. the specified session is immersive but the context is not webxr compatible. operationerror the resources (including memory buffers) needed for the layer to operate could not be allocated. specifications specification status comment webxr device apithe definition of 'xrwebgllayer()' in that specification. working draft initial definition. ...

XSLTProcessor - Web APIs
parameter if it was previously set. this will make the xsltprocessor use the default value for the parameter as specified in the stylesheet. a null value for namespaceuri is treated the same as an empty string. void xsltprocessor.clearparameters() removes all set parameters from the xsltprocessor. the xsltprocessor will then use the defaults specified in the xslt stylesheet. void xsltprocessor.reset() removes all parameters and stylesheets from the xsltprocessor. properties non-web-exposed properties the following properties are [chromeonly] and not exposed to web content: [chromeonly] attribute unsigned long xsltprocessor.flags flags that tweak the behavior of the processor. not reset by calling xsltprocessor.reset(). default value: 0 possible values are: name ...

ARIA: feed role - Accessibility
feed element has a label specified with aria-label. if it does, see aria-labelledby. aria-labelledby if the feed has a visible title, the feed element has aria-labelledby referring to the element containing the title. if not, add an aria-label. aria-busy when busy, such as when articles are being added or removed from the feed, set aria-busy="true" during the update operation. make sure it's reset to false when the operation is complete or the changes may not become visible. article each section of content in a feed should be contained in an <article> or element with role article. each article should have an aria-labelledby referring to the article title or other child that can serve as a distinguishing label. each article should preferably have aria-describedby referring to one or more ...

ARIA: button role - Accessibility
best practices if a link performs the action of a button, giving the element role="button" helps assistive technology users understand the function of the element. however, a better solution is to adjust the visual design so it matches the function and aria role. where possible, it is recommended to use native html buttons (<button>, <input type="button">, <input type="submit">, <input type="reset"> and <input type="image">) rather than the button role, as native html buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default, without need for additional customization. specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'button' in that specification. ...

HTML To MSAA - Accessibility
ystem_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item input @type=button, submit, reset role_system_ pushbutton from @value attribute, @alt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a input @type=text, textarea role_system_ text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @type=password role_system_ text n/a...

::-webkit-meter-bar - CSS: Cascading Style Sheets
the ::-webkit-meter-bar css pseudo-class is a webkit extension that represents the meter bar in a <meter> element. syntax ::-webkit-meter-bar specifications not part of any standard. ...

::-webkit-meter-inner-element - CSS: Cascading Style Sheets
uter containing element of a <meter> element. additional markup to render the meter element as read-only. syntax ::-webkit-meter-inner-element specifications not part of any standard. ...

Using CSS animations - CSS: Cascading Style Sheets
animation-delay configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. defining the animation sequence using keyframes once you’ve configured the animation’s timing, you need to define the appearance of the animation. this is done by establishi...

CSS Counter Styles - CSS: Cascading Style Sheets
css counter styles is a module of css that lets you define your own counter styles. reference properties counter-increment counter-reset at-rules @counter-style system additive-symbols negative prefix suffix range pad speak-as fallback guides using css counters describes how to use counters to number any html element or to perform complex counting. specifications specification status comment css counter styles level 3 candidate recommendation initial definition. ...

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
es and see how all of the items align against each other in the flex container. aligning one item with align-self the align-items property sets the align-self property on all of the flex items as a group. this means you can explicitly declare the align-self property to target a single item. the align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container. in this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. i have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. you ...

Basic concepts of flexbox - CSS: Cascading Style Sheets
sis; this is the value the items are using as their base value to grow and shrink from. there are also some predefined shorthand values which cover most of the use cases. you will often see these used in tutorials, and in many cases these are all you will need to use. the predefined values are as follows: flex: initial flex: auto flex: none flex: <positive-number> setting flex: initial resets the item to the initial values of flexbox. this is the same as flex: 0 1 auto. in this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. the value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. the value of flex-basis is auto. items will either use any size set on the item in the main dimension, or they will get their s...

OpenType font features guide - CSS: Cascading Style Sheets
ate forms of glyphs within a font. the example below shows a string of glyphs with only the opentype set 'jis78' enabled. uncheck the box below and you'll see more characters displayed. note: these glyphs were copied out of a font sample and are not intended as prose. font variant shorthand (font-variant) this is the shorthand syntax for defining all of the above. setting a value of normal resets all properties to their initial value. setting a value of none sets font-variant-ligatures to none and all other properties to their initial value. (meaning that if kerning is on by default, it will still be on even with a value of none being supplied here.) font feature settings font-feature-settings is the 'low level syntax' that allows explicit access to every named available opentype fea...

CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
r browsers, i have set a min-height on the items, and hope that my content editors won’t add too much content and make a mess of the layout! i then enhance the layout using grid. i can turn my <ul> into a grid container with three column tracks. however, the width i have assigned to the list items themselves still applies, and it now makes those items a third of the width of the track: if i reset the width to auto, then this will stop the float behavior happening for older browsers. i need to be able to define the width for older browsers, and remove the width for grid supporting browsers. thanks to css feature queries i can do this, right in my css. feature queries will look very familiar if you have ever used a media query to create a responsive layout. rather than checking a viewport ...

Consistent list indentation - CSS: Cascading Style Sheets
o reproduce the default display in netscape 6.x, you write: ul {margin-left: 0; padding-left: 40px;} if you're more interested in following the internet explorer/opera model, then: ul {margin-left: 40px; padding-left: 0;} of course, you can fill in your own preferred values. set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. if you want to reset lists to have no indentation, then you still have to zero out both padding and margin: ul {margin-left: 0; padding-left: 0;} remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. if the parent is the body, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible. conclusion in the en...

CSS reference - CSS: Cascading Style Sheets
box-sizingbreak-afterbreak-beforebreak-insidebrightness()ccalc()caption-sidecaret-colorch@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-...

Shorthand properties - CSS: Cascading Style Sheets
to one of: css provides four special universal property values for controlling inheritance. every css property accepts these values. inherit sets the property value applied to a selected element to be the same as that of its parent element. effectively, this "turns on inheritance". initial sets the property value applied to a selected element to the initial value of that property. unset resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial. note: there is also a newer value, revert, which has limited browser support. note: see origin of css declarations in introducing the css cascade for more information on each of these and how they work. we can look at a list of links and explore...

CSS Tutorials - CSS: Cascading Style Sheets
elopers. though not that difficult, it requires a basic knowledge of css. intermediate-level css tutorials after the release of css 2 (level 1), new features have been added to css. some of them are fancy and are pretty self contained. they are easy to use for anybody with a fair knowledge of basic concepts. css counters counting items and pages is an easy task in css. learn to use counter-reset, counter-increment, counters(), and counter(). css animations css3 animations allow you to define configurations of style, as keyframes, and to transition between them defining an animation. css transitions css3 transitions allow you to define an animation between several styles and to control the way this transition happens. css transforms transforms allow you to change the position of ele...

all - CSS: Cascading Style Sheets
it can set properties to their initial or inherited values, or to the values specified in another stylesheet origin. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global keyword values. note that none of these values affect the unicode-bidi and direction properties. ...

animation-direction - CSS: Cascading Style Sheets
ternate; animation-direction: alternate-reverse; /* multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal; /* global values */ animation-direction: inherit; animation-direction: initial; animation-direction: unset; values normal the animation plays forwards each cycle. in other words, each time the animation cycles, the animation will reset to the beginning state and start over again. this is the default value. reverse the animation plays backwards each cycle. in other words, each time the animation cycles, the animation will reset to the end state and start over again. animation steps are performed backwards, and timing functions are also reversed. for example, an ease-in timing function becomes ease-out. alternate the animatio...

border-bottom-left-radius - CSS: Cascading Style Sheets
rner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. 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(width) and vertical(height) */ border-bottom-left-radius: 20% 20%; /* 20% of hor...

border-bottom-right-radius - CSS: Cascading Style Sheets
ner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-bottom-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. 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(width) and vertical(height) *...

border-top-left-radius - CSS: Cascading Style Sheets
corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-left-radius css property, the value of this property is then reset to its initial value by the shorthand property. syntax /* the corner is a circle */ /* border-top-left-radius: radius */ border-top-left-radius: 3px; /* the corner is an ellipse */ /* border-top-left-radius: horizontal vertical */ border-top-left-radius: 0.5em 1em; border-top-left-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the circle...

border-top-right-radius - CSS: Cascading Style Sheets
corner is square. a background, being an image or a color, is clipped at the border, even a rounded one; the exact location of the clipping is defined by the value of the background-clip property. note: if the value of this property is not set in a border-radius shorthand property that is applied to the element after the border-top-right-radius css property, the value of this property is then reset to its initial value by the shorthand property. syntax /* the corner is a circle */ /* border-top-right-radius: radius */ border-top-right-radius: 3px; /* the corner is an ellipse */ /* border-top-right-radius: horizontal vertical */ border-top-right-radius: 0.5em 1em; border-top-right-radius: inherit; with one value: the value is a <length> or a <percentage> denoting the radius of the c...

border - CSS: Cascading Style Sheets
t: 0.5rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border' in that specification. candidate recommendation removes specific support for transparent, as it is now a valid <color>; this has no practical impact. though it cannot be set to a custom value using the shorthand, border now resets border-image to its initial value (none). css level 2 (revision 1)the definition of 'border' in that specification. recommendation accepts the inherit keyword. also accepts transparent as a valid color. css level 1the definition of 'border' in that specification. recommendation initial definition. browser compatibility the compatibility table in this page is...

counter-increment - CSS: Cascading Style Sheets
the counter-increment css property increases or decreases the value of a css counter by a given value. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. note: the counter's value can be reset to an arbitrary number using the counter-reset css property. syntax /* increment "my-counter" by 1 */ counter-increment: my-counter; /* decrement "my-counter" by 1 */ counter-increment: my-counter -1; /* increment "counter1" by 1, and decrement "counter2" by 4 */ counter-increment: counter1 counter2 -4; /* do not increment/decrement anything: used to override less specific rules */ counter-increment: none; /* global values...

counter-set - CSS: Cascading Style Sheets
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>. you may specify as many counters to reset as you want, with each name or name-number pair separated by a space. the keyword value none. values <custom-ident> the name of the counter to set. <integer> the value to set the counter to on each occurrence of the element. defaults to 0 if not specified. if there isn't currently a counter of the given name on the element, the element will create a new counter of the given name with a s...

<custom-ident> - CSS: Cascading Style Sheets
etween single or double quotes as this would be identical to a <string>. moreover, the first character must not be a decimal digit, nor a hyphen (-) followed by a decimal digit or another hyphen. to prevent ambiguity, each property that uses <custom-ident> forbids the use of specific values: animation-name forbids the global css values (unset, initial, and inherit), as well as none. counter-reset counter-increment forbids the global css values (unset, initial, and inherit), as well as none. @counter-style list-style-type forbids the global css values (unset, initial, and inherit), as well as the values none, inline, and outside. also, quite a few predefined values are implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman,...

<display-box> - CSS: Cascading Style Sheets
sers will remove from the accessibility tree any element with a display value of contents. this will cause the element — and in some browser versions, its descendant elements — to no longer be announced by screen reading technology. this is incorrect behavior according to the csswg specification. more accessible markup with display: contents | hidde de vries display: contents is not a css reset | adrian roselli examples in this first example, the paragraph with a class of secret is set to display: none; the box and any content is now not rendered. display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px. however it also ...

display - CSS: Cascading Style Sheets
mplementations in most browsers will remove from the accessibility tree any element with a display value of contents (but descendants will remain). this will cause the element itself to no longer be announced by screen reading technology. this is incorrect behavior according to the css specification. more accessible markup with display: contents | hidde de vries display: contents is not a css reset | adrian roselli tables changing the display value of a <table> element to block, grid, or flex will alter its representation in the accessibility tree. this will cause the table to no longer be announced properly by screen reading technology. short note on what css display properties do to table semantics — the paciello group hidden content for better a11y | go make things mdn understa...

env() - CSS: Cascading Style Sheets
specifications specification status comment css environment variables module level 1the definition of 'env()' in that specification. editor's draft initial definition. ...

font - CSS: Cascading Style Sheets
ractive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. as with any shorthand property, any individual value that is not specified is set to its corresponding initial value (possibly overriding values previously set using non-shorthand properties). though not directly settable by font, the longhands font-size-adjust and font-kerning are also reset to their initial values. constituent properties this property is a shorthand for the following css properties: font-family font-size font-stretch font-style font-variant font-weight line-height syntax the font property may be specified as either a single keyword, which will select a system font, or as a shorthand for various font-related properties. if font is specified as a system...

grid-template - CSS: Cascading Style Sheets
licing in the named lines defined before/after each size, and grid-template-columns to the track listing specified after the slash (or none, if not specified). note: the repeat() function isn’t allowed in these track listings, as the tracks are intended to visually line up one-to-one with the rows/columns in the “ascii art”. note: the grid shorthand accepts the same syntax, but also resets the implicit grid properties to their initial values. use grid (as opposed to grid-template) to prevent these values from cascading in seperately. formal definition initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-temp...

mask-size - CSS: Cascading Style Sheets
syntax one or more <bg-size> values, separated by commas. a <bg-size> can be specified in one of three ways: using the keyword contain using the keyword cover using width and height values to specify a size using width and height, you can supply one or two values: if only one value is given it sets the width, with the height set to auto...

mask - CSS: Cascading Style Sheets
the mask css shorthand property hides an element (partially or fully) by masking or clipping the image at specific points. as well as the properties listed below, the mask shorthand also resets mask-border to its initial value. it is therefore recommended to use the mask shorthand rather than other shorthands or the individual properties to override any mask settings earlier in the cascade. this will ensure that mask-border has also been reset to allow the new styles to take effect. constituent properties this property is a shorthand for the following css properties: mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size syntax /* keyword values */ mask: none; /* image values */ mask: url(mask.png); /* pixel image ...

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 hide emphasis marks when they conflict with ruby. in html, this can be done with the following s...

text-emphasis-style - CSS: Cascading Style Sheets
/* initial value */ text-emphasis-style: none; /* no emphasis marks */ /* <string> values */ text-emphasis-style: 'x'; text-emphasis-style: '点'; text-emphasis-style: '\25b2'; text-emphasis-style: '*'; text-emphasis-style: 'foo'; /* should not be used. ...

text-emphasis - CSS: Cascading Style Sheets
does not inherit, and the decoration specified is applied across the whole element. however, text-emphasis does inherit, which means it is possible to change emphasis marks for descendents. the size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and text-emphasis may affect line height when the current leading is not enough for the marks. text-emphasis doesn't reset the value of text-emphasis-position. this is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. in the very rare cases when this is needed, the property text-emphasis-position. constituent properties this property is a shorthand for the following css properties: text-emphasis-color text-emphasis-style syntax /* ini...

text-underline-position - CSS: Cascading Style Sheets
l text we use text-underline-position: under; to put the underline below all the descenders. in the text with a vertical writing-mode set, we can then use values of left or right to make the underline appear on the left or right of the text as required. the live example looks like this: setting text-underline-position globally because the text-underline-position property inherits and is not reset by the text-decoration shorthand property, it may be appropriate to set its value at a global level. for example, the under value may be appropriate for a document with lots of chemical and mathematical formulas, which make a large use of subscripts. :root { text-underline-position: under; } specifications specification status comment css text decoration module le...

transform-origin - CSS: Cascading Style Sheets
ffset */ transform-origin: right bottom 2cm; /* y-offset-keyword | x-offset-keyword | z-offset */ transform-origin: bottom right 2cm; /* global values */ transform-origin: inherit; transform-origin: initial; transform-origin: unset; the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset. one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom. two-value synt...

unset - CSS: Cascading Style Sheets
in other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property. unset can be applied to any css property, including the css shorthand all. ...

Web Audio playbackRate explained - Developer guides
t firing on the <input> element, allowing us to react to the playback rate control being changed. note: try out this example live, and try adjusting the playback rate control to see the effect. defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some browsers) when an ended event is generated. so defaultplaybackrate allows us to set the playback rate before playing the media, while playbackrate allows us to change it during media playback. there is also an event available called ratechange, which fires every time the playbackrate changes. browser support chrome 20+ ✔...

Challenge solutions - Developer guides
challenge add a rule to your stylesheet, to number the oceans using roman numerals from i to v. solution define a rule for list items to use the lower-roman list style: li { list-style: lower-roman; } capital letters challenge change your stylesheet to identify the headings with capital letters in parentheses. solution add a rule to the body element (parent of the headings) to reset a new counter, and one to display and increment the counter on the headings: /* numbered headings */ body {counter-reset: headnum;} h3:before { content: "(" counter(headnum, upper-latin) ") "; counter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea. solution the ...

Content categories - Developer guides
<keygen>, <object>, <output>, <select>, and <textarea>. labelable elements that can be associated with <label> elements. contains <button>, <input>, <keygen>, <meter>, <output>, <progress>, <select>, and <textarea>. submittable elements that can be used for constructing the form data set when the form is submitted. contains <button>, <input>, <keygen>, <object>, <select>, and <textarea>. resettable elements that can be affected when a form is reset. contains <input>, <keygen>, <output>,<select>, and <textarea>. secondary categories there are some secondary classifications of elements that can be useful to be aware of as well. script-supporting elements script-supporting elements are elements which don't directly contribute to the rendered output of a document. instead, they serv...

<button>: The Button element - HTML: Hypertext Markup Language
s the same way as _self. name the name of the button, submitted as a pair with the button’s value as part of the form data. type the default behavior of the button. possible values are: submit: the button submits the form data to the server. this is the default if the attribute is not specified for buttons associated with a <form>, or if the attribute is an empty or invalid value. reset: the button resets all the controls to their initial values, like <input type="reset">. (this behavior tends to annoy users.) button: the button has no default behavior, and does nothing when pressed by default. it can have client-side scripts listen to the element's events, which are triggered when the events occur. value defines the value associated with the button’s name when it’s ...

<keygen> - HTML: Hypertext Markup Language
echanism is designed for use with web-based certificate management systems. it is expected that the <keygen> element will be used in an html form along with other information needed to construct a certificate request, and that the result of the process will be a signed certificate. content categories flow content, phrasing content, interactive content, listed, labelable, submittable, resettable form-associated element, palpable content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. permitted aria roles none dom interface htmlkeygenelement attributes this element includes the global attribu...

<output>: The Output element - HTML: Hypertext Markup Language
permitted content phrasing content. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...

<select>: The HTML Select element - HTML: Hypertext Markup Language
to divide the options up into different groups. this is a purely visual grouping, its visualization generally consists of the group name being bolded, and the options being indented. the "hamster" option includes a disabled attribute and therefore can't be selected at all. technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element permitted content zero or more <option> or <optgroup> elements. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role combobox with no multiple attribute and no size attribute greater than 1, otherwise listbox ...

<textarea> - HTML: Hypertext Markup Language
, such as chrome, the disabled textarea content may be selectable and copyable. <textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <textarea name="textarea" rows="5" cols="30" readonly>i am a readonly textarea</textarea> technical summary content categories flow content, phrasing content, interactive content, listed, labelable, resettable, and submittable form-associated element. permitted content text tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role textbox permitted aria roles no role permitted dom interface htmltextareaelement specifications ...

Global attributes - HTML: Hypertext Markup Language
list of global attributes accesskey provides a hint for generating a keyboard shortcut for the current element. this attribute consists of a space-separated list of characters. the browser should use the first one that exists on the computer ...

HTML documentation index - HTML: Hypertext Markup Language
tag, input, range, reference, web, slider <input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. the precise value, however, is not considered important. this is typically represented using a slider or dial control rather than a text entry box like the number input type. 134 <input type="reset"> element, form button, form input, forms, html, html forms, input, input types, reference, reset button, reset <input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values. 135 <input type="search"> form input, forms, html, html forms, input type, reference, search <i...

HTTP Index - HTTP
from that of the origin server's 200 (ok) response . 225 204 no content http, reference, status code, success the http 204 no content success status response code indicates that the request has succeeded, but that the client doesn't need to go away from its current page. a 204 response is cacheable by default. an etag header is included in such a response. 226 205 reset content http, http status code, reference, status code the http 205 reset content response status tells the client to reset the document view, so for example to clear the content of a form, reset a canvas state, or to refresh the ui. 227 206 partial content http, http status, range requests, success the http 206 partial content success status response code indicates...

HTTP response status codes - HTTP
the origin server, but is collected from a local or a third-party copy. this is mostly used for mirrors or backups of another resource. except for that specific case, the "200 ok" response is preferred to this status. 204 no content there is no content to send for this request, but the headers may be useful. the user-agent may update its cached headers for this resource with the new ones. 205 reset content tells the user-agent to reset the document which sent this request. 206 partial content this response code is used when the range header is sent from the client to request only part of a resource. 207 multi-status (webdav) conveys information about multiple resources, for situations where multiple status codes might be appropriate. 208 already reported (webdav) used inside a <dav:p...

Array.prototype.unshift() - JavaScript
are passed as parameters, they're inserted in chunk at the beginning of the object, in the exact same order they were passed as parameters. hence, calling unshift with n arguments once, or calling it n times with 1 argument (with a loop, for example), don't yield the same results. ...

Math.random() - JavaScript
math.random() does not provide cryptographically secure random numbers. ...

Math.random() - JavaScript
math.random() does not provide cryptographically secure random numbers. ...

RegExp() constructor - JavaScript
e another regexp object or literal (for the two regexp constructor notations only). patterns may include special characters to match a wider range of values than would a literal string. flags if specified, flags is a string that contains the flags to add. alternatively, if an object is supplied for the pattern, the flags string will replace any of that object's flags (and lastindex will be reset to 0) (as of es2015). if flags is not specified and a regular expressions object is supplied, that object's flags (and lastindex value) will be copied over. flags may contain any combination of the following characters: g (global match) find all matches rather than stopping after the first match. i (ignore case) if u flag is also enabled, use unicode case folding. m (multiline) ...

RegExpInstance.lastIndex - JavaScript
) fail, then lastindex is set to 0. if lastindex is equal to or less than the length of the string and if the regular expression matches the empty string, then the regular expression matches input starting from lastindex. if lastindex is equal to the length of the string and if the regular expression does not match the empty string, then the regular expression mismatches input, and lastindex is reset to 0. otherwise, lastindex is set to the next position following the most recent match. examples using lastindex consider the following sequence of statements: var re = /(hi)?/g; matches the empty string. console.log(re.exec('hi')); console.log(re.lastindex); returns ["hi", "hi"] with lastindex equal to 2. console.log(re.exec('hi')); console.log(re.lastindex); returns ["", undefined...

RegExp.prototype.sticky - JavaScript
ar expression defined as both sticky and global ignores the global flag. you cannot change this property directly. it is read-only. examples using a regular expression with the sticky flag var str = '#foo#'; var regex = /foo/y; regex.lastindex = 1; regex.test(str); // true regex.lastindex = 5; regex.test(str); // false (lastindex is taken into account with sticky flag) regex.lastindex; // 0 (reset after match failure) anchored sticky flag for several versions, firefox's spidermonkey engine had a bug with regard to the ^ assertion and the sticky flag which allowed expressions starting with the ^ assertion and using the sticky flag to match when they shouldn't. the bug was introduced some time after firefox 3.6 (which had the sticky flag but not the bug) and fixed in 2015. perhaps because...

RegExp.prototype.test() - JavaScript
regex with the "global" flag when a regex has the global flag set, test() will advance the lastindex of the regex. (regexp.prototype.exec() also advances the lastindex property.) further calls to test(str) will resume searching str starting from lastindex. the lastindex property will continue to increase each time test() returns true. note: as long as test() returns true, lastindex will not reset—even when testing a different string! when test() returns false, the calling regex's lastindex property will reset to 0. the following example demonstrates this behaviour: const regex = /foo/g; // the "global" flag is set // regex.lastindex is at 0 regex.test('foo') // true // regex.lastindex is now at 3 regex.test('foo') // false // regex.lastindex is at 0 regex.test('barfoo') ...

RegExp - JavaScript
ith the sticky flag the sticky flag indicates that the regular expression performs sticky matching in the target string by attempting to match starting at regexp.prototype.lastindex. ...

<mtable> - MathML
if you want to use this element as an inline-block, you might want to set <mtable displaystyle="true">...</mtable>. attributes align specifies the vertical alignment of the table with respect to its environment. ...

Web video codec guide - Web media technologies
ure the codec to use "fast" compression, which inherently means less compression is achieved. preparing video externally to prepare video for archival purposes from outside your web site or app, use a utility that performs compression on the original uncompressed video data. for example, the free x264 utility can be used to encode video in avc format using a very high bit rate: x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile while other codecs may have better best-case quality levels when compressing the video by a significant margin, their encoders tend to be slow enough that the nearly-lossless encoding you get with this compression is vastly faster at about the same overall quality level. recording video given the constraints on how close to lossless you can get, you mi...

Media - Progressive web apps (PWAs)
</div> <div id="print-foot"> page: </div> </body> </html> make a new stylesheet, style4.css. copy and paste the content from here: /*** print sample ***/ /* defaults for screen */ #print-head, #print-foot { display: none; } /* print only */ @media print { h1 { page-break-before: always; padding-top: 2em; } h1:first-child { page-break-before: avoid; counter-reset: page; } #print-head { display: block; position: fixed; top: 0pt; left:0pt; right: 0pt; font-size: 200%; text-align: center; } #print-foot { display: block; position: fixed; bottom: 0pt; right: 0pt; font-size: 200%; } #print-foot:after { content: counter(page); counter-increment: page; } } /* end print only */ view this document in your browser. it us...

The building blocks of responsive design - Progressive web apps (PWAs)
x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 17.5vw; } x-card:nth-child(1) button, x-card:nth-child(2) button { position: absolute; bottom: 0; } x-card:nth-child(2) button:nth-of-type(2) { bottom: 5.9rem; } x-card:nth-child...

SVG Event Attributes - SVG: Scalable Vector Graphics
ragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, 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, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...

transform-origin - SVG: Scalable Vector Graphics
] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% animatable yes the transform-origin property may be specified using one, two, or three values, where each value represents an offset. offsets that are not explicitly defined are reset to their corresponding initial values. if two or more values are defined and either no value is a keyword, or the only used keyword is center, then the first value represents the horizontal offset and the second represents the vertical offset. one-value syntax: the value must be a <length>, a <percentage>, or one of the keywords left, center, right, top, and bottom. two-value synt...

SVG Attribute reference - SVG: Scalable Vector Graphics
ragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, 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, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting graphical event attributes onactivate, onfocusin, onfocusout ...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
spaces in svg view fragments implementation status unknown pixel: and percent: spatial media fragments implementation status unknown linking to <view> elements does not cause implicit box transformation to show nearest ancestor <svg> element implementation status unknown unspecified svg view fragment parameters don't cause corresponding attributes to be reset to initial values implementation status unknown viewtarget attribute of <view> and corresponding svg view fragment parameter removed implementation status unknown fragment-only urls are always same-document implementation status unknown additional attributes on <a> implemented (bug 1451823) scripting change notes contentscrip...

xml:base - XML: Extensible Markup Language
ty or external entity, if one exists, otherwise the base uri of the document entity or external entity containing the element. support was removed from blink (chrome and opera) in 2015: chromium bug 341854 blink-dev mailing list post and from firefox 66 in bug 903372. use cases if you have an inline svg you use as icons that needs to work in a document with a html baseelement , you can reset the uri on your icon sprite by setting the xml:base. <html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> ...

Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
parameters you can control parameters for the stylesheet using the xsltprocessor.setparameter(), xsltprocessor.getparameter(), and xsltprocessor.removeparameter() methods. these all take a namespace uri and a local name as the first two parameters, with xsltprocessor.setparameter() taking a third - the value of the parameter to be set. see the xslt/javascript interface in gecko for an example. resetting the xsltprocessor object also implements a xsltprocessor.reset() method, which can be used to remove all stylesheets and parameters then put the processor back into its initial state. this method is implemented in mozilla 1.3 and later. resources the following reflect the interface of the xsltprocessor object: nsixsltprocessor.idl xsltprocessor.webidl using xsltprocessor from xpcom c...