Search completed in 1.73 seconds.
Index - Web APIs
80 animation.timeline api, animation, experimental, property, reference, web animations, timeline, web animations api the animation.timeline property of the animation interface returns or sets the timeline associated with this animation.
... 1
80 audioprocessingevent api, deprecated, interface, internationalization, reference, référence(2), web audio api the web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed.
... 2
80 biquadfilternode.q api, biquadfilternode, property, q, reference, web audio api an audioparam.
...And 102 more matches
Error codes returned by Mozilla APIs
ns_error_not_implemented (0x
80004001) this error is caused by methods which are not implemented.
... ns_error_no_interface (0x
80004002) an attempt was made to call queryinterface to retrieve an interface which an object does not support.
... ns_error_null_pointer (0x
80004003) an error occurred because a value was set to null when this was not expected.
...And 72 more matches
Index - Archive of obsolete content
80 core/promise implementation of promises to make asynchronous programming easier.
... 1
80 dialogs and prompts add-ons, code snippets, extensions, xul no summary!
... 2
80 getting started with firefox extensions extensions an extension is a small application that adds something new to one or more mozilla applications.
...And 51 more matches
Index
80 nss 3.22.1 release notes network security services (nss) 3.22.1 is a patch release for nss 3.22.
... 1
80 nss sample code utilities_1 examples, nss, security this is a library of utilities used by many of the samples.
...for more information see rfc #32
80 * add the authority key identifier extension: the authority key identifier extension provides a means of identifying the public key corresponding to the private key used to sign a crl.
...And 29 more matches
sslerr.html
ssl_error_unsupported_certificate_type -122
80 "unsupported certificate type." the operation encountered a certificate that was not one of the well known certificate types handled by the certificate library.
...ate_unobtainable_alert -12183 "ssl peer could not obtain your certificate from the supplied url." ssl_error_unrecognized_name_alert -12182 "ssl peer has no certificate for the requested dns name." ssl_error_bad_cert_status_response_alert -12181 "ssl peer was unable to get an ocsp response for its certificate." ssl_error_bad_cert_hash_value_alert -121
80 "ssl peer reported bad certificate hash value." unspecified errors that occurred while attempting some operation: all the error codes in the following block describe the operation that was being attempted at the time of the unspecified failure.
... sec_error_revoked_certificate -81
80 peer's certificate has been revoked.
...And 29 more matches
WebGL constants - Web APIs
constant_color 0x
8001 passed to blendfunc or blendfuncseparate to specify a constant color blend function.
... one_minus_constant_color 0x
8002 passed to blendfunc or blendfuncseparate to specify one minus a constant color blend function.
... constant_alpha 0x
8003 passed to blendfunc or blendfuncseparate to specify a constant alpha blend function.
...And 26 more matches
Index - Archive of obsolete content
80 currentset needshelp, xul attributes, xul reference no summary!
... 1
80 listitem.type xul attributes, xul reference no summary!
... 2
80 pinned xul, xul attribute, xul reference no summary!
...And 19 more matches
Index
80 frequently asked questions xpcom this section will help you if you're fixing a broken build, or have what you think is a quick obvious question, and you don't have time to read the reference manual.
... 1
80 amiwebinstalllistener interfaces, interfaces:scriptable, xpcom, xpcom interface reference called when the website is not allowed to directly prompt the user to install add-ons.
... 2
80 numactions the number of accessible actions associated with this accessible.
...And 18 more matches
NSS tools : certutil
x.509 certificate extensions are described in rfc 52
80.
... x.509 certificate extensions are described in rfc 52
80.
... x.509 certificate extensions are described in rfc 52
80.
...And 14 more matches
certutil
x.509 certificate extensions are described in rfc 52
80.
... x.509 certificate extensions are described in rfc 52
80.
... x.509 certificate extensions are described in rfc 52
80.
...And 14 more matches
nsIAccessibleEvent
constants constant gecko version description 1.7 - 1.8.1 1.9 - 1.9.2 2.0 event_show 0x
8002 0x0001 an object has been created.
... event_hide 0x
8003 0x0002 an object has been destroyed.
... event_reorder 0x
8004 0x005c 0x0003 an object's children have changed.
...And 10 more matches
Responsive images - Learn web development
the standard <img> element traditionally only lets you point the browser to a single source file: <img src="elva-fairy-
800w.jpg" alt="elva dressed as a fairy"> we can however use two new attributes — srcset and sizes — to provide several additional source images along with hints to help the browser pick the right one.
... you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-4
80w.jpg 4
80w, elva-fairy-
800w.jpg
800w" sizes="(max-width: 600px) 4
80px,
800px" src="elva-fairy-
800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line.
...for each one, we write: an image filename (elva-fairy-4
80w.jpg) a space the image's intrinsic width in pixels (4
80w) — note that this uses the w unit, not px as you might expect.
...And 9 more matches
Proxy Auto-Configuration (PAC) file - HTTP
examples proxy w3proxy.netscape.com:
8080; proxy mozilla.netscape.com:
8081 primary proxy is w3proxy:
8080; if that goes down start using mozilla:
8081 until the primary proxy comes up again.
... proxy w3proxy.netscape.com:
8080; proxy mozilla.netscape.com:
8081; direct same as above, but if both proxies go down, automatically start making direct connections.
... (in the first example above, netscape will ask user confirmation about making direct connections; in this case, there is no user intervention.) proxy w3proxy.netscape.com:
8080; socks socks:10
80 use socks if the primary proxy goes down.
...And 9 more matches
NSS Tools ssltap
the following are well-known port numbers: http
80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
...the simplest way to use the debugging tool is to execute the following command from a command shell: ssltap www.netscape.com:
80 the program waits for an incoming connection on the default port 1924.
... command ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output output connected to interzone.mcom.com:443--> [alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x0400
80) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha ...
...And 8 more matches
NSS tools : ssltab
the following are well-known port numbers: * http
80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x0400
80) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/r...
...$ ssltap -s -p 444 interzone.mcom.com:443 > s.txt output connected to interzone.mcom.com:443 --> [ alloclen = 63 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 36 (0x24) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 } session-id = { } chal...
...And 7 more matches
NSS tools : ssltap
the following are well-known port numbers: * http
80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x0400
80) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/r...
...$ ssltap -s -p 444 interzone.mcom.com:443 > s.txt output connected to interzone.mcom.com:443 --> [ alloclen = 63 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 36 (0x24) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-cbc/sha (0x00ffe1) ssl3/rsa-fips/des64cbc/sha (0x000009) ssl3/rsa/des64cbc/sha (0x000003) ssl3/rsa/rc4-40/md5 } session-id = { } chal...
...And 7 more matches
NSS tools : ssltap
the following are well-known port numbers: * http
80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
... example 1 $ ssltap.exe -sx -p 444 interzone.mcom.com:443 > sx.txt output connected to interzone.mcom.com:443 -->; [ alloclen = 66 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 39 (0x27) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x0400
80) ssl2/rsa/rc2cbc40/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sh...
... $ ssltap -s -p 444 interzone.mcom.com:443 > s.txt output connected to interzone.mcom.com:443 --> [ alloclen = 63 bytes [ssl2] clienthellov2 { version = {0x03, 0x00} cipher-specs-length = 36 (0x24) sid-length = 0 (0x00) challenge-length = 16 (0x10) cipher-suites = { (0x0100
80) ssl2/rsa/rc4-128/md5 (0x0200
80) ssl2/rsa/rc4-40/md5 (0x0300
80) ssl2/rsa/rc2cbc128/md5 (0x060040) ssl2/rsa/des64cbc/md5 (0x0700c0) ssl2/rsa/3des192ede-cbc/md5 (0x000004) ssl3/rsa/rc4-128/md5 (0x00ffe0) ssl3/rsa-fips/3des192ede-cbc/sha (0x00000a) ssl3/rsa/3des192ede-...
...And 7 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
.wrapper { display: grid; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } all the direct children are now grid items.
...two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 200px 200px 200px; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } the fr unit tracks can be defined using any length unit.
... <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } in this next example, we create a definition with a 2fr track then two 1fr tracks.
...And 7 more matches
Relationship of grid layout to other layout methods - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { width: 500px; display: flex; flex-wrap: wrap; } .wrapper > div { flex: 1 1 150px; } in the image, you can see that two items have wrapped onto a new line.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } a simple question to ask yourself when deciding between grid or flexbox is: do i only need to control the layout by row or column – use a flexbox do i need to control the layout by row and c...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> </div> .wrapper { display: flex; align-items: flex-end; min-height: 200px; } .box1 { align-self: stretch; } .box2 { align-self: flex-start; } alignment in css grids this second example uses a grid to create the same layout.
...And 7 more matches
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=91
80,4470 c=91
80,4470 cnt=856 scroll 00b97ee0 r=0 a=91
80,4470 c=91
80,4470 cnt=857 scroll 00b97ee0 r=0 a=91
80,4470 c=91
80,4470 cnt=858 canvas 00b97c6c r=0 a=91
80,uc c=91
80,4470 cnt=859 area 02d7afe4 r=0 a=91
80,uc c=91
80,uc cnt=860 text 02d7b150 r=0 a=91
80,uc c=uc,uc cnt=861 text 02d7b150 d=0,0 block 02d7b210 r=0 a=91
80,uc c=8940,uc cnt=862 block 02d7b210 d=8940,0 area 02d7afe4...
... d=91
80,120 canvas 00b97c6c d=91
80,4470 scroll 00b97ee0 d=91
80,4470 scroll 00b97ee0 d=91
80,4470 vp 00b97c30 d=91
80,4470 vp 00b97c30 r=1 a=91
80,4470 c=91
80,4470 cnt=863 scroll 00b97ee0 r=1 a=91
80,4470 c=91
80,4470 cnt=864 scroll 00b97ee0 r=1 a=91
80,4470 c=91
80,4470 cnt=865 canvas 00b97c6c r=1 a=91
80,uc c=91
80,4470 cnt=866 area 02d7afe4 r=1 a=91
80,uc c=91
80,uc cnt=867 block 02d7b210 r=1 a=91
80,uc c=8940,uc cnt=868 text 02d7b3f8 r=0 a=8940,uc c=uc,uc cnt=869 text 02d7b3f8 d=0,0 tblo 02d7b5f0 r=0 a=8940,uc c=0,0 cnt=870 tbl 02d7b7ec r=0 a=8940,uc c=1500,uc cnt=871 rowg 00b984a4 r=0 a=uc,uc c=uc,uc cnt=872 row 02d7baf8 r=0 a=uc,uc c=uc,uc cnt=873 cell 02d7bc98 r=0 a=uc,uc c=uc,uc cnt=874 block 02d7bcf8 r=0 a=uc,uc c=uc,uc cnt=87...
...00 block 02d7bcf8 d=300,300 me=300 cell 02d7bc98 d=330,330 me=330 row 02d7baf8 d=uc,330 rowg 00b984a4 d=uc,330 colg 02d7bfb0 r=0 a=uc,uc c=uc,uc cnt=877 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=878 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0,0 rowg 00b984a4 r=2 a=1500,uc c=1500,uc cnt=879 row 02d7baf8 r=2 a=1500,uc c=1500,uc cnt=8
80 cell 02d7bc98 r=2 a=1440,uc c=1410,uc cnt=881 block 02d7bcf8 r=2 a=1410,uc c=1410,uc cnt=882 block 02d7bcf8 d=1410,300 cell 02d7bc98 d=1440,330 row 02d7baf8 d=1500,330 rowg 00b984a4 d=1500,330 colg 02d7bfb0 r=2 a=1500,uc c=1500,uc cnt=883 col 02d7c0d8 r=0 a=0,0 c=1500,uc cnt=884 col 02d7c0d8 d=0,0 colg 02d7bfb0 d=0...
...And 6 more matches
nsIAccessibleStates
state_hottracked 0x000000
80 the object is hot-tracked by the mouse, which means that its appearance has changed to indicate that the mouse pointer is located over it.
... state_busy 0x00000
800 the control cannot accept input at this time.
... state_invisible 0x0000
8000 the object is programmatically hidden.
...And 6 more matches
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> default rules for auto-placement as you can see with the above example, if you create a grid all child items will lay themselves out one into each grid cell.
...to cause all created rows to be 100 pixels tall for example you would use: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: 100px; } you can use minmax() in your value for grid-auto-rows enabling the creation of rows that are a minimum size but then grow to fit content if it ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four <br>this cell <br>has extra <br>content.
...And 6 more matches
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
the items using one of the following values: auto normal start end center stretch baseline first baseline last baseline * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; align-items: start; } .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .item4 { grid-area: d; } <div class="wrapper"> <div class...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; align-self: start; } .item3 { grid-area: c; align-self: end; } .item4 { grid-area: d; align-self: center...
...the first item in the example demonstrates this default alignment: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; grid-auto-rows: 100px; grid-template-areas: "a a a a b b b b" "a a a a b b b b" "c c c c d d d d" "c c c c d d d d"; } .item1 { grid-area: a; } .item2 { grid-area: b; justify-self: start; } .item3 { grid-area: c; justify-self: end; } .item4 { grid-area: d; justify-self: ...
...And 6 more matches
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> positioning items by line number we can use line-based placement to control where these items sit on the grid.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 4; } .box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box3 { grid-column-start: 2; ...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-column: 1 / 2; grid-row: 1 / 4; } .box2 { grid-column: 3 / 4; grid-row: 1 / 3; } .box3 { grid-column: 2 / 3; grid-row: 1 / 2; } .box4 { grid-column: 2 / 4; grid-row: 3 / 4; } default spans i...
...And 6 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
first of all, as expected, there is a media query in our main css, which is quite weighty, so we'll go through it in parts: @media all and (max-width: 4
80px) { x-card:nth-child(1), x-card:nth-child(2), x-card:nth-child(3) { width: 100%; float: none; padding: 0; } button { margin-top: 0; border-radius: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img { border-radius: 0px; border: none; padding: 0; background-color: 0; } this first block resets a number of different things from the widescreen ...
...to achieve this, we applied the brick css to the page using a separate <link> element with a media attribute: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 4
80px)"> this says that the whole stylesheet will not be linked to the html unless the viewport width is 4
80px or less.
...we opened up the brick.js file and wrapped the whole lot in the following: if (window.matchmedia("(max-width: 4
80px)").matches) { // the whole of brick.js goes here!
...And 6 more matches
NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution information new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 32
80 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
...ublic_mech_sha512_flag public_mech_camellia_flag new oids (see secoidt.h) new ec signature oids sec_oid_ansix962_ecdsa_signature_recommended_digest sec_oid_ansix962_ecdsa_signature_specified_digest sec_oid_ansix962_ecdsa_sha224_signature sec_oid_ansix962_ecdsa_sha256_signature sec_oid_ansix962_ecdsa_sha384_signature sec_oid_ansix962_ecdsa_sha512_signature more id-ce and id-pe oids from rfc 32
80 sec_oid_x509_hold_instruction_code sec_oid_x509_delta_crl_indicator sec_oid_x509_issuing_distribution_point sec_oid_x509_cert_issuer sec_oid_x509_freshest_crl sec_oid_x509_inhibit_any_policy sec_oid_x509_subject_info_access camellia oids (rfc3657) sec_oid_camellia_128_cbc sec_oid_camellia_192_cbc sec_oid_camellia_256_cbc pkcs 5 v2 oids sec_oid_pkcs5_pbkdf2 sec_oid_pkcs5_pbes2 sec_oid_pkcs5_p...
...bug 429388: vfychain.main leaks memory bug 396044: warning: usage of uninitialized variable in ckfw/object.c(174) bug 396045: warning: usage of uninitialized variable in ckfw/mechanism.c(719) bug 401986: mac os x leopard build failure in legacydb bug 325
805: diff considers mozilla/security/nss/cmd/pk11util/scripts/pkey a binary file bug 385151: remove the link time dependency from nss to softoken bug 387892: add entrust root ca certificate(s) to nss bug 433386: when system clock is off by more than two days, oscp check fails, can result in crash if user tries to view certificate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp ...
...And 5 more matches
<color> - CSS: Cascading Style Sheets
specification keyword rgb hex value live keyword css level 1 black #000000 silver #c0c0c0 gray #
808080 white #ffffff maroon #
800000 red #ff0000 purple #
8000
80 fuchsia #ff00ff green #00
8000 lime #00ff00 olive #
808000 yellow #ffff00 navy #0000
80 blue #0000ff teal #00
8080 aqua #00ffff ...
...bfff dimgray #696969 dimgrey #696969 dodgerblue #1e90ff firebrick #b22222 floralwhite #fffaf0 forestgreen #228b22 gainsboro #dcdcdc ghostwhite #f8f8ff gold #ffd700 goldenrod #daa520 greenyellow #adff2f grey #
808080 honeydew #f0fff0 hotpink #ff69b4 indianred #cd5c5c indigo #4b0082 ivory #fffff0 khaki #f0e68c lavender #e6e6fa lavenderblush #fff0f5 lawngreen #7cfc00 lemonchiffon #fffacd lightblue #add8e6 lightcoral #f...
...0
8080 lightcyan #e0ffff lightgoldenrodyellow #fafad2 lightgray #d3d3d3 lightgreen #90ee90 lightgrey #d3d3d3 lightpink #ffb6c1 lightsalmon #ffa07a lightseagreen #20b2aa lightskyblue #87cefa lightslategray #778899 lightslategrey #778899 lightsteelblue #b0c4de lightyellow #ffffe0 limegreen #32cd32 linen #faf0e6 magenta (synonym of fuchsia) #ff00ff mediumaquamarine #66cdaa mediumblue #0000cd mediumorchid #ba55d3 mediumpurple #9370db mediumseagreen #3cb371 ...
...And 5 more matches
Web video codec guide - Web media technologies
imagine the amount of data needed to store uncompressed video: a single frame of high definition (1920x10
80) video in full color (4 bytes per pixel) is 8,294,400 bytes.
...if a 10
80p video is reduced to 720p prior to encoding, the resulting video can be much smaller while having much higher visual quality; even after scaling back up during playback, the result may be better than encoding the original video at full size and accepting the quality hit needed to meet your size requirements.
... supported bit rates varies depending on the video's level; theoretical maximum reaches
800 mbps at level 6.3[2] supported frame rates varies by level; for example, level 2.0 has a maximum of 30 fps while level 6.3 can reach 120 fps compression lossy dct-based algorithm supported frame sizes 8 x 8 pixels to 65,535 x 65535 pixels with each dimension allowed to take any value between these supported color modes pro...
...And 5 more matches
Paths - SVG: Scalable Vector Graphics
for instance, since our box is
80×
80, the <path> element could have been written as: <path d="m 10 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.
... <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 c 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> <path d="m 70 10 c 70 20, 110 20, 110 10" stroke="black" fill="transparent"/> <path d="m 130 10 c 120 20, 1
80 20, 170 10" stroke="black" fill="transparent"/> <path d="m 10 60 c 20
80, 40
80, 50 60" stroke="black" fill="transparent"/> <path d="m 70 60 c 70
80, 110
80, 110 60" stroke="black" fill="transparent"/> <path d="m 130 60 c 120
80, 1
80 80, 170 60" stroke="black" fill="transparent"/> <path d="m 10 110 c 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> <path d="m 70 110 c 70 140,...
... 110 140, 110 110" stroke="black" fill="transparent"/> <path d="m 130 110 c 120 140, 1
80 140, 170 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves.
...And 5 more matches
reftest opportunities files - Archive of obsolete content
403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0
805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090301 http://dbaron.org/css/test/sec090302a http://dbaron.org/css/test/sec090302b http://dbaron.org/css/test/sec090302c http://dbaron.org/css/test/...
...http://dbaron.org/css/test/sec170401 http://dbaron.org/css/test/sec170501 http://dbaron.org/css/test/sec170501a http://dbaron.org/css/test/sec170501b http://dbaron.org/css/test/sec170502 http://dbaron.org/css/test/sec170503 http://dbaron.org/css/test/sec170504 http://dbaron.org/css/test/tborder1 http://dbaron.org/css/test/tborder2 http://dbaron.org/css/test/sec1706c http://dbaron.org/css/test/sec1
801 http://dbaron.org/css/test/sec1
802 http://dbaron.org/css/test/sec1
803 http://dbaron.org/css/test/outline http://dbaron.org/css/test/sq_small http://dbaron.org/css/test/sq_large tests from mozilla source tree parser/htmlparser/tests/html/xmp005.html parser/htmlparser/tests/html/value001.html parser/htmlparser/tests/html/utf
8001.html parser/htmlparser/tests/html/usascii.html parser/htmlparser/te...
...parser/tests/html/button001.html parser/htmlparser/tests/html/bug991.html parser/htmlparser/tests/html/bug9563.html parser/htmlparser/tests/html/bug9536.html parser/htmlparser/tests/html/bug8996.html parser/htmlparser/tests/html/bug8913.html parser/htmlparser/tests/html/bug8771.html parser/htmlparser/tests/html/bug8738.html parser/htmlparser/tests/html/bug8681.html parser/htmlparser/tests/html/bug
8080.html parser/htmlparser/tests/html/bug
8056.html parser/htmlparser/tests/html/bug7889.html parser/htmlparser/tests/html/bug7823.html parser/htmlparser/tests/html/bug7724.html parser/htmlparser/tests/html/bug7723.html parser/htmlparser/tests/html/bug7447.html parser/htmlparser/tests/html/bug6925.html parser/htmlparser/tests/html/bug6233.html parser/htmlparser/tests/html/bug5859.html parser/htmlpar...
...And 4 more matches
Debugging Table Reflow
the table layout strategy can be visualized by defining in the makefiles the constant debug_table_strategy.if one takes for instance the following table code: <table border width="300"> <colgroup> <col> <col width="50%"> <col width="1*"> <col> </colgroup> <tr> <td style="width:
80px">cell 1</td> <td>cell 2</td> <td>cell 3</td> <td>cell 4</td> </tr> </table> rendering: <colgroup><col><col width="50%"><col width="1*"><col></colgroup>cell 1cell 2cell 3cell 4 it will produce the following log at the entrance of assignnonpctcolwidths: assignnonpctcolwidths en max=4500 count=0 ***start table dump*** mcolwidths=-1 -1 -1 -1 col frame cache -> 0=00b93138 1=00b931f0 2=02...
...4dd728 3=024dd7
80 **start col dump** colindex=0 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=1 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=2 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** **start col dump** colindex=3 isanonymous=0 constraint=0 widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 **end col dump** ***end table dump*** the en stands for entrance (ex for leaving a routine).
... the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd7
80 this is followed by the information which width has been set for each column.
...And 4 more matches
TimerFirings logging
-9919468
80[7f46c365ba00]: [6775] fn timer (slack 100 ms): layeractivitytracker -9919468
80[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -9919468
80[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -9919468
80[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f
80 -1340643584[7f46c365ec00]: [6775] o...
... -9919468
80[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.xml:1816:0 711637568[7f3219c4
8000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c4
8000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javas...
... 2082435840[100445640]: [81190] fn timer (one_shot
8000 ms): [from dladdr] gfxfontinfoloader::delayedstartcallback(nsitimer*, void*) second, on linux the code uses dladdr to get the symbol library and address, which can be post-processed by tools/rb/fix_stacks.py.
...And 4 more matches
SubtleCrypto.unwrapKey() - Web APIs
*/ const wrappedkeybytes = [171,223,14,36,201,233,233,120,164,68,217,192,226,
80, 224,39,199,235,239,60,212,169,100,23,61,54,244,197,160,
80,109,230,207, 225,57,197,175,71,
80,209]; /* convert an array of byte values to an arraybuffer.
...*/ const saltbytes = [1
80,253,62,216,47,35,90,55,218,233,103,10,172,143,161,177]; /* iv that is to be used in decrypting the key to unwrap.
...208,7,141,44,18,3,151,58,126,68,100,252, 225,241,11,25,201,153,171,102,174,150,29,62,195,110,138,106,109,14,6,108, 148,104,221,22,93,102,221,146,25,65,112,4,140,79,194,164,163,156,250,108, 11,14,220,78,194,161,17,14,57,121,70,13,28,220,210,78,32,46,217,36,165,220, 170,244,152,214,150,83,2,138,128,11,251,227,213,72,100,158,10,162,40,195, 60,248,77,37,156,34,10,213,171,67,147,73,231,31,63,
80,176,103,206,187,164, 214,250,49,223,185,5,48,241,17,1,253,59,185,181,209,255,42,223,175,90,159, 174,169,205,156,120,195,1,135,165,226,46,119,27,97,183,23,197,227,85,138, 235,79,158,167,59,62,194,34,210,214,240,215,101,233,63,138,53,87,253,189, 27,66,150,76,242,76,102,174,179,163,184,205,11,161,224,19,110,34,175,192, 101,117,169,86,66,56,241,128,13,156,165,125,139,110,138,50,108,129,251,...
...And 4 more matches
Example and tutorial: Simple synth keyboard - Web APIs
</option> </select> </div> </div> css .container { overflow-x: scroll; overflow-y: hidden; width: 660px; height: 110px; white-space: nowrap; margin: 10px; } .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height:
80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } ...
... function createnotetable() { let notefreq = []; for (let i=0; i< 9; i++) { notefreq[i] = []; } notefreq[0]["a"] = 27.500000000000000; notefreq[0]["a#"] = 29.1352350948
80619; notefreq[0]["b"] = 30.867706328507756; notefreq[1]["c"] = 32.703195662574829; notefreq[1]["c#"] = 34.647828872109012; notefreq[1]["d"] = 36.70
8095989675945; notefreq[1]["d#"] = 38.890872965260113; notefreq[1]["e"] = 41.203444614108741; notefreq[1]["f"] = 43.653528929125485; notefreq[1]["f#"] = 46.249302838954299; notefreq[1]["g"] = 48.999429497718661; notefreq[1]["g#"] = ...
... notefreq[2]["c"] = 65.406391325149658; notefreq[2]["c#"] = 69.29565774421
8024; notefreq[2]["d"] = 73.416191979351890; notefreq[2]["d#"] = 77.781745930520227; notefreq[2]["e"] = 82.406889228217482; notefreq[2]["f"] = 87.307057858250971; notefreq[2]["f#"] = 92.498605677908599; notefreq[2]["g"] = 97.998858995437323; notefreq[2]["g#"] = 103.826174394986284; notefreq[2]["a"] = 110.000000000000000; notefreq[2]["a#"] = 116.540940379522479; notefreq[2]["b"] = 123.470825314031027; notefreq[3]["c"] = 130.812782650299317; notefreq[3]["c#"] = 138.591315488436048; notefreq[3]["d"] = ...
...And 4 more matches
Viewport concepts - CSS: Cascading Style Sheets
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 properties that can help you query viewport size, and other similar lengths: the document element's element.clientwidth is the inner width of a document in css pixels, including padding (but not borders, margins, or vertical scrollbars, if present).
...when zoomed in you may get: document.documentelement.clientwidth /*
800 */ window.innerwidth /*
800 */ window.outerwidth /*
800 in firefox, 1200 in chrome */ document.documentelement.clientheight /* 533 */ window.innerheight /* 533 */ window.outerheight /* 596 in firefox, 900 in chrome */ the viewport was originally 1200 x
800 pixels.
... upon zooming in, the viewport became
800 x 533 pixels.
...And 4 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=2
80018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=2
80018439106".
... here's a regular expression that matches our example url: http://cgi\.ebay\.com/ws/ebayisapi\.dll\?viewitem&item=2
80018439106 it looks almost the same as the url.
... matching from the start of the url while this expression matches the url, it also matches other urls that contain this url in their query parameters, for example: http://www.example.com/redirect.php?url=http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=2
80018439106 that's probably not what we want, since urls that contain our example url probably aren't auction item pages themselves.
...And 3 more matches
Legacy layout methods - Learn web development
in the <style> element, add the following code, which gives the wrapper container a width of 9
80 pixels, with padding on the right hand side of 20 pixels.
... * { box-sizing: border-box; } body { width: 9
80px; margin: 0 auto; } .wrapper { padding-right: 20px; } now use the row container that is wrapped around each row of the grid to clear one row from another.
... add the following at the bottom of your css: /* two column widths (120px) plus one gutter width (20px) */ .col.span2 { width: 140px; } /* three column widths (1
80px) plus two gutter widths (40px) */ .col.span3 { width: 220px; } /* and so on...
...And 3 more matches
How do you set up a local testing server? - Learn web development
enter the command to start up the server in that directory: # if python version returned above is 3.x python3 -m http.server # on windows try "python" instead of "python3", or "py -3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port
8000.
... you can go to this server by going to the url localhost:
8000 in your web browser.
... note: if you already have something running on port
8000, you can choose another port by running the server command followed by an alternative port number, e.g.
...And 3 more matches
nsIDOMWindowUtils
modifier_fnlock 0x00
80 getmodifierstate("fn") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
... value changed , was 0x00
80.
... modifier_symbollock 0x0
800 getmodifierstate("symbollock") of the send event will return true if this is specified for amodifiers of send*event() except sendnative*event().
...And 3 more matches
nsIMsgCloudFileProvider
constant value description offlineerr 0x
80550014 returned when it appears that there is no active network connection.
... autherr 0x
8055001e returned when authorizing has failed.
... uploaderr 0x
8055311a returned when uploading has failed for an unknown reason.
...And 3 more matches
MediaDevices.getUserMedia() - Web APIs
the following expresses a preference for 12
80x720 camera resolution: { audio: true, video: { width: 12
80, height: 720 } } the browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it.
...the following demands a minimum resolution of 12
80x720: { audio: true, video: { width: { min: 12
80 }, height: { min: 720 } } } if no camera exists with this resolution or higher, then the returned promise will be rejected with overconstrainederror, and the user will not be prompted.
...here's a full example: { audio: true, video: { width: { min: 1024, ideal: 12
80, max: 1920 }, height: { min: 576, ideal: 720, max: 10
80 } } } an ideal value, when used, has gravity, which means that the browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given.
...And 3 more matches
Capabilities, constraints, and settings - Web APIs
for example: let constraints = { width: 1920, height: 10
80, aspectratio: 1.777777778 }; mytrack.applyconstraints(constraints); in this case, the constraints indicate that any values are fine for nearly all properties, but that a standard high definition (hd) video size is desired, with the standard 16:9 aspect ratio.
...as an example, if the browser running the code above couldn't provide a 1920x10
80 track but could do 1920x900, then that's what would be provided.
...} else { let constraints = { width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 10
80 }, aspectratio: 1.777777778, framerate: { max: 30 }, facingmode: { exact: "user" } }; mytrack.applyconstraints(constraints).then(function() => { /* do stuff if constraints applied successfully */ }).catch(function(reason) { /* failed to apply constraints; reason is why */ }); } here, after ensuring that the constrainable properties for which matches must be found ar...
...And 3 more matches
Border-image generator - CSS: Cascading Style Sheets
ver > * { cursor: default; } /******************************************************************************/ /******************************************************************************/ /* * border image picker */ #gallery { box-shadow: 0 0 3px 0 #bababa; } #image-gallery { width: 600px; height: 100px; margin: 0 auto; transition: margin 0.4s; } #image-gallery .image { height:
80px; float: left; margin: 10px; opacity: 0.5; background-color: #fff; box-shadow: 0px 0px 3px 1px #bababa; } #image-gallery .image[selected="true"] { box-shadow: 0px 0px 3px 1px #3bba52; opacity: 1; } #image-gallery .image:hover { cursor: pointer; box-shadow: 0px 0px 3px 1px #30ace5; opacity: 1; } #image-gallery[data-collapsed='true'] { margin-top: -100px; } /* load menu */ #load-ac...
...#888888 !important; } #toggle-gallery[data-action='hide'] { background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png'); } .button { width: 100px; height: 25px; margin: 10px; color: #fff; text-align: center; font-size: 12px; line-height: 25px; background-color: #379b4a; border-radius: 2px; float: left; } .button:hover { cursor: pointer; background-color: #33
80c4; } #load-image { float: left; } #load-remote { width: 30px; background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png'); background-repeat: no-repeat; background-position: center center; } #remote-url { width: 200px; height: 23px; margin: 10px; padding: 0 5px; border: 1px solid #379b4a; border-radius: 2px; float: left; transition: width 0.5s; } #remo...
...at: left; } /* * controls */ #controls { color: #444; margin: 10px 0 0 0; } #controls .category { height: 190px; min-width: 260px; margin: 10px; padding: 10px; border: 1px solid #ccc; border-radius: 3px; float: left; box-shadow: 0 0 3px 0 #bababa; transition: all 0.25s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 8
80px) { #controls .category { width: 30%; margin-left: 1.66%; margin-right: 1.66%; } } @media (max-width: 879px) { #controls .category { width: 37%; margin-left: 6.5%; margin-right: 6.5%; } } #controls .category .title { width: 100%; height: 30px; margin: 0 0 10px 0; line-height: 25px; text-align: center; color: #aaa; } #controls .category:hover .title { color: #777; } #c...
...And 3 more matches
CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
.wrapper > p { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; margin: 1em; color: #d94
80f; max-width: 300px; } <div class="wrapper"> <p style="writing-mode: horizontal-tb">i have writing mode set to the default <code>horizontal-tb</code></p> <p style="writing-mode: vertical-rl">i have writing mode set to <code>vertical-rl</code></p> </div> writing modes in grid layouts if we now take a look at a grid layout example, we can see how changing the writing mode means cha...
...it then moves onto the next line, creating a new row track, and fills in more items: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> <div class="item5">item 5</div> </div> if we add writing-mode: vertical-lr to the grid contain...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { writing-mode: vertical-lr; display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 100px); grid-gap: 10px; } <div class="wrapper"> <div class="item1">item 1</div> <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> <div class="item5">item 5</div> </div> logical values for align...
...And 3 more matches
Layout using named grid lines - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } when defining the grid, i name my lines inside square brackets.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } i’m using the same grid definitions as above, however this time i am going to place a single item into the named area content.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .w...
...And 3 more matches
conic-gradient() - CSS: Cascading Style Sheets
blue, red); /* a a bluish purple box: the gradient goes from blue to red, but as only the bottom right quadrant is visible, as the center of the conic gradient is in at the top left corner */ conic-gradient(from 90deg at 0 0, blue, red); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(1
80, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction.
...the following two gradients are equivalent conic-gradient(red, orange, yellow, green, blue); conic-gradient(red 0deg, orange 90deg, yellow 1
80deg, green 270deg, blue 360deg); by default, colors transition smoothly from the color at one color stop to the color at the subsequent color stop, with the midpoint between the colors being the half way point between the color transition.
...the following is solid red from the start to the 10% mark, transitions from red to blue over
80% of the turn, with the final 10% being solid blue.
...And 3 more matches
StringView - Archive of obsolete content
/* two bytes */ (npart - 192 << 6) + achars[nidx + 1] - 128 : /* one byte */ npart; }; stringview.pututf8charcode = function (atarget, nchar, nputat) { var nidx = nputat; if (nchar < 0x
80 /* 128 */) { /* one byte */ atarget[nidx++] = nchar; } else if (nchar < 0x
800 /* 2048 */) { /* two bytes */ atarget[nidx++] = 0xc0 /* 192 */ + (nchar >>> 6); atarget[nidx++] = 0x
80 /* 128 */ + (nchar & 0x3f /* 63 */); } else if (nchar < 0x10000 /* 65536 */) { /* three bytes */ atarget[nidx++] = 0xe0 /* 224 */ + (nchar >>> 12); atarget[nidx++] = 0x
80 /* 128 */ +...
... ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + (nchar & 0x3f /* 63 */); } else if (nchar < 0x200000 /* 2097152 */) { /* four bytes */ atarget[nidx++] = 0xf0 /* 240 */ + (nchar >>> 18); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 12) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + (nchar & 0x3f /* 63 */); } else if (nchar < 0x4000000 /* 67108864 */) { /* five bytes */ atarget[nidx++] = 0xf8 /* 248 */ + (nchar >>> 24); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 18) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 12) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /*...
...so...: */ (nchar / 1073741824); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 24) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 18) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 12) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + ((nchar >>> 6) & 0x3f /* 63 */); atarget[nidx++] = 0x
80 /* 128 */ + (nchar & 0x3f /* 63 */); } return nidx; }; stringview.getutf8charlength = function (nchar) { return nchar < 0x
80 ?
...And 2 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
please see //(german) http://interop.blog.de/2010/02/13/kapitel-1-ldap-anfragen-linux-ad-
8001564/ //or search the net how to do it.
.../ close the try, and call the catch() } catch(e) { displayerror("lockedpref", e); } test autoconfig debug to check that our autoconfig works fine, we just set to env variable to check the read of thunderbird.cfg file: $ export nspr_log_modules=mcd:5 $ export nspr_log_file=/tmp/thunderbird-log.txt when thunderbird has started, you should read: $ cat /tmp/thunderbird-log.txt -1209403040[
808a788]: general.config.filename = thunderbird.cfg -1209403040[
808a788]: evaluating .cfg file thunderbird.cfg with obscurevalue 0 clean then, to be sure to start with a fresh thunderbird account, don't do this if you already have one and want to preserve your emails and preferences!
....jar | grep pref 7499 fri jun 24 20:23:08 cest 2011 defaults/autoconfig/prefcalls.js 0 fri jun 24 20:23:08 cest 2011 defaults/pref/ 277 fri jun 24 20:23:08 cest 2011 defaults/pref/all-l10n.js 27221 fri jun 24 20:23:08 cest 2011 defaults/pref/all-thunderbird.js 5865 fri jun 24 20:23:08 cest 2011 defaults/pref/composer.js 42591 fri jun 24 20:23:08 cest 2011 defaults/pref/mailnews.js
806 fri jun 24 20:23:08 cest 2011 defaults/pref/mdn.js 267 fri jun 24 20:23:08 cest 2011 defaults/pref/smime.js 921 fri jun 24 20:23:08 cest 2011 defaults/pref/thunderbird-branding.js 347 fri jun 24 20:23:08 cest 2011 defaults/profile/prefs.js 84859 fri jun 24 20:23:08 cest 2011 greprefs.js however, "autoconfig" can still work in firefox 22, if it doesn't exist, you'll have to manually c...
...And 2 more matches
New Skin Notes - Archive of obsolete content
--dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when browser set in
800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86.
...that our screen resolutions are now wider than
800 pixels width does not mean that we always want to enlarge the window that large and as a result get extra-wide unreadable text lines :) and some people really are restricted to
800 (we can ignore 640, this will most likely require fonts settings changes as well).
... but it should work by default with
800 pixels width, imo.
...And 2 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
80 closure codingscripting, glossary the binding which defines the scope of execution.
... 1
80 grid areas css, css grids, reference a grid area is one or more grid cells that make up a rectangular area on the grid.
... 2
80 nntp glossary, infrastructure nntp (network news transfer protocol) is a protocol used to transfer usenet messages from client to server or between servers.
...And 2 more matches
Experimental features in Firefox
see bug 12238
80 for more details.
... nightly
80 no developer edition
80 no beta
80 no release
80 no preference name layout.css.prefers-contrast.enabled apis graphics: canvas, webgl, and webgpu interface: offscreencanvas the offscreencanvas interface provides a canvas that can be rendered offscreen.
...see bug 12
80613 and bug 778617 for more information.
...And 2 more matches
about:memory
191.89 mb (100.0%) -- explicit ├───63.15 mb (32.91%) -- window-objects │ ├──24.57 mb (12.
80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets │ │ ...
... │ │ └───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.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(0x7f69425b5
800) │ ├──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 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03...
....03%) ++ workers/workers(chrome) ├────5.36 mb (02.
80%) ++ (16 tiny) ├────4.07 mb (02.12%) ++ storage ├────2.74 mb (01.43%) ++ startup-cache └────2.16 mb (01.12%) ++ xpconnect some expertise is required to understand the full details here, but there are various things worth pointing out.
...And 2 more matches
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[
805ef10]: c_initialize 1024[
805ef10]: rv = 0x0 1024[
805ef10]: c_getinfo 1024[
805ef10]: rv = 0x0 1024[
805ef10]: c_getslotlist 1024[
805ef10]: rv = 0x0 2.
...osthreadid[nsprthreadid]: argn = 0xaaaaaaaa osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[
805ef10]: c_initialize 1024[
805ef10]: pinitargs = 0x4010c938 1024[
805ef10]: rv = 0x0 1024[
805ef10]: c_getinfo 1024[
805ef10]: pinfo = 0xbffff340 1024[
805ef10]: rv = 0x0 1024[
805ef10]: c_getslotlist 1024[
805ef10]: tokenpresent = 0x0 1024[
805ef10]: pslotlist = 0x0 1024[
805ef10]: pulcount = 0xbffff33c 1024[
805ef10]: *pulcount = 0x2 1024[
805ef10]: rv = 0x0 note that when a pkcs #11 function takes a pointer argument...
...for example, 1024[
805ef10]: c_findobjectsinit 1024[
805ef10]: hsession = 0x1000001 1024[
805ef10]: ptemplate = 0xbffff410 1024[
805ef10]: ulcount = 3 1024[
805ef10]: cka_label = localhost.nyc.rr.com [20] 1024[
805ef10]: cka_token = ck_true [1] 1024[
805ef10]: cka_class = cko_certificate [4] 1024[
805ef10]: rv = 0x0 1024[
805ef10]: c_findobjects 1024[
805ef10]: hsession = 0x1000001 1024[
805ef10]: phobject = 0x
806d810 1024[
805ef10]: ulmaxobjectcount = 16 1...
...And 2 more matches
Hacking Tips
n:3 (0x7fffef1231c0 @ 47) #3 (nil) typein:2 (0x7fffef1231c0 @ 24) #4 (nil) typein:3 (0x7fffef1231c0 @ 47) […] #25157 0x7fffefbbc250 typein:2 (0x7fffef1231c0 @ 24) #25158 0x7fffefbbc1c8 typein:3 (0x7fffef1231c0 @ 47) #25159 0x7fffefbbc140 typein:2 (0x7fffef1231c0 @ 24) #25160 0x7fffefbbc0b8 typein:3 (0x7fffef1231c0 @ 47) #25161 0x7fffefbbc030 typein:5 (0x7fffef1232
80 @ 9) note, you can do the exact same exercise above using lldb (necessary on osx after apple removed gdb) by running lldb -f js then following the remaining steps.
...let's say that the line number of this function is 47
80, for instance: (gdb) b codegenerator.cpp:47
80 breakpoint 1 at 0x84cade0: file /home/code/mozilla-central/js/src/ion/codegenerator.cpp, line 47
80.
...[new thread 0xf7903b40 (lwp 12563)] [new thread 0xf6bdeb40 (lwp 12564)] run#0 breakpoint 1, js::ion::codegenerator::link (this=0x86badf8) at /home/code/mozilla-central/js/src/ion/codegenerator.cpp:47
80 47
80 { (gdb) n 4781 jscontext *cx = getioncontext()->cx; (gdb) n 4783 linker linker(masm); (gdb) n 4784 ioncode *code = linker.newcode(cx, jsc::ion_code); (gdb) n 4785 if (!code) (gdb) p code->code_ $1 = (uint8_t *) 0xf7fd25a8 "\201", <incomplete sequence \354\200> (gdb) x/2i 0xf7fd25a8 0xf7fd25a8: sub $0x
80,%esp 0xf7fd25ae: mov 0x94(%esp),%ecx ...
...And 2 more matches
Index
80 js::touint64 jsapi reference, reference, référence(2), spidermonkey js::toint64 converts a javascript value to an unsigned 64bit integer.
... 1
80 jsval_zero jsapi reference, obsolete, spidermonkey jsval_zero is equivalent to int_to_jsval(0).
... 2
80 js_getclass jsapi reference, spidermonkey js_getclass returns a pointer to the jsclass associated with a specified js object, obj.
...And 2 more matches
A Web PKI x509 certificate primer
in this document we will be referring to the current standard in use for web pki: x509 v3, which is described in detail in rfc 52
80.
... extensions while rfc 52
80 defines 16 extensions for webpki in this document we will be describing the six extensions we considered critical for understanding.
... certificates can have other extensions not described on rfc 52
80, but that is out of the scope of this document.
...And 2 more matches
nsMsgFolderFlagType
const nsmsgfolderflagtype unused2 = 0x000000
80; /** @} */ /** @name mail folder flags * these flags only occur in folders which have * the nsmsgfolderflags::mail bit set, and do * not have the nsmsgfolderflags::directory or * nsmsgfolderflags::elided bits set.
... const nsmsgfolderflagtype queue = 0x00000
800; /// whether this is the primary inbox folder.
... const nsmsgfolderflagtype inbox = 0x00001000; /// whether this folder on online imap const nsmsgfolderflagtype imapbox = 0x00002000; /// whether this is an archive folder const nsmsgfolderflagtype archive = 0x00004000; /// this used to be used for virtual newsgroups const nsmsgfolderflagtype unused1 = 0x0000
8000; /// used to be for categories const nsmsgfolderflagtype unused4 = 0x00010000; /// this folder got new msgs const nsmsgfolderflagtype gotnew = 0x00020000; /// this folder is an imap server const nsmsgfolderflagtype imapserver = 0x00040000; /// this folder is an imap personal folder const nsmsgfolderflagtype imappersonal = 0x000
80000; /// this folder is an imap public folder co...
...And 2 more matches
Autoconfiguration in Thunderbird
in the apache configuration files, that means something like: listen 10.2.3.4:
80 (of course, you use a public ip address that you own) <virtualhost 10.2.3.4:
80> #must be the first and only virtual host with this ip!
... you can add a rewriterule in the default virtual host (on debian /etc/apache2/sites-enabled/000-default) to match all autoconfig.* subdomains: <virtualhost *:
80> #must be the first virtual host serveradmin webmaster@hoster.com servername www documentroot /var/www rewriteengine on rewritecond %{http_host} ^autoconfig\.
...</virtualhost> <virtualhost *:
80> documentroot /var/www/autoconfig/ servername autoconfig.hoster.com <directory /var/www/autoconfig> order allow,deny allow from all </directory> </virtualhost> if you use nginx, you can easily add a subdomain to all your domains, which does the same as above.
...And 2 more matches
CanvasRenderingContext2D.rotate() - Web APIs
you can use degree * math.pi / 1
80 to calculate a radian from a degree.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0,
80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 1
80); ctx.fillstyle = 'red'; ctx.fillrect(100, 0,
80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); result the center of rotation is blue.
... html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (
80, 60), a width of 140, a height of 30.
...And 2 more matches
Drawing shapes with canvas - Web APIs
to convert degrees to radians you can use the following javascript expression: radians = (math.pi/1
80)*degrees.
...the endangle starts at 1
80 degrees (half a circle) in the first column and is increased by steps of 90 degrees, culminating in a complete circle in the last column.
... id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); // cubic curves example ctx.beginpath(); ctx.moveto(75, 40); ctx.beziercurveto(75, 37, 70, 25, 50, 25); ctx.beziercurveto(20, 25, 20, 62.5, 20, 62.5); ctx.beziercurveto(20,
80, 40, 102, 75, 120); ctx.beziercurveto(110, 102, 130,
80, 130, 62.5); ctx.beziercurveto(130, 62.5, 130, 25, 100, 25); ctx.beziercurveto(85, 25, 75, 37, 75, 40); ctx.fill(); } } screenshotlive sample rectangles in addition to the three methods we saw in drawing rectangles, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectan...
...And 2 more matches
Key Values - Web APIs
vk_space (0x20) kvk_space (0x31) gdk_key_space (0x20) gdk_key_kp_space (0xff
80) qt::key_space (0x20) keycode_space (62) [1] older browsers may return "spacebar" instead of " " for the space bar key.
... gdk_key_dead_belowcircumflex (0xfe69) ꞈ gdk_key_dead_belowtilde (0xfe6a) ̰ gdk_key_dead_belowbreve (0xfe6b) ̮ gdk_key_dead_belowdiaeresis (0xfe6c) ̤ gdk_key_dead_invertedbreve (0xfe6d) ̯ gdk_key_dead_belowcomma (0xfe6e) ̦ gdk_key_dead_currency (0xfe6f) gdk_key_dead_a (0xfe
80) gdk_key_dead_a (0xfe81) gdk_key_dead_e (0xfe82) gdk_key_dead_e (0xfe83) gdk_key_dead_i (0xfe84) gdk_key_dead_i (0xfe85) gdk_key_dead_o (0xfe86) gdk_key_dead_o (0xfe87) gdk_key_dead_u (0xfe88) gdk_key_dead_u (0xfe89) gdk_key_dead...
... vk_f17 (0x
80) kvk_f17 (0x40) gdk_key_f17 (0xffce) qt::key_f17 (0x01000040) keycode_f17 "f18" the f18 key.
...And 2 more matches
Box-shadow generator - CSS: Cascading Style Sheets
er left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height:
800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* containe...
...0 10px; color: #333; background-color: #eee; text-align: center; font-size: 0.75em; line-height: 1.5em; border: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #33
80c4; border: 1px solid #33
80c4; cursor: pointer; } #layer_manager [data-type='add'] { background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); } #layer_manager [data-type='add']:hover { background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); } #layer_manager [data-type='move-up'] { background-image: url("https://mdn.mozillademos.org/files/5697/...
...ger .node { width: 100%; margin: 5px 0; padding: 5px; text-align: center; background-color: #eee; border: 1px solid #ddd; font-size: 0.75em; line-height: 1.5em; color: #333; border-radius: 3px; position: relative; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #layer_manager .node:hover { color: #fff; background-color: #33
80c4; cursor: pointer; } /* active element styling */ #layer_manager [data-active='layer'] { color: #fff; border: none; background-color: #379b4a; } #layer_manager [data-active='subject'] { color: #fff; background-color: #467fc9; } /* delete button */ #layer_manager .delete { width: 1.5em; height: 100%; float: right; border-radius: 3px; background-image: url("https://mdn.mozillademos...
...And 2 more matches
Using device orientation with 3D transforms - Developer guides
there are however two corrections that should be applied to those values: the initial alpha value is 1
80 (device flat on the back, top of the screen pointing 12:00), so the rotatez value should be alpha - 1
80 the y axis of the screen coordinate system is inverted, such that translatey(100px) moves an element 100px down, so the rotatey value should be -gamma finally, the order of the three different rotations is very important to accurately convert an orientation to a 3d rotation: rotatez, then ro...
...here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed transform property elem.style.transform = "rotatez(" + ( e.alpha - 1
80 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed transform property elem.style.transform = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 1
80 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation mat...
...And 2 more matches
Identifying resources on the Web - HTTP
a more complex example might look like this: http://www.example.com:
80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthedocument urns a uniform resource name (urn) is a uri that identifies a resource by name in a particular namespace.
... urn:isbn:97
80141036144 urn:ietf:rfc:7230 the two urns correspond to the book nineteen eighty-four by george orwell, the ietf specification 7230, hypertext transfer protocol (http/1.1): message syntax and routing.
... port :
80 is the port in this instance.
...And 2 more matches
JavaScript modules - JavaScript
see node's ecmascript modules documentation for more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag.available in workerschrome full support
80 full support
80 full support 67disabled disabled from version 67: this feature is behind the experimental web platform features preference.
... to change preferences in chrome, visit chrome://flags.edge full support
80 full support
80 full support 79disabled disabled from version 79: this feature is behind the experimental web platform features preference.firefox no support noie no support noopera no support nosafari no support nowebview android full support
80chrome android full support
80 full support ...
...
80 full support 67disabled disabled from version 67: this feature is behind the experimental web platform features preference.
...And 2 more matches
String.prototype.charAt() - JavaScript
getwholechar(str, i)) === false) { continue; } // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning a variable to represent the // individual character console.log(chr); } function getwholechar(str, i) { var code = str.charcodeat(i); if (number.isnan(code)) { return ''; // position not found } if (code < 0xd
800 || code > 0xdfff) { return str.charat(i); } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd
800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate'; } var next = str.charcodeat(i + 1); if (0xdc00 > next || next > 0xdfff) { t...
...hrow 'high surrogate without following low surrogate'; } return str.charat(i) + str.charat(i + 1); } // low surrogate (0xdc00 <= code && code <= 0xdfff) if (i === 0) { throw 'low surrogate without preceding high surrogate'; } var prev = str.charcodeat(i - 1); // (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd
800 > prev || prev > 0xdbff) { throw 'low surrogate without preceding high surrogate'; } // we can pass over low surrogates now as the second component // in a pair which we have already processed return false; } in an ecmascript 2016 environment which allows destructured assignment, the following is a more succinct and somewhat more flexible alternative in that it does increment for an incr...
...di(str, i) // adapt this line at the top of each loop, passing in the whole string and // the current iteration and returning an array with the individual character // and 'i' value (only changed if a surrogate pair) console.log(chr) } function getwholecharandi(str, i) { let code = str.charcodeat(i) if (number.isnan(code)) { return '' // position not found } if (code < 0xd
800 || code > 0xdfff) { return [str.charat(i), i] // normal character, keeping 'i' the same } // high surrogate (could change last hex to 0xdb7f to treat high private // surrogates as single characters) if (0xd
800 <= code && code <= 0xdbff) { if (str.length <= (i + 1)) { throw 'high surrogate without following low surrogate' } let next = str.charcodeat(i + 1) if...
...And 2 more matches
No Proxy For configuration - Archive of obsolete content
port-only filters ":
80" or "*:
80" are not supported.
...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").
... 127.0.0.1 proxy ports 1 127.0.0.1 proxy no port .mozilla.org www.mozilla.org:
80 www.mozilla.org:81 direct direct port number .mozilla.org:
80 www.mozilla.org:
80 www.mozilla.org direct direct :81 www.mozilla.org:81 proxy developer notes the no_proxy for logic is written in c++.
...filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for" items bug
80917 - proxy: "no proxy" w/ form based ui bug 91587 - proxy: "no proxy for" default domain filtering fails w/ non-fqdn (e.g., http://web/) bug 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server f...
azimuth - Archive of obsolete content
90deg is to the right, 1
80deg is behind, and 270deg or -90deg is to the left.
... center behind: same as 1
80deg.
... behind: same as 1
80deg.
... examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.comment { azimuth: behind; } /* 1
80deg */ specifications specification status comment css level 2 (revision 1)the definition of 'azimuth' in that specification.
Using the Right Markup to Invoke Plugins - Archive of obsolete content
adding an additional layer of convenience in the form of automatic retrieval is the subject of a bug 1
80411 in the mozilla open source code.
...the fact that the flash player doesn't understand this param is a macromedia flash player bug that is bug 1
80378.
...for instance, this is an example of the type of markup that will invoke the jre 1.4.1 in ie, using the unique identifier for the jre 1.4.1: <!-- ie only code --> <object classid="clsid:8ad9c840-044e-11d1-b3e9-00
805f499d93" width="460" height="160" codebase="http://java.sun.com/products/plugin/autodl/jinstall-1_4_1-windows-i586.cab#version=1,4,1"> <param...> <param...> </object> the above invocation won't work for mozilla-based browsers such as netscape 7 because of the same reason mentioned above: classid used in conjunction with a unique identifier references an architecture (activex) tha...
...ava html 4.01 applet definition (deprecated) java plugin homepage sun documentation on object, embed, and applet and different plugin versions sun demonstration of web pages using applet element sun demonstration of web pages using object/embed elements bugs and future directions in netscape and mozilla windows media in netscape netscape 7.1 and the windows media activex control bug 1
80378 bug 167601 bug 1
80411 ...
2D maze game with device orientation - Game development
body { margin: 0; background: #333; } </style> <script src="src/phaser-arcade-physics.2.2.2.min.js"></script> <script src="src/boot.js"></script> <script src="src/preloader.js"></script> <script src="src/mainmenu.js"></script> <script src="src/howto.js"></script> <script src="src/game.js"></script> </head> <body> <script> (function() { var game = new phaser.game(320, 4
80, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html website with some basic content in the <head> section: charset, tit...
... var game = new phaser.game(320, 4
80, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to put the canvas in.
...without the framework, to add the canvas element to the page, you would have to write something like this inside the <body> tag: <canvas id='game' width='320' height='4
80'></canvas> the important thing to remember is that the framework is setting up helpful methods to speed up a lot of things like image manipulation or assets management, which would be a lot harder to do manually.
... var ball = { _width: 320, _height: 4
80 }; ball.boot = function(game) {}; ball.boot.prototype = { preload: function() { this.load.image('preloaderbg', 'img/loading-bg.png'); this.load.image('preloaderbar', 'img/loading-bar.png'); }, create: function() { this.game.scale.scalemode = phaser.scalemanager.show_all; this.game.scale.pagealignhorizontally = true; this.game.scale.pagealignvert...
create fancy boxes - Learn web development
rgba(0,0,0,0) 95%, #8da389 95%), linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), linear-gradient(175deg, rgba(0,0,0,0)
80%, #ba9499
80%), linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), linear-gradient( 85deg, rgba(0,0,0,0)
80%, #74a6ae
80%)...
...i want to be fancy.</div> let's have an example by turning our box into a cloud: .fancy { text-align: center; /* same trick as previsouly used to make circles */ box-sizing: border-box; width : 150px; height : 150px; padding :
80px 1em 0 1em; /* we make room for the "ears" of our cloud */ margin : 0 100px; position: relative; background-color: #a4c9cf; /* well, actually we are not making a full circle as we want the bottom of our cloud to be flat.
...*/ z-index : -1; background-color: #a4c9cf; border-radius: 100%; } .fancy::before { /* this is the size of the clouds left ear */ width : 125px; height : 125px; /* we sligthly move it to the left */ left : -
80px; /* to make sure that the bottom of the cloud remains flat, we must make the bottom right corner of the left ear square.
... .fancy { position: relative; background-color: #ffc; padding: 2rem; text-align: center; max-width: 200px; } .fancy::before { content: ""; position : absolute; z-index : -1; bottom : 15px; right : 5px; width : 50%; top :
80%; max-width: 200px; box-shadow: 0px 13px 10px black; transform: rotate(4deg); } what's next in many ways, making a fancy box is mostly about adding color and images within the background, so it could worth digging into managing colors and images.
Implementing feature detection - Learn web development
it looks like this: if (window.matchmedia("(max-width: 4
80px)").matches) { // run javascript in here.
... } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (4
80px wide or less).
... we first use the media attribute to only apply the brick css to the page if the page width is 4
80px or less: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 4
80px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views).
... if (window.matchmedia("(max-width: 4
80px)").matches) { deck.shuffleto(1); } using modernizr to implement feature detection it is possible to implement your own feature detection tests using techniques like the ones detailed above.
BloatView
blank mozilla yahoo netscape total blank mozilla yahoo netscape total total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 132
80 76160 360960 nshashkey 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttransformer 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259
808 325312 489440 338560 1413120 141312 220
800 -11040 94944 ...
... 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 19928 1696 1272 581728 720
80 1272 424 -424 73352 the first set of columns, bytes allocated, shows the amount of memory allocated for the first log file (blank.txt), the difference between the first log file and the second (mozilla.txt), the difference between the second log file and the third (yahoo.txt), the difference between the third log file and the fourth (netscape.txt), and the total amount of memory allocated in the fourth log file.
...st/win32_d.obj/bin/bloatlogs/all-1999-10-22-133450.txt previous file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-16-010302.txt -------------------------------------------------------------------------- class leaks delta bloat delta -------------------------------------------------------------------------- total 6113530 2.79% 67064
808 9.18% stylecontextimpl 265440 81.19% 283584 -26.99% ctoken 236500 17.32% 306676 20.64% nsstr 217760 14.94% 5817060 7.63% nsxulattribute 113048 -70.92% 113568 -71.16% literalimpl 532
80 26.62% 75840 19.40% nsxulelement 51648 0.00% ...
... 51648 0.00% nsprofile 51224 0.00% 51224 0.00% nsframe 47568 -26.15% 4
8096 -50.49% cssdeclarationimpl 42984 0.67% 43488 0.67% this "delta report" shows the leak offenders, sorted from most leaks to fewest.
powermetrics
88 181.57 92.81 0.00 0.00 23.95 12.77 0.00 google chrome 84681 57.26 76.07 4.39 0.00 23.75 12.97 0.00 google chrome helper 84685 0.13 48.08 0.00 0.00 0.40 0.20 0.00 kernel_coalition 1 128.64 7
80.19 330.52 0.00 kernel_task 0 109.97 0.00 0.20 0.00 779.47 330.35 0.00 launchd 1 18.88 2.44 0.00 0.00 0.40 0.20 0.00 com.apple.safari 488 90.60 108.58 56.48 26.65 com.apple.webkit.w...
... 0.00 9.43 4.33 19.17 google chrome 67301 63.77 68.09 29.46 0.13 76.11 22.26 0.00 google chrome helper 67320 38.30 66.70 17.83 0.00 45.78 19.29 0.00 com.apple.windowserver 68 102.58 112.36 43.15
80.52 windowserver 141 103.03 58.19 60.48 6.40 112.36 43.15
80.53 com.apple.safari 499 267.19 110.53 46.05 1.69 com.apple.webkit.webcontent 67372 190.15 79.34 2.02 0.14 129.28 53.79 2.33 com.apple.webkit.networking 67292 65...
... 0.24 67.72 0.00 0.00 0.90 0.37 0.00 com.apple.webkit.webcontent 67298 0.17 59.88 0.00 0.00 0.50 0.13 0.00 com.apple.webkit.webcontent 67296 0.07 43.51 0.00 0.00 0.10 0.03 0.00 kernel_coalition 1 111.76 724.
80 213.09 0.12 kernel_task 0 107.06 0.00 5.86 0.00 724.46 212.99 0.12 org.mozilla.firefox 498 92.17 212.69 75.67 1.81 firefox 63865 61.00 87.18 1.00 0.87 25.79 9.00 1.81 plugin-container ...
... 67269 31.49 72.46 1.
80 0.00 186.90 66.68 0.00 com.apple.webkit.plugin.64 67373 55.55 74.38 0.74 0.00 9.51 3.13 0.02 com.apple.terminal 109 6.22 0.40 0.23 0.00 terminal 208 6.25 92.99 0.00 0.00 0.33 0.20 0.00 the rapl output is first, then the powermetrics output.
NSS Tools certutil
subject alternative name extensions are described in section 4.2.1.7 of rfc 32
800.
...subject alternative name extensions are described in section 4.2.1.7 of rfc 32
800 usage the certificate database tool's capabilities are grouped as follows, using these combinations of options and arguments.
...:4f:2e:53:e9:e1:3f: 8e:43:7f:51:61:b9:0f:f3:a6:25:1e:0b:93:74:8f: c6:13:a3:cd:51:40:84:0e:79:ea:b7:6b:d1:cc:6b: 78:d0:5d:da:be:2b:57:c2:6f exponent: 65537 (0x10001) signature algorithm: pkcs #1 md5 with rsa encryption signature: 44:15:e5:ae:c4:30:2c:cd:60:89:f1:1d:22:ed:5e:5b:10:c8: 7e:5f:56:8c:b4:00:12:ed:5f:a4:6a:12:c3:0d:01:03:09:f2: 2f:e7:fd:95:25:47:
80:ea:c1:25:5a:33:98:16:52:78:24:
80: c9:53:11:40:99:f5:bd:b8:e9:35:0e:5d:3e:38:6a:5c:10:d1: c6:f9:54:af:28:56:62:f4:2f:b3:9b:50:e1:c3:a2:ba:27:ee: 07:9f:89:2e:78:5c:6d:46:b6:5e:99:de:e6:9d:eb:d9:ff:b2: 5f:c6:f6:c6:52:4a:d4:67:be:8d:fc:dd:52:51:8e:a2:d7:15: 71:3e certificate trust flags: ssl flags: valid ca trusted ca email flags: valid ca trusted ca obje...
...ct signing flags: valid ca trusted ca validating a certificate this example validates a certificate: certutil -v -n jsmith@netscape.com -b 9
803201212z -u sr -e -l -d certdir the certificate database tool shows results similar to certificate:'jsmith@netscape.com' is valid.
Setting up an update server
<?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:
8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every file that's part o...
... on macos, you can get the exact size of your mar by running the command: stat -f%z <filename> or on linux, the same command would be: stat --format "%s" <filename> starting your update server now, start an update server to serve the update files on port
8000.
...this is the python2 command: python -m simplehttpserver
8000 or, this is the python3 command: python3 -m http.server
8000 if you aren't sure that you started the server correctly, try using a web browser to navigate to http://127.0.0.1:
8000/update.xml and make sure that you get the xml file you created earlier.
... windows/linux: <install dir>/distribution/policies.json macos: <install dir>/contents/resources/distribution/policies.json create the distribution directory, if necessary, and put this in policies.json: { "policies": { "appupdateurl": "http://127.0.0.1:
8000/update.xml" } } now you are ready to update!
Working with ArrayBuffers
this feature is based on the following work: //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#30
80 //github.com/realityripple/uxp/blob/master/js/src/vm/arraybufferobject.cpp#1301 example 1 - image data the following example illustrates how to transfer a byte array pointed by ctypes.uint8_t.ptr to imagedata of canvas.
...])" myimgdat.data.set(casted); the ctypes.cast takes a couple of milliseconds, however, the myimgdat.data.set takes up to
800ms for a size of 52,428,
800 (which is image size of 12
80 x 1024 pixels).
...method b takes ~1400 ms, for an array length of 52,428,
800 (which is image size of 12
80 x 1024 pixels).
...passing an arraybuffer object to pointer type will pass the pointer to buffer (based on //github.com/realityripple/uxp/blob/master/js/src/ctypes/ctypes.cpp#30
80).
Transcoding assets for Media Source Extensions - Web APIs
throughout this tutorial, you'll see the filename trailer_10
80p.mov which is the download.
... $ ffmpeg -i trailer_10
80p.mov -c:v copy -c:a copy bunny.mp4 $ ls bunny.mp4 trailer_10
80p.mov checking fragmentation in order to properly stream mp4, we need the asset to be an iso bmf format mp4.
... fragmenting if you have an asset that is not already an mp4, ffmpeg can handle emitting a properly fragmented mp4 during the transcode process, with the -movflags frag_keyframe+empty_moov command line flag: $ ffmpeg -i trailer_10
80p.mov -c:v copy -c:a copy -movflags frag_keyframe+empty_moov bunny_fragmented.mp4 if you already have an mp4, but it's not properly fragmented, you can again use ffmpeg: $ ffmpeg -i non_fragmented.mp4 -movflags frag_keyframe+empty_moov fragmented.mp4 in both cases, chrome may require an extra movie flag to be set: -movflags frag_keyframe+empty_moov+default_base_moof having a properly fragmen...
... run the following commands (shown with sample output): $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4 encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0 media source: video: resolution=640x360 encoding bitrate: 500, resolution: 256x144 encoding bitrate: 875, resolution: 384x216 encoding bitrate: 1250, resolution: 4
80x270 encoding bitrate: 1625, resolution: 560x316 encoding bitrate: 2000, resolution: 640x360 $ python mp4-dash.py video_0* parsing media file 1: video_00500.mp4 parsing media file 2: video_00875.mp4 parsing media file 3: video_01250.mp4 parsing media file 4: video_01625.mp4 parsing media file 5: video_02000.mp4 splitting media file (audio) video_00500.mp4 splitting media file (video) video_00500.
SubtleCrypto.digest() - Web APIs
sha-1 this algorithm is specified in fips 1
80-4, section 6.1, and produces an output 160 bits long.
... sha-256 this algorithm is specified in fips 1
80-4, section 6.2, and produces an output 256 bits long.
... sha-384 this algorithm is specified in fips 1
80-4, section 6.5, and produces an output 384 bits long.
... sha-512 this algorithm is specified in fips 1
80-4, section 6.4, and produces an output 512 bits long.
TextEncoder.prototype.encodeInto() - Web APIs
totype"]; var globaltextencoder = window["textencoder"]; var globaltextencoderprototype; var globaltextencoderinstance; ////////////////////////////////////////////////////////////////////////////////////// function encoderreplacer(nonasciichars){ // make the utf string into a binary utf-8 encoded string var point = nonasciichars.charcodeat(0)|0; if (0xd
800 <= point && point <= 0xdbff) { var nextcode = nonasciichars.charcodeat(1)|0; // defaults to 0 when nan, causing null replacement character if (0xdc00 <= nextcode && nextcode <= 0xdfff) { //point = ((point - 0xd
800)<<10) + nextcode - 0xdc00 + 0x10000|0; point = (point<<10) + nextcode - 0x35fdc00|0; if (point > 0xffff) ...
... } else return fromcharcode( (0xe/*0b1110*/<<4) | (point>>>12), (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/), (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/) ); } function textencoder(){}; textencoderprototype["encode"] = function(inputstring) { // 0xc0 => 0b11000000; 0xff => 0b11111111; 0xc0-0xff => 0b11xxxxxx // 0x
80 => 0b10000000; 0xbf => 0b10111111; 0x
80-0xbf => 0b10xxxxxx var encodedstring = inputstring === void 0 ?
... "" : ("" + inputstring).replace(/[\x
80-\ud7ff\udc00-\uffff]|[\ud
800-\udbff][\udc00-\udfff]?/g, encoderreplacer); var len=encodedstring.length|0, result = new patchedu8array(len); var i=0; for (; i<len; i=i+1|0) result[i] = encodedstring.charcodeat(i) |0; return result; }; function polyfill_encodeinto(inputstring, u8arr) { var encodedstring = inputstring === void 0 ?
... "" : ("" + inputstring).replace(/[\x
80-\ud7ff\udc00-\uffff]|[\ud
800-\udbff][\udc00-\udfff]?/g, encoderreplacer); var len=encodedstring.length|0, i=0, char=0, read=0, u8arrlen = u8arr.length|0, inputlength=inputstring.length|0; if (u8arrlen < len) len=u8arrlen; putchars: for (; i<len; i=i+1|0) { char = encodedstring.charcodeat(i) |0; switch(char >>> 4) { case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7: read = read + 1|0; // extension points: case 8: case 9: case 10: case 11: break;...
window.postMessage() - Web APIs
the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:
8080") return; // ...
...examples of typical origins are https://example.org (implying port 443), http://example.net (implying port
80), and http://example.com:
8080.
... example /* * in window a's scripts, with a being on <http://example.com:
8080>: */ var popup = window.open(/* popup details */); // when the popup has fully loaded, if not blocked by a popup blocker: // this does nothing, assuming the window hasn't changed its location.
... if (event.origin !== "http://example.com:
8080") return; // event.source is window.opener // event.data is "hello there!" // assuming you've verified the origin of the received message (which // you must do in any case), a convenient idiom for replying to a // message is to call postmessage on event.source and provide // event.origin as the targetorigin.
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
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 12
80x1440 pixels).
... now the width and height of the frame buffer are 50% what they were before, resulting in a total frame buffer size of 12
80 by 720 pixels, with each eye's half of the buffer being 640x720 pixels.
...the result is a rendering context that looks like the diagram below: each time the xrviewerpose's views are iterated over for rendering, the rendering loop obtains an xrview for the left eye which has its top-left corner at (0, 0) with its width and height being 12
80x1440 pixels.
... the right eye it obtains has its top-left corner at 12
80, 0 with the same width and height: 12
80x1440.
Color picker tool - CSS: Cascading Style Sheets
esize='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: 9
80px; } .ui-color-picker { padding: 3px 5px; float: left; border-color: #fff; } .ui-color-picker .switch_mode { display: none; } .ui-color-picker .preview-color:hover { cursor: move; } /** * picker container */ #picker-samples { width: 375px; height: 114px; max-height: 218px; margin: 0 10px 0 30px; overflow: hidden; position: relative; float: left; transition: all 0.2s; } #pick...
...ackground-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-color: #777; } /** * trash can */ #delete { width: 100%; height: 94px; background-color: #ddd; background-image: url('https://mdn.mozillademos.org/files/6025/grain.png'); background-repeat: repeat; text-align: center; color: #777; position: relative; float: right; } #delete #trash-can { width:
80%; height:
80%; border: 2px dashed #fff; border-radius: 5px; background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center; position: absolute; top: 10%; left: 10%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; transition: all 0.2s; } #delete[drag-state='enter'] { background-color: #999; } /** * color theme */ ...
...#color-theme { margin: 0 8px 0 0; border: 1px solid #eee; display: inline-block; float: right; } #color-theme .box { width:
80px; height: 92px; float: left; } /** * color info box */ #color-info { width: 360px; float: left; } #color-info .title { width: 100%; padding: 15px; font-size: 18px; text-align: center; background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png'); background-repeat:no-repeat; background-position: center left 30%; } #color-info .copy-container { position: absolute; top: -100%; } #color-info .property { min-width: 2
80px; height: 30px; margin: 10px 0; text-align: center; line-height: 30px; } #color-info .property > * { float: left; } #color-info .property .type { width: 60px; height: 100%; padding: 0 16px 0 0; text...
...r-radius: 15px; position: absolute; top: 50px; left: 20%; } #canvas[data-tutorial='drop']:after { content: "adjust, change or modify"; width: 40%; font-size: 24px; position: absolute; top: 130px; left: 32%; z-index: 2; } #canvas [data-tutorial='dblclick'] { background-color: #999 !important; } #canvas [data-tutorial='dblclick']:before { content: "double click to activate"; width:
80px; color: #fff; position: absolute; top: 10%; left: 20%; z-index: 2; } #canvas .sample { width: 100px; height: 100px; min-width: 20px; min-height: 20px; position: absolute; border: 1px solid rgba(255, 255, 255, 0.3); } #canvas .sample:hover { cursor: move; } #canvas .sample[data-active='true']:after { content: ""; position: absolute; background: url('https://mdn.mozillademos.org...
Grid template areas - CSS: Cascading Style Sheets
"sd sd sd main main main main main main" "ft ft ft ft ft ft ft ft ft"; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div class="content">content</div> <div class="footer">footer</div> </div> using this method we do not need to specify anything at all on the individual grid items, everything happens on our grid container.
... { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" ".
... { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: minmax(100px, auto); grid-template-areas: "hd hd hd hd hd hd hd hd hd" "sd sd sd main main main main main main" "sd sd sd ft ft ft ft ft ft"; } <div class="wrapper"> <div class="header">header</div> <div class="sidebar">sidebar</div> <div cla...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .header { grid-area: hd; } .footer { grid-area: ft; } .content { grid-area: main; } .sidebar { grid-area: sd; } .wrapper { display: grid; grid-auto-rows: minmax(100px, auto); grid-template-columns: 1fr; grid-template-areas: "hd" "main" "sd" "ft"; } we can then redefine that layout inside media queries to go to our two columns layou...
Using CSS gradients - CSS: Cascading Style Sheets
<div class="multiposition-stops"></div> <div class="multiposition-stop2"></div> div { width: 120px; height: 120px; float: left; margin-right: 10px; box-sizing: border-box; } .multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow
80% ); background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow
80% ); } .multiposition-stop2 { background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); } in the first example above, the lime goes from the 0% mark, w...
... <div class="multi-repeating-linear"></div> div { width: 600px; height: 400px; } .multi-repeating-linear { background: repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px, rgba(255, 153, 0, 0.5)
80px, rgba(255, 255, 0, 0.5) 120px, rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px, rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 2
80px, rgba(255, 0, 0, 0.5) 300px), repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px, rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px, rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px...
..., rgba(75, 0, 130, 0.5) 1
80px, rgba(238, 130, 238, 0.5) 210px, rgba(255, 0, 0, 0.5) 230px), repeating-linear-gradient(23deg, red 50px, orange 100px, yellow 150px, green 200px, blue 250px, indigo 300px, violet 350px, red 370px); } plaid gradient to create plaid we include several overlapping gradients with transparency.
... <div class="repeating-radial"></div> div { width: 120px; height: 120px; } .repeating-radial { background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); } multiple repeating radial gradients <div class="multi-target"></div> div { width: 250px; height: 150px; } .multi-target { background: repeating-radial-gradient(ellipse at
80% 50%,rgba(0,0,0,0.5), rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px, rgba(255,255,255,0.5) 30px) top left no-repeat, repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5), rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px, rgba(255,255,255,0.5) 20px) top left no-repeat yellow; background-size: 200px 200px, 150px 150px; } ...
Linear-gradient Generator - CSS: Cascading Style Sheets
div data-value='px'> pixels (px) </div> <div data-value='%'> percentage (%) </div> </div> <div id="delete-axis" class="button"> delete line </div> </div> <div class="property"> <div class="ui-slider" data-topic="axis-rotation" data-info="rotation" data-min="-1
80" data-value="0" data-max="1
80"></div> </div> </div> <div id="tool-section" class="section"> <div class="title"> tool settings </div> <div class="property"> <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add l...
...ebkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width:
80%; height: 1.6em; margin: 0.3em 0; padding: 0.3em 10%; line-height: 1.6em; } .ui-dropdown-list > div:hover { background: #3490d2; color:#fff; border-radius: 2px; cursor: pointer; } /* * color picker tool */ body { width: 100%; height: 100%; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; -webkit-user-select: none; -ms-user-select...
...xis */ .gradient-axis { width: 125%; height: 4px; margin: -3px 0 0 0; border: 1px solid #ccc; position: absolute; top: 50%; left: 0; opacity: 0.5; } .gradient-axis[data-active='true'] { opacity: 1; z-index: 1; } .gradient-axis:after { content: ""; width: 25px; height: 100%; background-color: #ccc; position: absolute; left: 0; top: 0; } .gradient-axis .gradient-line { width:
80%; height: 100%; margin: 0px auto; position: relative; } .gradient-axis .gradient-line:hover { cursor: pointer; } .gradient-axis .gradient-line:after, .gradient-axis .gradient-line:before { content: ""; width: 1px; height: 100px; background-color: #ccc; position: absolute; top: -48px; } .gradient-axis .gradient-line:after { left: -1px; } .gradient-axis .gradient-line:before { right...
...< size; i++) new slider(elem[i]); }; return { init : init, setvalue : setvalue, subscribe : subscribe, unsubscribe : unsubscribe }; })(); window.addeventlistener("load", function() { lineargradienttool.init(); }); window.addeventlistener("load", function() { lineargradienttool.init(); }); var lineargradienttool = (function lineargradienttool() { 'use strict'; var radian = 1
80 / math.pi; var inv_radian = math.pi / 1
80; var units = {'%': 1, 'px' : 0}; /*========== dom methods ==========*/ function getelembyid(id) { return document.getelementbyid(id); } function allowdropevent(e) { e.preventdefault(); } function createclasselement(tag, classname, parent) { var elem = document.createelement(tag); elem.classname = classname; if (parent) parent.appendc...
font-weight - CSS: Cascading Style Sheets
syntax /* keyword values */ font-weight: normal; font-weight: bold; /* keyword values relative to the parent */ font-weight: lighter; font-weight: bolder; /* numeric keyword values */ font-weight: 100; font-weight: 200; font-weight: 300; font-weight: 400;// normal font-weight: 500; font-weight: 600; font-weight: 700;// bold font-weight:
800; font-weight: 900; /* global values */ font-weight: inherit; font-weight: initial; font-weight: unset; the font-weight property is specified using any one of the values listed below.
... in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700,
800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... inherited value bolder lighter 100 400 100 200 400 100 300 400 100 400 700 100 500 700 100 600 900 400 700 900 400
800 900 700 900 900 700 common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names (see the opentype specification): value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal (regular) 500 medium ...
... 600 semi bold (demi bold) 700 bold
800 extra bold (ultra bold) 900 black (heavy) 950 extra black (ultra black) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping.
Audio and Video Delivery - Developer guides
for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="4
80" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> <!-- fallback for browsers that don't support mp4 --> <source src="videofile.webm" type="video/webm"> <!-- specifying subtitle files --> <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="english"> <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="norwegian"> ...
...<!-- fallback for browsers that don't support video tag --> <a href="videofile.mp4">download video</a> </video> the code above creates a video player of dimensions 640x4
80 pixels, displaying a poster image until the video is played.
... javascript video var myvideo = document.createelement('video'); if (myvideo.canplaytype('video/mp4')) { myvideo.setattribute('src','videofile.mp4'); } else if (myvideo.canplaytype('video/webm')) { myvideo.setattribute('src','videofile.webm'); } myvideo.width = 4
80; myvideo.height = 320; we set the source of the video depending on the type of video file the browser supports we then set the width and height of the video.
... to grab the stream from your webcam, first set up a <video> element: <video id="webcam" width="4
80" height="360"></video> next, if supported connect the webcam source to the video element: if (navigator.mediadevices) { navigator.mediadevices.getusermedia({ video: true, audio: false }) .then(function onsuccess(stream) { var video = document.getelementbyid('webcam'); video.autoplay = true; video.srcobject = stream; }) .catch(function onerror() { alert('there has been a ...
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=320:1
80 -b:v 500k -dash 1 video_320x1
80_500k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm ff...
...mpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=12
80:720 -b:v 1500k -dash 1 video_12
80x720_1500k.webm or do it in all in one command.
... ffmpeg -i in.video -c:v libvpx-vp9 -keyint_min 150 \ -g 150 -tile-columns 4 -frame-parallel 1 -f webm -dash 1 \ -an -vf scale=160:90 -b:v 250k -dash 1 video_160x90_250k.webm \ -an -vf scale=320:1
80 -b:v 500k -dash 1 video_320x1
80_500k.webm \ -an -vf scale=640:360 -b:v 750k -dash 1 video_640x360_750k.webm \ -an -vf scale=640:360 -b:v 1000k -dash 1 video_640x360_1000k.webm \ -an -vf scale=12
80:720 -b:v 1500k -dash 1 video_12
80x720_1500k.webm 2.
... create the manifest file: ffmpeg \ -f webm_dash_manifest -i video_160x90_250k.webm \ -f webm_dash_manifest -i video_320x1
80_500k.webm \ -f webm_dash_manifest -i video_640x360_750k.webm \ -f webm_dash_manifest -i video_12
80x720_1500k.webm \ -f webm_dash_manifest -i my_audio.webm \ -c copy \ -map 0 -map 1 -map 2 -map 3 -map 4 \ -f webm_dash_manifest \ -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ my_video_manifest.mpd the -map arguments correspond to the input files in the sequence they are given; you should have one for each file.
TypeError: invalid assignment to const "x" - JavaScript
const columns =
80; // ...
... const columns =
80; const wide_columns = 120; const, let or var?
... let columns =
80; // ...
... const columns =
80; function setupbigscreenenvironment() { const columns = 120; } const and immutability the const declaration creates a read-only reference to a value.
Array.prototype.sort() - JavaScript
in a numeric sort, 9 comes before
80, but because numbers are converted to strings, "
80" comes before "9" in the unicode order.
... note : in utf-16, unicode characters above \uffff are encoded as two surrogate code units, of the range \ud
800-\udfff.
... var stringarray = ['blue', 'humpback', 'beluga']; var numericstringarray = ['
80', '9', '700']; var numberarray = [40, 1, 5, 200]; var mixednumericarray = ['
80', '9', '700', 40, 1, 5, 200]; function comparenumbers(a, b) { return a - b; } console.log('stringarray:', stringarray.join()); console.log('sorted:', stringarray.sort()); console.log('numberarray:', numberarray.join()); console.log('sorted without a compare function:', numberarray.sort()); console.log('sorted with...
... stringarray: blue,humpback,beluga sorted: beluga,blue,humpback numberarray: 40,1,5,200 sorted without a compare function: 1,200,40,5 sorted with comparenumbers: 1,5,40,200 numericstringarray:
80,9,700 sorted without a compare function: 700,
80,9 sorted with comparenumbers: 9,
80,700 mixednumericarray:
80,9,700,40,1,5,200 sorted without a compare function: 1,200,40,5,700,
80,9 sorted with comparenumbers: 1,5,9,40,
80,200,700 sorting non-ascii characters for sorting strings with non-ascii characters, i.e.
Date.parse() - JavaScript
examples using date.parse() the following calls all return 1546300
800000.
... if ipodate is an existing date object, it can be set to august 9, 1995 (local time) as follows: ipodate.settime(date.parse('aug 9, 1995')); some other examples of parsing non-standard date strings: date.parse('aug 9, 1995'); returns
807937200000 in time zone gmt-0300, and other values in other time zones, since the string does not specify a time zone and is not iso format, therefore the time zone defaults to local.
... date.parse('wed, 09 aug 1995 00:00:00 gmt'); returns
807926400000 no matter the local time zone as gmt (utc) is provided.
... date.parse('wed, 09 aug 1995 00:00:00'); returns
807937200000 in time zone gmt-0300, and other values in other time zones, since there is no time zone specifier in the argument and it is not iso format, so is treated as local.
String.prototype.charCodeAt() - JavaScript
fixedcharcodeat('\ud
800\udc00', 0); // 65536 // ex.
... fixedcharcodeat('\ud
800\udc00', 1); // false idx = idx || 0; var code = str.charcodeat(idx); var hi, low; // high surrogate (could change last hex to 0xdb7f // to treat high private surrogates // as single characters) if (0xd
800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); if (isnan(low)) { throw 'high surrogate not followed by ' + 'low surrogate in fixedcharcodeat()'; } return ( (hi - 0xd
800) * 0x400) + (low - 0xdc00) + 0x10000; } if (0xdc00 <= code && code <= 0xdfff) { // low surrogate // we return false to allow loops to skip // this iteration since should have already handled // high surrogate above in the previous iteration return false; // hi = str.charcodeat(idx - 1); //...
... low = code; // return ((hi - 0xd
800) * 0x400) + // (low - 0xdc00) + 0x10000; } return code; } fixing charcodeat() to handle non-basic-multilingual-plane characters if their presence earlier in the string is known function knowncharcodeat(str, idx) { str += ''; var code, end = str.length; var surrogatepairs = /[\ud
800-\udbff][\udc00-\udfff]/g; while ((surrogatepairs.exec(str)) != null) { var li = surrogatepairs.lastindex; if (li - 2 < idx) { idx++; } else { break; } } if (idx >= end || idx < 0) { return nan; } code = str.charcodeat(idx); var hi, low; if (0xd
800 <= code && code <= 0xdbff) { hi = code; low = str.charcodeat(idx + 1); // go one further, since one of the "characters" // is part of a...
... surrogate pair return ((hi - 0xd
800) * 0x400) + (low - 0xdc00) + 0x10000; } return code; } specifications specification ecmascript (ecma-262)the definition of 'string.prototype.charcodeat' in that specification.
Web audio codec guide - Web media technologies
audio encoder configuration effects on quality and size feature effect on quality effect on size lossless compression no loss of fidelity unlikely to get more than 40-50% compression lossy compression always some loss of fidelity; the higher the compression, the more the loss compression of up to
80-95% possible quality setting the higher the quality, the better the fidelity of the encoded audio the higher the fidelity, the larger the resulting file becomes, though the amount of change varies from codec to codec bit rate the higher the bit rate, the higher the quality can be the higher the bit rate, the larger the encoded file is likely to be audio freq...
... supported bit rates g.722: 48 kbps, 56 kbps, and 64 kbps; however, in practice 64 kbps is always used g.722 annex b super wide-band: 64 kbps,
80 kbps, and 96 kbps g.722 annex d stereo wide-band: 64 kbps and
80 kbps g.722 annex d stereo super wide-band:
80 kbps, 96 kbps, 112 kbps, and 128 kbps variable bit rate (vbr) support no supported sample formats 14-bit integer supported sample rates 16 khz (adpcm is specified to allow 8 khz, 11.025 khz, 22.05 khz, 44.1 khz, but g.722 uses 16 khz) ...
... 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 mode: 8 kbps, 16 kbps, 24 kbps, 32 kbps, 40 kbps, 48 kbps, 56 kbps, 64 kbps,
80 kbps, 96 kbps, 112 kbps, 128 kbps, 144 kbps, 160 kbps variable bit rate (vbr) support yes supported sample formats 16-bit integer supported sample rates mpeg-1 mode: 32000 hz, 44100 h...
...z, 4
8000 hz mpeg-2 mode: 16000 hz, 22050 hz, 24000 hz (half the frequency of the mpeg-1 supported modes) recommended minimum bit rate for stereo sound 128 kbps at 48 khz sample rate compression lossy maximum audio channels mpeg-1 mode: 2 [2.0] mpeg-2 mode: 5 (plus 1 optional low frequency enhancement channel) [5.1] audio frequency bandwidth varies, depending on bit rate and psychoacoustic analysis latency at least 100 ms browser compatibility feature chrome edge firefox internet explorer opera safari mp3 support yes yes yes[1] 9 yes 3.1 contain...
SVG documentation index - SVG: Scalable Vector Graphics
80 font-size svg, svg attribute the font-size attribute refers to the size of the font from baseline to baseline when multiple lines of text are set solid in a multiline layout environment.
... 1
80 rotate animation, experimental, graphics, reference, rotate, svg the rotate attribute specifies how the animated element rotates as it travels along a path specified in an <animatemotion> element.
... 2
80 paths intermediate, svg, svg:tutorial the <path> element is the most powerful element in the svg library of basic shapes.
... 3
80 server configuration svg see http://wiki.svg.org/server_configuration 381 sizing svg this page was auto-generated because a user created a sub-page to this page.
SVG and CSS - SVG: Scalable Vector Graphics
00/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-2
80" y="-270">svg demonstration</text> <text id="caption" x="-2
80" y="-250">move your mouse pointer over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path cl...
... 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(1
80)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segmen...
... 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(162)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" transform="rotate(1
80)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" transform="rotate(198)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segmen...
...e xlink:href="#segment" transform="rotate(18)"/> <use xlink:href="#segment" transform="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g id="petals"> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadrant" transform="rotate(1
80)"/> <use xlink:href="#quadrant" transform="rotate(270)"/> </g> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-2
80" y="-270">svg demonstration</text> <text id="caption" x="-2
80" y="-250">move your...
The Essentials of an Extension - Archive of obsolete content
<em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>4.0</em:minversion> <em:maxversion>10.*</em:maxversion> </description> </em:targetapplication> this node specifies the target application and target versions for the extension, specifically firefox, from version 4 up to version 10.
...our general rule on line length is not having lines longer than
80 characters.
...even old command line editors work well with files that cut their lines at
80 characters.
Modularization techniques - Archive of obsolete content
for those who like gory details, their structure is this: struct nsid { pruint32 m0; pruint16 m1, m2; pruint8 m3[8]; }; frequently you see them represented as strings, like this: {221ffe10-ae3c-11d1-b66c-00
805f8a2676} to initialize an id struct you declare them like this: id = {0x221ffe10, 0xae3c, 0x11d1, {0xb6, 0x6c, 0x00, 0x
80, 0x5f, 0x8a, 0x26, 0x76}}; why the b66c couplet gets broken up and grouped with the last set of bytes is probably a footnote somewhere.
... #include "nsisupports.h" // {57ecad90-ae1a-11d1-b66c-00
805f8a2676} #define ns_isample_iid \ {0x57ecad90, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x
80, 0x5f, 0x8a, 0x26, 0x76}} /* * nsisample interface declaration */ class nsisample: public nsisupports { public: ns_imethod hello() = 0; }; file nssample.h nssample.h defines the class id (cid) for our sample class.
... #include "nsifactory.h" // {d3944dd0-ae1a-11d1-b66c-00
805f8a2676} #define ns_sample_cid \ {0xd3944dd0, 0xae1a, 0x11d1, \ {0xb6, 0x6c, 0x00, 0x
80, 0x5f, 0x8a, 0x26, 0x76}} extern nsresult getsamplefactory(nsifactory **aresult); file nssample.cpp nssample.cpp contains both the declaration and implementation of our sample class, and the declaration and implementation of our class factory.
Learn XPI Installer Scripting by Example - Archive of obsolete content
in the browser.xpi installation, this function appears at line 20: var err = initinstall("netscape seamonkey", "browser", "6.0.0.2000110
807"); if you call a method on the install object before initinstall(), you will get an error.
...in the example above, "netscape seamonkey" is the display name, "browser" is the registry name, and the version is "6.0.0.2000110
807." see initinstall in the xpinstall api reference for more information on the initialization process.
...in the browser.xpi install script, the files are added in lines 26-41: err = adddirectory("program", "6.0.0.2000110
807", "bin", // jar source folder communicatorfolder, // target folder "", // target subdir true ); // force flag logcomment("adddirectory() returned: " + err); // create the plugins folder next to mozilla var pluginsfolder = getfolder("plugins"); if (!fileexists(plu...
2006-11-24 - Archive of obsolete content
he is using make 3.
80, working with the source tarball for xulrunner 1.8.4,running "make -f client.mk distclean" followed by "make -f client.mk build_all".
..."component returned failure code: 0x
80570016 (ns_error_xpc_gs_returned_failure) [nsijscid.getservice]" nsresult: "0x
80570016 (ns_error_xpc_gs_returned_failure)" location: "js frame :: chrome://modzilla/content/js/pkg_zillacom.js :: <top_level> :: line 1202" data: no] he is running xulrunner v1.8.0.4.
... luke wants to know if compiling xulrunner with a static crt is better or worse than compiling with the mscvr
80.dll dependency.
Grid Lines - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } lines can be addressed using their line number.
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 100px; } .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } naming lines the lines created in the explicit grid can be named, by adding the name in square brackets before or after t...
... * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } <div class="wrapper"> <div class="item">item</div> </div> .wrapper { display: grid; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end]; grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end]; } .item { grid-column-start: col1-start; grid-column-end: col3-start; grid-row-start: row1-start; grid-row-end: rows-end; } lear...
Responsive design - Learn web development
for example, the following media query tests to see if the current web page is being displayed as screen media (therefore not a printed document) and the viewport is at least
800 pixels wide.
... @media screen and (min-width:
800px) { .container { margin: 1em 2em; } } you can add multiple media queries within a stylesheet, tweaking your whole layout or parts of it to best suit the various screen sizes.
...if you've got a narrow screen layout that kicks in at 4
80px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile.
What is a URL? - Learn web development
let's see the most important parts using the following url: http://www.example.com:
80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthedocument http is the protocol.
... :
80 is the port.
...it is usually omitted if the web server uses the standard ports of the http protocol (
80 for http and 443 for https) to grant access to its resources.
Chrome registration
this example shows how a different overlay can be used for different applications: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec
8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com appversion extensions may install into multiple versions of an application.
...see bug 3
80398.
... necko en-us jar:en-us.jar!/locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/ locale pipnss en-us jar:en-us.jar!/locale/pipnss/ # firefox-only overlay chrome://browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={ec
8030f7-c20a-464f-9b0e-13a3a9e97384} # seamonkey-only overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefoverlay.xul content pippki jar:pippki.jar!/content/pippki/ locale pippki en-us ...
Using the viewport meta tag to control layout on mobile browsers
for example, if a mobile screen has a width of 640px, pages might be rendered with a virtual viewport of 9
80px, and then it will be shrunk down to fit into the 640px space.
... enter viewport meta tag however, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 9
80px for example, media queries that kick in at 640px or 4
80px or less will never be used, limiting the effectiveness of such responsive design techniques.
...for example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—10
80 pixels (~400 dpi).
NSS 3.14.2 release notes
new types: in certt.h cert_pi_useonlytrustanchors in secoidt.h sec_oid_ms_ext_key_usage_ctl_signing notable changes in nss 3.14.2 bug
805604 - support for aes-ni and avx accelerated aes-gcm was contributed by shay gueron of intel.
...if 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.mozilla.org/show_bug.cgi?id=
805604 and https://crypto.stanford.edu/realworldcrypto/slides/gueron.pdf).
... bug
807890 - added support for microsoft trust list signing eku.
NSS 3.32 release notes
cn = addtrust class 1 ca root sha-256 fingerprint: 8c:72:09:27:9a:c0:4e:27:5e:16:d0:7f:d3:b7:75:e8:01:54:b5:96:
80:46:e3:1f:52:dd:25:76:63:24:e9:a7 cn = swisscom root ca 2 sha-256 fingerprint: f0:9b:12:2c:71:14:f4:a0:9b:d4:ea:4f:4a:99:d5:58:b4:6e:4c:25:cd:81:14:0d:29:c0:56:13:91:4c:38:41 the following ca certificates were removed: cn = addtrust public ca root sha-256 fingerprint: 07:91:ca:07:49:b2:07:82:aa:d3:c7:d7:bd:0c:df:c9:48:58:35:84:3e:b2:d7:99:60:09:...
...ce:43:ab:6c:69:27 cn = addtrust qualified ca root sha-256 fingerprint:
80:95:21:08:05:db:4b:bc:35:5e:44:28:d8:fd:6e:c2:cd:e3:ab:5f:b9:7a:99:42:98:8e:b8:f4:dc:d0:60:16 cn = china internet network information center ev certificates root sha-256 fingerprint: 1c:01:c6:f4:db:b2:fe:fc:22:55:8b:2b:ca:32:56:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-256 fingerprint: e2:83:93:77:3d:a8:45:a6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:6a:8d:99:ae:a7 cn = comsign secured ca sha-256 fingerprint: 50:79:41:c7:44:60:a0:b4:70:86:22:0d:4e:99:32:57:2a:b5:d1:b5:bb:cb:89:
80:ab:1c:b1:76:51:a8:44:d2 cn = geotrust global ca 2 sha-256 fingerprint: ca:2d:82:a0:86:77:0...
...7:2f:8a:b6:76:4f:f0:35:67:6c:fe:3e:5e:32:5e:01:21:72:df:3f:92:09:6d:b7:9b:85 cn = secure certificate services sha-256 fingerprint: bd:81:ce:3b:4f:65:91:d1:1a:67:b5:fc:7a:47:fd:ef:25:52:1b:f9:aa:4e:18:b9:e3:df:2e:34:a7:
80:3b:e8 cn = swisscom root ca 1 sha-256 fingerprint: 21:db:20:12:36:60:bb:2e:d4:18:20:5d:a1:1e:e7:a8:5a:65:e2:bc:6e:55:b5:af:7e:78:99:c8:a2:66:d9:2e cn = swisscom root ev ca 2 sha-256 fingerprint: d9:5f:ea:3c:a4:ee:dc:e7:4c:d7:6e:75:fc:6d:1f:f6:2c:44:1f:0f:a8:bc:77:f0:34:b1:9e:5d:b2:58:01:5d cn = trusted certificate services sha-256 fingerprint: 3f:06:e5:56:81:d4:96:f5:be:16:9e:b5:38:9f:9f:2b:8f:f6:1e:17:08:df:68:81:72:48:49:cd:5d:27:cb:69 cn = utn-userfirst-hardware s...
NSS_3.12.3_release_notes.html
backwards compatibility (wildcards) bug 334678: prng_fips1861.c redefines the macro bsize on hp-ux bug 335016: mpp_pprime (miller-rabin probabilistic primality test) may choose 0 or 1 as the random integer bug 347037: make shlibsign depend on the softoken only bug 371522: auto-update of crls stops after first update bug 3
80784: pk11mode in non fips mode failed.
... bug 464406: fix signtool regressions bug 465270: uninitialised value in devutil.c::create_object() bug 465273: dead assignment in devutil.c::nssslotarray_clone() bug 465926: during import of pkcs #12 files bug 4661
80: ssl_configmpserversidcache with default parameters fails on {net bug 466194: cert_decodetruststring should take a const char * input trusts string.
... bug 478931: object leak in pkix_list_mergelists function bug 478994: allow softoken's fork check to be disabled bug 479029: ocsp response signature cert found invalid if issuer is trusted only for ssl bug 479601: wrong type (utf8 string) for email addresses in subject by cert_asciitoname bug 4
80142: use sizeof on the correct type of ckc_x509 in lib/ckfw bug 4
80257: ocsp fails when response > 1k byte bug 4
802
80: the cka_ec_point pkcs#11 attribute is encoded in the wrong way: missing encapsulating octet string bug 4
80442: remove (empty) watcomfx.h from nss bug 481216: fix specific spelling errors in nss bug 482702: ocsp test with revoked ca cert validated as good.
nsINetworkLinkService
as of gecko 28.0 android support is available again, see bug 9396
80.
... link_type_wifi 3 a connection via a wifi access point (ieee
802.11).
... link_type_wimax 4 a connection via wimax (ieee
802.16).
nsISocketTransport
constant value description status_resolving 0x
804b0003 transport is resolving the host.
... status_resolved 0x
804b000b transport has resolved the host.
... status_connecting_to 0x
804b0007 status_connected_to 0x
804b0004 status_sending_to 0x
804b0005 status_waiting_for 0x
804b000a status_receiving_from 0x
804b0006 connection flags values for the connectionflags attribute constant value description bypass_cache 0 when making a new connection bypass_cache will force the necko dns cache entry to be refreshed with a new call to nspr if it is set before opening the new stream.
nsIZipWriter
d slash is '/') detail: this azipentry is very important, this example demonstrates its usage: var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var myzipfile = fu.file('c:\\myzipfile.zip'); //this file will be creatd in c drive var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x
80}; zw.open(xpi, pr.pr_wronly | pr.pr_create_file | pr.pr_truncate); //xpi file is created if not there, if it is there it is truncated/deleted var filetoaddtozip = fileutils.file('c:\\add this file.txt'); var saveinzipas = 'blah.txt'; zw.addentryfile(saveinzipas, ci.nsizipwriter.compression_none, filetoaddtozip, false); in the above example, the file ("add this file.txt") located at "c:\add thi...
...s is a comment."; zipw.close(); pr_rdwr and friends are constants that are not in any interface (see bug 433295), so for the code above to work you need something like: const pr_rdonly = 0x01; const pr_wronly = 0x02; const pr_rdwr = 0x04; const pr_create_file = 0x08; const pr_append = 0x10; const pr_truncate = 0x20; const pr_sync = 0x40; const pr_excl = 0x
80; see pr_open documentation or file i/o snippets for details.
... var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x
80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifi...
nsMsgMessageFlags
offline 0x000000
80 indicates whether or not we have this message in the offline cache.
... queued 0x00000
800 indicates whether or not the message is queued to be delivered.
... mdnreportsent 0x00
800000 indicates whether or not a delivery receipt was sent.
Network request list - Firefox Developer Tools
(starting in firefox
80) on the right edge of the file column, a turtle icon appears if the server waiting time exceeds a threshhold (default: 500 ms).
... note: (starting in firefox
80) you can also block and unblock urls from the web console, using the :block and :unblock helper commands.
... remote-ip:63.245.215.53 remote-ip:[2400:cb00:2048:1::6810:2
802] cause shows resources matching a specific cause type.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
html <canvas id="canvas"></canvas> javascript // define canvas and context const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // define the points as {x, y} let start = { x: 50, y: 20 }; let cp1 = { x: 230, y: 30 }; let cp2 = { x: 150, y:
80 }; let end = { x: 250, y: 100 }; // cubic bézier curve ctx.beginpath(); ctx.moveto(start.x, start.y); ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(start.x, start.y, 5, 0, 2 * math.pi); // start point ctx.arc(end.x, end.y, 5, 0, 2 * math.pi); // end point ctx.fill(); // control poi...
...the first control point is placed at (120, 160), and the second at (1
80, 10).
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 1
80,10, 220,140); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
Basic animations - Web APIs
hr - 12 : hr; ctx.fillstyle = 'black'; // write hours ctx.save(); ctx.rotate(hr * (math.pi / 6) + (math.pi / 360) * min + (math.pi / 21600) *sec); ctx.linewidth = 14; ctx.beginpath(); ctx.moveto(-20, 0); ctx.lineto(
80, 0); ctx.stroke(); ctx.restore(); // write minutes ctx.save(); ctx.rotate((math.pi / 30) * min + (math.pi / 1
800) * sec); ctx.linewidth = 10; ctx.beginpath(); ctx.moveto(-28, 0); ctx.lineto(112, 0); ctx.stroke(); ctx.restore(); // write seconds ctx.save(); ctx.rotate(sec * math.pi / 30); ctx.strokestyle = '#d40000'; ctx.fillstyle = '#d40000'; ctx.linewidth = 6;...
... img.src = 'https://mdn.mozillademos.org/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasxsize =
800; var canvasysize = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale; imgh = img.height * scale; if (imgw > canvasxsize) { // image larger than canvas x = canvasxsize - imgw; ...
... <canvas id="canvas" width="
800" height="200"></canvas> mouse following animation <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script> var cn; //= document.getelementbyid('cw'); ...
Detecting device orientation - Web APIs
the deviceorientationevent.beta value represents the motion of the device around the x axis, represented in degrees with values ranging from -1
80 to 1
80.
...} now, if we move our device, the ball will move accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var output = document.queryselector('.output'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-1
80,1
80] var y = event.gamma; // in degree in the range [-90,90] output.innerhtml = "beta : " + x + "\n"; output.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make computation easier we shift the range of // x and y to [0,1
80] x...
... += 90; y += 90; // 10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/1
80 - 10) + "px"; ball.style.left = (maxx*x/1
80 - 10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers.
HTMLElement - Web APIs
htmlelement.oncopy returns the event handling code for the copy event (bug 2
80959).
... htmlelement.oncut returns the event handling code for the cut event (bug 2
80959).
... htmlelement.onpaste returns the event handling code for the paste event (bug 2
80959).
MediaStreamTrack.applyConstraints() - Web APIs
it specifies that the page or web app needs a width between 640 and 12
80 and a height between 4
80 and 720, with the later number in each pair being preferred.
... the advanced property further specifies that an image size of 1920 by 12
80 is the preferred or an aspect ratio of 1.333 if that is not available.
... const constraints = { width: {min: 640, ideal: 12
80}, height: {min: 4
80, ideal: 720}, advanced: [ {width: 1920, height: 12
80}, {aspectratio: 1.333} ] }; navigator.mediadevices.getusermedia({ video: true }) .then(mediastream => { const track = mediastream.getvideotracks()[0]; track.applyconstraints(constraints) .then(() => { // do something with the track such as using the image capture api.
Using the Media Capabilities API - Web APIs
const videoconfiguration = { type: "file", video: { contenttype: "video/webm;codecs=vp8", width:
800, height: 600, bitrate: 10000, framerate: 15 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const audioconfiguration = { type: "file", audio: { contenttype: "audio/...
...elect id="codec"> <option>video/webm; codecs=vp8</option> <option>video/webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>76
80x4320</option> <option>3840x2160</option> <option>2560x1440</option> <option>1920x10
80</option> <option>12
80x720</option> <option selected>
800x600</option> <option>640x4
80</option> <option>320x240</option> <option value=" x ">none</option> </select> </li> <li> <label for="framerate">select a framerate</label> <select id="framerate"> ...
... <option>60</option> <option>50</option> <option>30</option> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>
800</option> </select> </li> </ul> <p><input type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video: { contenttype: document...
Screen.lockOrientation() - Web APIs
a screen is considered in its secondary portrait mode if the device is held 1
80° from its normal position and that position is in portrait, or if the normal position of the device is in landscape and the device held is turned by 90° anticlockwise.
...a screen is considered in its secondary landscape mode if the device held is 1
80° from its normal position and that position is in landscape, or if the normal position of the device is in portrait and the device held is turned by 90° anticlockwise.
...for example, if the panel resolution is 12
80*
800, default will make it landscape, if the resolution is
800*12
80, default will make it to portrait.
SubtleCrypto.encrypt() - Web APIs
aes-ctr this represents aes in counter mode, as specified in nist sp
800-38a.
... aes-cbc this represents aes in cipher block chaining mode, as specified in nist sp
800-38a.
... aes-gcm this represents aes in galois/counter mode, as specified in nist sp
800-38d.
Writing WebSocket servers - Web APIs
for example, let's assume that your server is listening on example.com, port
8000, and your socket server responds to get requests at example.com/chat.
... warning: the server may listen on any port it chooses, but if it chooses any port other than
80 or 443, it may have problems with firewalls and/or proxies.
...the client will send a pretty standard http request with headers that looks like this (the http version must be 1.1 or greater, and the method must be get): get /chat http/1.1 host: example.com:
8000 upgrade: websocket connection: upgrade sec-websocket-key: dghlihnhbxbszsbub25jzq== sec-websocket-version: 13 the client can solicit extensions and/or subprotocols here; see miscellaneous for details.
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
human eyes typically have a horizontal field of view of around 135° (about 2.356 radians) and a vertical fov of about 1
80° (π or around 3.142 radians).
... the following function returns a projection perspective matrix that integrates the specified field of view angle as well as the given near and far clipping plane distances: function createperspectivematrix(viewport, fovdegrees, nearclip, farclip) { const fovradians = fov * (math.pi / 1
80.0); const aspectratio = viewport.width / viewport.height; const transform = mat4.create(); mat4.perspective(transform, fovradians, aspectratio, nearclip, farclip); return transform; } after converting the fov angle, fovdegrees, from degrees to radians and computing the aspect ratio of the xrviewport specified by the viewport parameter, this function uses the glmatrix ...
...dividing this into two parts—half for each eye—results in each eye's view being drawn at a resolution of 12
80x1440 pixels.
Advanced techniques: Creating and sequencing audio - Web APIs
initial oscillator we'll set up our first oscillatornode the same way as our sweep sound, except we won't use a wavetable to set a bespoke wave — we'll just use the default sine wave: let osc = audioctx.createoscillator(); osc.type = 'sine'; osc.frequency.value = 8
80; now we're going to create a gainnode, as it's the gain value that we will oscillate with our second, low frequency oscillator: let amp = audioctx.creategain(); amp.gain.setvalueattime(1, audioctx.currenttime); creating the second, low frequency, oscillator we'll now create a second — square — wave (or pulse) oscillator, to alter the amplification of our first sine wave: let lfo = audioc...
...one will change the tone and the other will change how the pulse modulates the first wave: <label for="hz">hz</label> <input name="hz" id="hz" type="range" min="660" max="1320" value="8
80" step="1" /> <label for="lfo">lfo</label> <input name="lfo" id="lfo" type="range" min="20" max="40" value="30" step="1" /> as before, we'll vary the parameters when the range input values are changed by the user.
... let pulsehz = 8
80; const hzcontrol = document.queryselector('#hz'); hzcontrol.addeventlistener('input', function() { pulsehz = number(this.value); }, false); let lfohz = 30; const lfocontrol = document.queryselector('#lfo'); lfocontrol.addeventlistener('input', function() { lfohz = number(this.value); }, false); the final playpulse() function here's the entire playpulse() function: let pulsetime = 1; function playpulse() { let osc = audioctx.createoscillator(); osc.type = 'sine'; osc.frequency.setvalueattime(pulsehz, audioctx.currenttime); let amp = audioctx.creategain(); amp.gain.setvalueattime(1, audioctx.currenttime); let lfo = audioctx.createoscillator(); lfo.type = 'square'; lfo.frequency.setvalueattime(lfohz, audioctx.currenttime); l...
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
between the cards, i use a margin on the items, and then a negative margin on the container: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } <div class="wrapper"> <ul> <li class="card"><h2>one</h2> <p>we can use css grid to overwrite older methods.</p> </li> <li class="card"><h2>two</h2> ...
...the layout now works, even if there is more content in one of the cards, than the others: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper ul { overflow: hidden; margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { float: left; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li { width...
...y does not apply to grid items and, therefore, is ignored once the item becomes a grid item: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; max-width: 600px; margin: 0 auto; } .wrapper li { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper ul { margin: 0 -10px; padding: 0; list-style: none; } .wrapper li { display: inline-block; vertical-align: top; width: calc(33.333333% - 20px); margin: 0 10px 20px 10px; } @supports (display: grid) { .wrapper ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; margin: 0; } .wrapper li {...
Using media queries - CSS: Cascading Style Sheets
for instance, the following rule will apply its styles if the user's device has either a minimum height of 6
80px or is a screen device in portrait mode: @media (min-height: 6
80px), screen and (orientation: portrait) { ...
... } taking the above example, if the user had a printer with a page height of
800px, the media statement would return true because the first query would apply.
... likewise, if the user were on a smartphone in portrait mode with a viewport height of 4
80px, the second query would apply and the media statement would still return true.
font - CSS: Cascading Style Sheets
set the font family to sans-serif */ p { font: 12px/14px sans-serif } /* set the font size to
80% of the parent element or default value (if no parent element present).
... set the font family to sans-serif */ p { font:
80% sans-serif } /* set the font weight to bold, the font-style to italic, the font size to large, and the font family to serif.
...</div> <br/><br/><br/><br/><br/><br/> css body, input { font: 14px arial; overflow: hidden; } .propinputcont { 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:...
<gradient> - CSS: Cascading Style Sheets
<div class="linear-gradient">linear gradient</div> div { width: 240px; height:
80px; } .linear-gradient { background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); } radial gradient example a simple radial gradient.
... <div class="radial-gradient">radial gradient</div> div { width: 240px; height:
80px; } .radial-gradient { background: radial-gradient(red, yellow, rgb(30, 144, 255)); } repeating gradient examples simple repeating linear and radial gradient examples.
... <div class="linear-repeat">repeating linear gradient</div> <br> <div class="radial-repeat">repeating radial gradient</div> div { width: 240px; height:
80px; } .linear-repeat { background: repeating-linear-gradient(to top left, lightpink, lightpink 5px, white 5px, white 10px); } .radial-repeat { background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px); } conic gradient example a simple conic gradient example.
linear-gradient() - CSS: Cascading Style Sheets
the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 1
80deg, 270deg, and 90deg, respectively.
... note also that the first example above does not exactly render as depicted in mozilla firefox (particularly version
80.0b3).
... body { width: 100vw; height: 100vh; } body { background: linear-gradient(to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60%
80%, blue
80%); } more linear-gradient examples please see using css gradients for more examples.
offset-path - CSS: Cascading Style Sheets
syntax /* default */ offset-path: none; /* function values */ offset-path: ray(45deg closest-side contain); /* url */ offset-path: url(#path); /* shapes */ offset-path: circle(50% at 25% 25%); offset-path: inset(50% 50% 50% 50%); offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%); offset-path: path('m 0,200 q 200,200 260,
80 q 290,20 400,0 q 300,100 400,200'); /* geometry boxes */ offset-path: margin-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css grad...
...="595" y="423" width="610" height="377" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,
800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" ...
... transform="translate(0,0)" fill="forestgreen" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> </svg> css .scissorhalf { offset-path: path('m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,
800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status comment motion path module level 1the definition of 'offset-path' in that specification.
rotate() - CSS: Cascading Style Sheets
a rotation by 1
80° is called point reflection.
... on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 cos(a)-sin(a) sin(a)cos(a) cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
...ate">rotated + translated</div> <div class="translate-rotate">translated + rotated</div> css div { position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(1
80px); } .translate-rotate { background-color: gold; transform: translatex(1
80px) rotate(45deg); } result specifications specification status comment css transforms level 1the definition of 'rotate()' in that specification.
Audio and video manipulation - Developer guides
html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="4
80" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="4
80" height="270"></canvas> javascript this code handles altering the frames.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="4
80" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> var myvideo ...
...pt var context = new audiocontext(), audiosource = context.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); // configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="4
80" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="play...
HTML documentation index - HTML: Hypertext Markup Language
80 <code>: the inline code element code, element, html, html text-level semantics, inline code, reference, web the html <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.
... 1
80 <rb>: the ruby base element element, html, html text-level semantics, reference, ruby, text, web the html ruby base (<rb>) element is used to delimit the base text component of a <ruby> annotation, i.e.
...the html2 specification recommended that it should be rendered wide enough to allow
80 characters per line.
A typical HTTP session - HTTP
with tcp the default port, for an http server on a computer, is port
80.
... other ports can also be used, like
8000 or
8080.
... the url of a page to fetch contains both the domain name, and the port number, though the latter can be omitted if it is
80.
Digital audio concepts - Web media technologies
the most common sample rates are:
8000 hz the international g.711 standard for audio used in telephony uses a sample rate of
8000 hz (8 khz).
... 4
8000 hz the audio on dvd is recorded at 48 khz.
... for example, consider a stereo audio clip (that is, two audio channels) with a sample size of 16 bits (2 bytes), recorded at 48 khz: 2×2bytessample×4
8000samplessecond=192000bytessecond=192kbps2 \times 2\frac { bytes }{ sample } \times 4
8000\frac { samples }{ second } = 192000\frac { bytes }{ second } = 192 kbps at 192 kbps, lower-end networks are already going to be strained just by a single audio stream playing.
Mobile first - Progressive web apps (PWAs)
volo has a number of useful commands available, of which we will just use a couple: volo server: starts a local web server at localhost:
8080 and runs your app through it: great for easy testing.
...ite; top: 0.5em; } #bottom { bottom: 0.5em; } i also set their parents to be positioned relatively, so they would become the positioning contexts of the absolutely positioned elements (you don't want them to be positioned relative to the <body> element.) adding a mobile first layout the above layout is fine for narrower layouts, but it doesn't work very well when you get wider than about 4
80px.
... to create something more suitable for desktop, i put in the following media queries: @media (min-width: 4
80px) { #bottom, #top { display: none; } article, nav { display: block; } nav ul { text-align: center; } nav li { display: inline; } nav li a { border-right: 1px solid #ad66d5; border-bottom: none; display: inline-block; padding: 0 5px; font-size: 1.6em; } nav li:last-child a { border-right: none; } } @media (min-width: 600px) { html { background: #eee; height: 100%; } body { width: 600px; height: inherit; margin: 0 auto; background: url(../img/firefox-os.png) bottom left no-repeat, linear-gradient(to bottom, #fff, #eee); } .main > p { background: rgba(255,255,255,0.3); ...
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
when the reference orientation direction is horizontal and the glyph-orientation-horizontal results in an orientation angle that is a multiple of 1
80 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... otherwise, if the value of this attribute is not a multiple of 1
80 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> context notes value <angle> default value 0deg animatable no <angle> the value of the angle is restricted to 0, 90, 1
80, and 270 degrees.
glyph-orientation-vertical - SVG: Scalable Vector Graphics
when the inline-progression-direction is vertical and the glyph-orientation-vertical results in an orientation angle that is a multiple of 1
80 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
... otherwise, if the angle is not a multiple of 1
80 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
... <angle> the value of the angle is restricted to 0, 90, 1
80, and 270 degrees.
<feComponentTransfer> - SVG: Scalable Vector Graphics
<lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-color="#0000ff"></stop> <stop offset="1" stop-color="#
8000
80"></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%" hei...
...></fefuncr> <fefuncg type="gamma" amplitude="4" exponent="4" offset="0"></fefuncg> <fefuncb type="gamma" amplitude="4" exponent="1" offset="0"></fefuncb> </fecomponenttransfer> </filter> </defs> <g font-weight="bold"> <text x="0" y="20">default</text> <rect x="0" y="30" width="100%" height="20"></rect> <text x="0" y="70">identity</text> <rect x="0" y="
80" width="100%" height="20" style="filter:url(#identity)"></rect> <text x="0" y="120">table lookup</text> <rect x="0" y="130" width="100%" height="20" style="filter:url(#table)"></rect> <text x="0" y="170">discrete table lookup</text> <rect x="0" y="1
80" width="100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="2...
...30" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="2
80" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="
80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operat...
...or="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="
80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="middle" x="2
80" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="2
80" cy="
80" r="50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme...
...3"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="
80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="
80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status comment filter effects module level 1the definition of '<fediffuselighting>' in that specification.
<metadata> - SVG: Scalable Vector Graphics
ink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m0,0 s 10 10 40 12"/> <path d="m
80,0 s 70 10 40 12"/> <path d="m0,20 l 10 10 s 40 12 70 10 l
80 20z"/> </g> <g id="monitor"> <title>monitor</title> <desc>a very fancy monitor</desc> <rect width="160" height="120"/> <rect fill="lightgrey" width="138" height="95" x="11" y="12"/> </g> <g id="processor" transform="translate(0 142)"> <title>the computer</title> ...
...--> <g id="hub" transform="translate(
80 45)"> <title>hub</title> <use xlink:href="#hub" transform="scale(0.75)"/> </g> <!-- use the computer symbol.
...--> <g id="cableb" transform="translate(142 88)"> <title>cable b</title> <desc>10baset twisted pair cable</desc> <path d="m0,0c100,1
80 110,160 159,160"/> </g> <!-- draw cable n.
Basic shapes - SVG: Scalable Vector Graphics
10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> <polyline points="60 110 65 120 70 115 75 130
80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 1
80 70 1
80 60 190 65 205 50 195 35 205 40 190 30 1
80 45 1
80" stroke="green" fill="transparent" stroke-width="5"/> <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> </svg> note: the stroke, stroke-width, and fill attributes are ex...
...since the list of points can get quite long, all the points are included in one attribute: <polyline points="60, 110 65, 120 70, 115 75, 130
80, 125 85, 140 90, 135 95, 150 100, 145"/> points a list of points.
... <polygon points="50, 160 55, 1
80 70, 1
80 60, 190 65, 205 50, 195 35, 205 40, 190 30, 1
80 45, 1
80"/> points a list of points, each number separated by a space, comma, eol, or a line feed character.
Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="160" height="2
80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60
80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140
80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="40 220
80 1
80 120 220" stroke="black" stroke...
... css can be inserted inline with the element via the style attribute: <rect x="10" height="1
80" y="10" width="1
80" style="stroke: black; fill: red;"/> or it can be moved to a special style section that you include.
... <?xml version="1.0" standalone="no"?> <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <style type="text/css"><![cdata[ #myrect { stroke: black; fill: red; } ]]></style> </defs> <rect x="10" height="1
80" y="10" width="1
80" id="myrect"/> </svg> moving styles to an area like this can make it easier to adjust properties on large groups of elements.
Extension Versioning, Update and Compatibility - Archive of obsolete content
df:seq> <!-- each li is a different version of the same add-on --> <rdf:li> <rdf:description> <em:version>2.2</em:version> <!-- this is the version number of the add-on --> <!-- one targetapplication for each application the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version -...
...-> <em:updateinfourl>http://www.mysite.com/updateinfo2.2.xhtml</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf:li> <rdf:description> <em:version>2.5</em:version> <em:targetapplication> <rdf:description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <em:updatelink>http://www.mysite.com/foobar2.5.xpi</em:updatelink> <em:updatehash>sha256:78fc1d2887eda35b4ad2e3a0b60120ca271ce6e64ad2e3a0b60120ca271ce6e6</em:updatehash> </rdf:description> </em:target...
Install Manifests - Archive of obsolete content
examples <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!--firefox--> <em:minversion>1.5</em:minversion> <em:maxversion>3.0.*</em:maxversion> </description> </em:targetapplication> gecko 1.9 based applications allow you to use the special targetapplication id toolkit@mozilla.org to say that the add-on is compatible with any toolkit app with a toolkit version matching the minversion and maxversion.
... <em:updatekey>migfma0gcsqgsib3dqebaquaa4gnadcbiqkbgqdk426erd/h3xtsjvab5+pjqbhj zc9edi5ocjs8r3fiobj9zhjk1txeae7jwqt9wumbwtefvws+fi9vwu
8058n9chhd nyep6i4luuyjturnn7yw/igzyij2oksya32ruxayteqawqpt/j63wbixiecxmysf awb/zh4kapiy3vnrzqidaqab</em:updatekey> updateurl a link to a custom update manifest file that specifies available updates to the add-on.
Extensions support in SeaMonkey 2 - Archive of obsolete content
in javascript code you can use the following technique to detect the application: const firefox_id = "{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) ...
...you can use the application flag to select which overlay should be used with which application: overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffoverlay.xul application={ec
8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} ...
Creating a status bar extension - Archive of obsolete content
> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> <em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> let's take a look at some key parts of the manifest.
..."{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}" is a guid that uniquely identifies firefox as the target.
Makefile.mozextension.2 - Archive of obsolete content
me://browser/content/browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec
8030f7-c20a-464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape browser {3db10fab-e461-4c
80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w3.org...
... you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/ga...
Plug-n-Hack Phase1 - Archive of obsolete content
for example: var manifest = {"detail":{"url":"http://localhost:
8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions.
... an example manifest (for owasp zap) is: { "toolname":"owasp zap", "protocolversion":"0.2", "features":{ "proxy":{ "pac":"http://localhost:
8080/proxy.pac", "cacert":"http://localhost:
8080/other/core/other/rootcert/" }, "commands":{ "prefix":"zap", "manifest":"http://localhost:
8080/other/mitm/other/service/" } } } the top level manifest includes optional links to a proxy pac and a root ca certificate.
Table Cellmap - Archive of obsolete content
79 // this union relies on the assumption that an object (not primitive type) does
80 // not start on an odd bit boundary.
... row span #define row_span_0 0x00000004 // the row span is 0 #define row_span_offset 0x0000fff8 // the row offset to the data containing the original cell #define col_span 0x00010000 // there is a col span #define col_span_0 0x00020000 // the col span is 0 #define overlap 0x00040000 // there is a row span and col span but no by same cell #define col_span_offset 0xfff
80000 // the col offset to the data containing the original cell #define row_span_shift 3 // num bits to shift to get right justified row span #define col_span_shift 19 // num bits to shift to get right justified col span showing that there is a span, this span is a colspan and the colspan origin is one cell away.
Table Layout Regression Tests - Archive of obsolete content
24,24,4824,552 node 1: tablecolgroup(table)(144) 0x
80010004 24,24,4776,552, |null attr|-16777216|left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto...
... 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null node 2: tablecolgroup(table)(144) 0x
80010004 24,24,4824,552, |null attr|-16777216|left: null top: null right: null bottom: null left: null top: null right: null bottom: null left: 1[0x1]enum top: 1[0x1]enum right: 1[0x1]enum bottom: 1[0x1]enum left: null top: null right: null bottom: null left: null top: null right: null bottom: null 1[0x1]enum 0|1 1 [none]|left: auto top: auto right: auto bottom: auto auto 0[0x0]tw null auto 0[0x0]tw null 0 auto |0 0 0 normal normal 0[0x0]tw normal |0 12 1,000000 0 0 0 0 0 0 0 0 0 0 0 [none]|0 0 0 -1 1 |0 0 0 null frame bbox mismatch: 0,0,2400,552 vs.
Table Layout Strategy - Archive of obsolete content
one would expect the first column to be
80 px and the second to be 120 px .
...the second table has <col width="33%"><col> lets return to the first case but now but with more than 100%: <col width="40%"><col width="
80%"><tbody></tbody>foobar <col width="40%"><col><tbody></tbody>foobar <table border width="200px"> <col width="40%"><col width="
80%"> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> the algorithm tries to satisfy the requirements on a first come first serve base.
right - Archive of obsolete content
for example, using right="-
80" causes the stack to be enlarged
80 pixels to the right and the element's right edge to be at the same location as the right edge of the stack.
... in other words, the right edge of the element is placed
80 pixels to the right of where the right edge of the stack was prior to the element being added.
Using nsIXULAppInfo - Archive of obsolete content
const firefox_id = "{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}"; const thunderbird_id = "{3550f703-e582-4d05-9a08-453d09bdfdc6}"; const seamonkey_id = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}"; var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); if(appinfo.id == firefox_id) { // running under firefox } else if(appinfo.id == thunderbird_id) ...
...see bug
809920, and in summary: // work around the fact that xpcshell doesn't have a proper app-info xpcom object.
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> ...
... <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </item> <item> <title>some bold html</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </item> </channel> </rss> the <content:encoded> element is the reason that the rss content module...
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:comments>43</slash:comments> </item> <item> <title>what is the 3571st prime number</title> <guid>d77d2e
80-0487-4e8c-a35d-...
...a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:comments>72</slash:comments> </item> <item> <title>first article!</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
he well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:article:54320</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500...
...</pubdate> <link>http://www.example.com/article/54320</link> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e
80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed web rss module is popular.
SSL and TLS - Archive of obsolete content
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/sp
800-57-part1.pdf.
TCP/IP Security - Archive of obsolete content
another good source of information is nist sp
800-52, guidelines on the selection and use of transport layer security, available from https://csrc.nist.gov/publications/nistpubs/.) the use of tls typically requires each application to support tls; however, unlike application layer controls, which typically involve extensive customization of the application, transport layer controls such as tls are much less intrusive because they do not need to...
... original document information author(s): sheila frankel, paul hoffman, angela orebaugh, and richard park title: national institute of standards and technology (nist) special publication
800-113, guide to ssl vpns last updated date: july 2008 copyright information: this document is not subject to copyright.
Threats - Archive of obsolete content
link: red hat certificate system common criteria certification 8.1: deployment, planning, and installation original document information author(s): joint task force transformation initiative title: national institute of standards and technology (nist) special publication
800-30 revision 1, guide for conducting risk assessments last updated date: september 2012 copyright information: this document is not subject to copyright.
... original document information author(s): karen scarfone, wayne jansen, and miles tracy title: national institute of standards and technology (nist) special publication
800-123, guide to general server security last updated date: july 2008 copyright information: this document is not subject to copyright.
Building a Theme - Archive of obsolete content
--> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:description>a test extension</em:description> <em:creator>your name here</em:creator> <em:home...
... {ec
8030f7-c20a-464f-9b0e-13a3a9e97384} - firefox's application id.
Browser Detection and Cross Browser Support - Archive of obsolete content
'20020
801' for august 1, 2002).
... = 1; for (var i = 0; i < rvparts.length; i++) { var val = parseint(rvparts[i]); rvvalue += val / exp; exp *= 100; } return rvvalue; } // determine if the browser is any gecko // branch >= 1.0.1 or netscape 6.2.x/compuserve 7 // built after august 1, 2002 var rv = geckogetrv(); var found = false; if (rv >= 0) { // gecko browser if (navigator.productsub > '20020
801') { if (rv >= 1.0001) { found = true; } else if (rv >= 0.0904 && rv < 0.0905) { if (navigator.vendor == 'netscape6' || navigator.vendor == 'cs 2000 7.0') { found = true; } } } } example 4 - the international herald-tribune this site illustrates many of the techniques described in this article.
Troubleshooting XForms Forms - Archive of obsolete content
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 2
80368 respectively.
...if you are developing on your local machine using apache tomcat for example then add the following regular expression on a new line: ^http://localhost:
8080/.* use the xforms buddy to view instance data the xforms buddy extension allows you to dynamically view model instance data while the xforms is running in the firefox browser.
Windows Media in Netscape - Archive of obsolete content
netscape 7.1 works with both windows media player 6.4 and with windows media players 7 and 9, but they have unique classids: windows media player 6.4 has this classid:22d6f312-b0f6-11d0-94ab-00
80c74c7e95 windows media players 7 and 9 have this classid: 6bf52a52-394a-11d3-b153-00c04f79faa6 windows media player 6.4 and windows media player 7 and up are not backwards compatible in terms of apis (and thus have different classids).
...f code that illustrates the use of classids with geckoactivexobject: function creategeckowmpobject(clid) { var player = null; try { player = new geckoactivexobject(clid); } catch(e) { ; } return player; } // instantiate players wmp7or9 = creategeckowmpobject("{6bf52a52-394a-11d3-b153-00c04f79faa6}"); if (!wmp7or9) { wmp64 = creategeckowmpobject("{22d6f312-b0f6-11d0-94ab-00
80c74c7e95}"); } .....
Mobile touch controls - Game development
the initialization of virtual joystick looks like this: this.pad = this.game.plugins.add(phaser.virtualjoystick); this.stick = this.pad.addstick(30, 30,
80, 'generic'); in the create() function of the game state we're creating a virtual pad and a generic stick that has four directional virtual buttons by default.
... this is placed 30 pixels from the top and left edges of the screen and is
80 pixels wide.
Create the Canvas and draw on it - Game development
ite text editor, create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev canvas workshop</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="mycanvas" width="4
80" height="320"></canvas> <script> // javascript code goes here </script> </body> </html> we have a charset defined, <title> and some basic css in the header.
...the <canvas> element has an id of mycanvas to allow us to easily grab a reference to it, and it is 4
80 pixels wide and 320 pixels high.
Client-side form validation - Learn web development
ppearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* this is our style for the invalid fields */ input:invalid{ border-color: #900; background-color: #fdd; } input:focus:invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size:
80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } now lets look at the javascript that implements the custom error validation.
...ppearance: none; width: 100%; border: 1px solid #333; margin: 0; font-family: inherit; font-size: 90%; box-sizing: border-box; } /* this is our style for the invalid fields */ input.invalid{ border-color: #900; background-color: #fdd; } input:focus.invalid { outline: none; } /* this is the style of our error messages */ .error { width : 100%; padding: 0; font-size:
80%; color: white; background-color: #900; border-radius: 0 0 5px 5px; box-sizing: border-box; } .error.active { padding: 0.3em; } the big changes are in the javascript code, which needs to do much more heavy lifting.
HTML table basics - Learn web development
tables are very commonly used in human society, and have been for a long time, as evidenced by this us census document from 1
800: it is therefore no wonder that the creators of html provided a means by which to structure and present tabular data on the web.
... name mass (1024kg) diameter (km) density (kg/m3) gravity (m/s2) length of day (hours) distance from sun (106km) mean temperature (°c) number of moons notes terrestial planets mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 closest to the sun venus 4.87 12,104 5243 8.9 2
802.0 108.2 464 0 earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 our world mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 the red planet jovian planets gas giants jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 the largest planet saturn 568 120,536 687 9.0 1...
Index - Learn web development
80 silly story generator arrays, assessment, beginner, codingscripting, javascript, learn, numbers, operators, variables, l10n:priority, strings in this assessment you'll be tasked with taking some of the knowledge you've picked up in this module's articles and applying it to creating a fun app that generates random silly stories.
... 2
80 ember app structure and componentization beginner, components, ember, frameworks, javascript, learn, client-side great!
Drawing graphics - Learn web development
function degtorad(degrees) { return degrees * math.pi / 1
80; }; next, start off your path by adding the following below your previous addition; here we set a color for our triangle, start drawing a path, and then move the pen to (50, 50) without drawing anything.
... now add the following code to the bottom of the javascript: function degtorad(degrees) { return degrees * math.pi / 1
80; }; function rand(min, max) { return math.floor(math.random() * (max-min+1)) + (min); } let length = 250; let moveoffset = 20; for(var i = 0; i < length; i++) { } here we are implementing the same degtorad() function we saw in the triangle example above, a rand() function that returns a random number between given lower and upper bounds, length and moveoffset variables (which we'll find ...
Fetching data from the server - Learn web development
now load the index file in your browser (via localhost:
8000) and look in your browser developer console.
...the object url will be visible inside the address bar, and should be something like this: blob:http://localhost:7
800/9b75250e-5279-e249-884f-d03eb1fd84f4 challenge: an xhr version of the can store we'd like you to try converting the fetch version of the app to use xhr as a useful bit of practice.
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.4
80759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
...add the following code to your example, again inside window.onload: l.marker([53.4
80759, -2.242631], { icon: l.mapquest.icons.marker({ primarycolor: '#22407f', secondarycolor: '#3b5998', shadow: true, size: 'md', symbol: 'a' }) }) .bindpopup('this is manchester!') .addto(map); as you can see, this at its simplest takes two parameters, an array containing the coordinates at which to display the marker, and an options object containing an icon property that...
Getting started with Vue - Learn web development
98% after emitting copyplugin done compiled successfully in 18121ms app running at: - local: <http://localhost:
8080/> - network: <http://192.168.1.9:
8080/> note that the development build is not optimized.
... if you navigate to the “local” address in a new browser tab (this should be something like http://localhost:
8080 as stated above, but may vary based on your setup), you should see your app.
Setting up your own test automation environment - Learn web development
accesskey can be generated from automation dashboard or profile section const key = '{accesskey}'; // gridurl: gridurl can be found at automation dashboard const grid_host = 'hub.lambdatest.com/wd/hub'; function searchtextongoogle() { // setup input capabilities const capabilities = { platform: 'windows 10', browsername: 'chrome', version: '67.0', resolution: '12
80x
800', network: true, visual: true, console: true, video: true, name: 'test 1', // name of the test build: 'nodejs build' // name of the build }; // url: https://{username}:{accesstoken}@hub.lambdatest.com/wd/hub const gridurl = 'https://' + username + ':' + key + '@' + grid_host; // setup and build selenium driver object const driver = new we...
... give it the following contents: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; // input capabilities let capabilities = { 'browsername' : 'firefox', 'browser_version' : '56.0 beta', 'os' : 'os x', 'os_version' : 'sierra', 'resolution' : '12
80x1024', 'browserstack.user' : 'your-user-name', 'browserstack.key' : 'your-access-key', 'browserstack.debug' : 'true', 'build' : 'first build' }; let driver = new webdriver.builder().
Creating a Login Manager storage module
some work has already been done to integrate the login manager with the mac os x keychain (bug 106400) and gnome keyring manager (bug 309
807).
... { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmiturl, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug 309
807 contains a complete example.
Creating reftest-based unit tests
if the bitmaps resulting from displaying the two files in an
800x1000 window are identical, the test passes.
...sorry about this, but the released builds and the nightly builds are built with the "--disable-tests" option and reftest will not work - see bug 369
809.
Debugging on Windows
ns|promise)[^\:]*[ss]tring.* ...add common functions to this list should probably make a .reg file for easy importing obtaining stdout and other file handles running the following command in the command window in visual studio returns the value of stdout, which can be used with various debugging methods (such as nsgenericelement::list) that take a file* param: debug.evaluatestatement {,,msvcr
80d}(&__iob_func()[1]) (alternatively you can evaluate {,,msvcr
80d}(&__iob_func()[1]) in the quickwatch window) similarly, you can open a file on the disk using fopen: >debug.evaluatestatement {,,msvcr
80d}fopen("c:\\123", "w") 0x10311dc0 { ..snip..
... } >debug.evaluatestatement ((nsgenericelement*)0x03f0e710)->list((file*)0x10311dc0, 1) <void> >debug.evaluatestatement {,,msvcr
80d}fclose((file*)0x10311dc0) 0x00000000 note that you may not see the debugging output until you flush or close the file handle.
Linux compatibility matrix
.04 lts 3.13 2.19 2.40 2.24 3.10 0.30 4.8.2 4.4, 4.6, 4.7, 4.8 3.3, 3.4, 3.5, 3.6, 3.8, 3.9 n/a apr 2014 apr 2019 ubuntu 16.04 lts 4.4 2.23 2.48 2.24 3.18 0.33 5.3 4.7, 4.8, 4.9, 5.3 3.5, 3.6, 3.7, 3.8, 3.9, 4.0 3.5 apr 2016 apr 2024 ubuntu 18.04 lts 4.15 2.27 2.56 2.24 3.22.30 0.34 8-201
80414 7.3 3.9, 4.0, 5.0, 6.0 3.6 apr 2018 apr 2023 / apr 2028 (lts) ubuntu 20.04 lts 5.3 2.31 2.64 2.24 3.24.18 0.38 10-20200411 9.3.0 6.0, 7.0, 8.0, 9.0, 10.0 3.8 apr 2020 apr 2025 / apr 2030 (lts) suse sle-11-sp4 3.0 2.11 2.22 2.18 n/a 0.24 4.8.3 4.3, 5.3 3.1 n/a mar 2009 mar 2019 / mar 2022 (l...
... yellow backgrounds denote compatibility with esr78 green backgrounds denote compatibility with the current release (as of writing, 78) greener backgrounds denote compatibility with the current mozilla-central (as of writing,
80).
How to implement a custom autocomplete search component
const ci = components.interfaces; const cu = components.utils; cu.import('resource://gre/modules/xpcomutils.jsm'); const class_id = components.id('x753d830-ba1e-11e0-962b-0
800200c9a66'); // ← change this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocompleteresult} * * @param {string} searchstring * @param {number} searchresult * @param {number} defaultindex * @param {string} errordescription * @param {array.<string>} results * @param {a...
...to do so put the following declaration in your chrome.manifest file: component {x753d830-ba1e-11e0-962b-0
800200c9a66} components/basic_autocomplete.js contract @mozilla.org/autocomplete/search;1?name=basic-autocomplete {x753d830-ba1e-11e0-962b-0
800200c9a66} and finally use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="basic-autocomplete"/> that's it!
OS.File.Info
| does not represent anything } else { // some other error } } ) example: determining the owner of a file let promise = os.file.stat() promise.then( function onsuccess(info) { if ("unixowner" in info) { // info.unixowner holds the owner of the file } else { // information is not available on this platform } } ); evolution of this example bug
802534 will introduce the ability to check whether field unixowner appears in os.file.info.prototype, which will make it possible to write faster code.
... creationdate deprecated in bugzilla :: bug
807875.
Localization and Plurals
48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, … plural rule #6 (3 forms) families: baltic (lithuanian) ends in 1, excluding 11: 1, 21, 31, 41, 51, 61, 71, 81, 91, 101, 121, 131, 141, 151, 161, 171, 181, 191, 201, 221, 231, 241, 251, 261, 271, 281, 291, … ends in 0 or ends in 11-19: 0, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 30, 40, 50, 60, 70,
80, 90, 100, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 130, 140, 150, 160, 170, 1
80, 190, 200, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, … everything else: 2, 3, 4, 5, 6, 7, 8, 9, 22, 23, 24, 25, 26, 27, 28, 29, 32, 33, 34, 35, 36, 37, 38, 39, 42, 43, 44, 45, 46, 47, 48, 49, 52, 53, 54, 55, 56, 57, 58, 59, 62, 63, 64, 65, 66, 67, 68, 69, 72, 73, … plural rule #7 (3 fo...
... ends in 000000: 1000000, 2000000, 3000000, 4000000, 5000000, 6000000, 7000000,
8000000, 9000000, 10000000, ...
Mozilla Quirks Mode Behavior
give form a margin-bottom:1em (bug 41
806).
... obsolete since gecko 10.0 however, html5 requires this behavior, and starting in gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7), this also works in standards mode (bug
80784, bug 93077).
DMD
for example: unreported { 420,010 blocks in heap block record 2 of 5,495 29,203,408 bytes (27,777,288 requested / 1,426,120 slop) individual block sizes: 2,048 x 3; 1,024 x 103; 512 x 147; 496 x 7; 4
80 x 31; 464 x 6; 448 x 50; 432 x 41; 416 x 28; 400 x 53; 384 x 43; 368 x 216; 352 x 141; 336 x 58; 320 x 104; 304 x 5,130; 288 x 150; 272 x 591; 256 x 6,017; 240 x 1,372; 224 x 93; 208 x 488; 192 x 1,919; 176 x 18,903; 160 x 1,754; 144 x 5,041; 128 x 36,709; 112 x 5,571; 96 x 6,2
80;
80 x 40,738; 64 x 37,925; 48 x 78,392; 32 x 136,199; 16 x 31,001; 8 x 4,706 3.78% of the heap (10.24% cumulative) ...
...eported at { #01: mozilla::dmd::dmdfuncs::report(void const*) (/home/njn/moz/mi5/go64dmd/memory/replace/dmd/../../../../memory/replace/dmd/dmd.cpp:1646) #02: windowsmallocsizeof(void const*) (/home/njn/moz/mi5/dom/base/nswindowmemoryreporter.cpp:189) #03: nsattrandchildarray::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/nsattrandchildarray.cpp:8
80) #04: mozilla::dom::fragmentorelement::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmentorelement.cpp:2337) #05: nsinode::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::nodetype() const (/home/njn/moz/mi5/go64dmd/dom/base/../../di...
Leak-hunting strategies and tips
because (1) large graphs of leaked objects tend to include some objects pointed to by global variables that confuse gc-based leak detectors, which can make leaks look smaller (as in bug 991
80) or hide them completely and (2) large graphs of leaked objects tend to hide smaller ones, it's much better to go after the large graphs of leaks first.
...--jesse) dropping a reference on the floor by: forgetting to release (because you weren't using nscomptr when you should have been): see bug 991
80 or bug 93087 for an example or bug 28555 for a slightly more interesting one.
Profiling with the Firefox Profiler
if you want 90mb use 10000000, and 20000000 for 1
80mb, which are good values to debug long startups.
... access cleopatra from your web browser by loading the page localhost:
8000, and upload run.symb.cleo to render the profile with most of the symbol information.
PRTimeParameters
in pst, the local time is 8 hours behind gmt, so tp_gmt_offset is -28
800 seconds.
...this is broken down as -8 + 1 hours, so tp_gmt_offset is -28
800 seconds, and tp_dst_offset is 3600 seconds.
HTTP delegation
http://ocsp.provider.com:
80/cgi-bin/ocsp-responder if nss needs to access a http server, it will request that an "http server session object" be created (sec_httpserver_createsessionfcn).
... the http server session object is logically associated with host and port destination information, in our example this is "host ocsp.provider.com port
80".
HTTP delegation
http://ocsp.provider.com:
80/cgi-bin/ocsp-responder if nss needs to access a http server, it will request that an "http server session object" be created (sec_httpserver_createsessionfcn).
... the http server session object is logically associated with host and port destination information, in our example this is "host ocsp.provider.com port
80".
4.3 Release Notes
release date: 01 april 2009 introduction network security services for java (jss) 4.3 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 32
80 compliant certificate path validation library pkcs11 needslogin method support hmacsha256, hmacsha384, and hmacsha512 support for all nss 3.12 initialization options jss 4.3 is tri-licensed under mpl 1.1/gpl 2.0/lgpl 2.1.
... libpkix: an rfc 32
80 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha256, hmacsha384, and hmacsha512 (see hmactest.java) support for all nss 3.12 initialization options (see initializationvalues) new ssl error codes (see http://mxr.mozilla.org/security/sour...util/sslerrs.h) ssl_error_unsupported_extension_alert ssl_error_certifi...
NSS_3.12.1_release_notes.html
bug 430916: add sustaining asserts bug 431
805: leak in nssarena_destroy() bug 431929: memory leaks on error paths in devutil.c bug 432303: replace pkix_pl_memcpy with memcpy bug 433177: fix the gcc compiler warnings in lib/util and lib/freebl bug 433437: vfychain ignores the -a option bug 433594: crash destroying ocsp cert id [[@ cert_destroyocspcertid ] bug 434099: nss relies on unchecked pkcs#11 object attribute values bug 4...
...34187: fix the gcc compiler warnings in nss/lib bug 434398: libpkix cannot find issuer cert immediately after checking it with ocsp bug 434
808: certutil -b deadlock when importing two or more roots bug 434860: coverity 1150 - dead code in ocsp_createcertid bug 436428: remove unneeded assert from sec_pkcs7encryptlength bug 436430: make nss public headers compilable with no_nspr_10_support defined bug 436577: uninitialized variable in sec_pkcs5createalgorithmid bug 438685: libpkix doesn't try all the issuers in a bridge with multiple certs bug 438876: signtool is still using static libraries.
NSS_3.12.2_release_notes.html
bug 432260: [[@ pkix_pl_httpdefaultclient_hdrcheckcomplete - pkix_pl_memcpy] crashes when there is no content-length header in the http response bug 436599: pkix: aia extension is not used in some bridge ca / known certs configuration bug 437
804: certutil -r for cert renewal should derive the subject from the cert if none is specified.
... bug 456854: cert_decodecertpackage does not set nspr error code upon error bug 4579
80: hundreds of kilobytes of useless strings in libpkix bug 457984: enable pkcs11 module logging in optimized builds bug 458905: memory leaks in pkix bridge certificates.
NSS 3.14.1 release notes
bug
802429 - in previous versions of nss, the "cipherorder" slot configuration flag was not respected, causing the most recently added slot that supported the requested pkcs#11 mechanism to be used instead.
... bug
802429 - the nss softoken is now the default token for sha-256 and sha-512.
NSS 3.25 release notes
the following ca certificate was removed cn = sonera class1 ca sha-256 fingerprint: cd:
80:82:84:cf:74:6f:f2:fd:6e:b5:8a:a1:d5:9c:4a:d4:b3:ca:56:fd:c6:27:4a:89:26:a7:83:5f:32:31:3d the following ca certificates were added cn = hellenic academic and research institutions rootca 2015 sha-256 fingerprint: a0:40:92:9a:02:ce:53:b4:ac:f4:f2:ff:c6:98:1c:e4:49:6f:75:5e:6d:45:fe:0b:2a:69:2b:cd:52:52:3f:36 cn = hellenic academic and research institution...
...s ecc rootca 2015 sha-256 fingerprint: 44:b5:45:aa:8a:25:e6:5a:73:ca:15:dc:27:fc:36:d2:4c:1c:b9:95:3a:06:65:39:b1:15:82:dc:48:7b:48:33 cn = certplus root ca g1 sha-256 fingerprint: 15:2a:40:2b:fc:df:2c:d5:48:05:4d:22:75:b3:9c:7f:ca:3e:c0:97:
80:78:b0:f0:ea:76:e5:61:a6:c7:43:3e cn = certplus root ca g2 sha-256 fingerprint: 6c:c0:50:41:e6:44:5e:74:69:6c:4c:fb:c9:f8:0f:54:3b:7e:ab:bb:44:b4:ce:6f:78:7c:6a:99:71:c4:2f:17 cn = opentrust root ca g1 sha-256 fingerprint: 56:c7:71:28:d9:8c:18:d9:1b:4c:fd:ff:bc:25:ee:91:03:d4:75:8e:a2:ab:ad:82:6a:90:f3:45:7d:46:0e:b4 cn = opentrust root ca g2 sha-256 fingerprint: 27:99:58:29:fe:6a:75:15:c1:bf:e8:48:f9:c4:76:1d:b1:6c:22:59:29:25:7b:f4:0d:08:94:f2:9e:a8:ba:f2...
NSS 3.27 release notes
:8f:f8:8b:aa:86:3b:22:64:be:fa:c8:07:90:15:74:e9:39 cn = ebg elektronik sertifika hizmet sağlayıcısı sha-256 fingerprint: 35:ae:5b:dd:d8:f7:ae:63:5c:ff:ba:56:82:a8:f0:0b:95:f4:84:62:c7:10:8e:e9:a0:e5:29:2b:07:4a:af:b2 cn = s-trust authentication and encryption root ca 2005:pn sha-256 fingerprint: 37:d8:dc:8a:f7:86:78:45:da:33:44:a6:b1:ba:de:44:8d:8a:
80:e4:7b:55:79:f9:6b:f6:31:76:8f:9f:30:f6 o = verisign, inc., ou = class 1 public primary certification authority sha-256 fingerprint: 51:84:7c:8c:bd:2e:9a:72:c9:1e:29:2d:2a:e2:47:d7:de:1e:3f:d2:70:54:7a:20:ef:7d:61:0f:38:b8:84:2c o = verisign, inc., ou = class 2 public primary certification authority - g2 sha-256 fingerprint: 3a:43:e2:20:fe:7f:3e:a9:65:3d...
...:1e:21:74:2e:ac:2b:75:c2:0f:d8:98:03:05:bc:50:2c:af:8c:2d:9b:41:a1 o = verisign, inc., ou = class 3 public primary certification authority sha-256 fingerprint: e7:68:56:34:ef:ac:f6:9a:ce:93:9a:6b:25:5b:7b:4f:ab:ef:42:93:5b:50:a2:65:ac:b5:cb:60:27:e4:4e:70 o = equifax, ou = equifax secure certificate authority sha-256 fingerprint: 08:29:7a:40:47:db:a2:36:
80:c7:31:db:6e:31:76:53:ca:78:48:e1:be:bd:3a:0b:01:79:a7:07:f9:2c:f1:78 cn = equifax secure ebusiness ca-1 sha-256 fingerprint: cf:56:ff:46:a4:a1:86:10:9d:d9:65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1...
NSS 3.41 release notes
r1 sha-256 fingerprint: 2a575471e31340bc21581cbd2cf13e158463203ece94bcf9d3cc196bf09a5472 cn = gts root r2 sha-256 fingerprint: c45d7bb08e6d67e62e4235110b564e5f78fd92ef058c840aea4e6455d7585c60 cn = gts root r3 sha-256 fingerprint: 15d5b8774619ea7d54ce1ca6d0b0c403e037a917f131e8a04e1e6b7a71babce5 cn = gts root r4 sha-256 fingerprint: 71cca5391f9e794b04
802530b363e121da8a3043bb26662fea4dca7fc951a4bd cn = uca global g2 root sha-256 fingerprint: 9bea11c976fe014764c1be56a6f914b5a560317abd9988393382e5161aa0493c cn = uca extended validation root sha-256 fingerprint: d43af9b35473755c9684fc06d7d8cb70ee5c28e773fb294eb41ee71722924d24 the following ca certificates were removed: cn = ac raíz certicámara s.a.
... sha-256 fingerprint: a6c51e0da5ca0a9309d2e4c0e40c2af9107aae8203857fe198e3e769e343085c cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd54
8054d2275b39c7fca3ec097
8078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f
80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad826a90f3457d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1bfe848f9c4761db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.41 bug 1412829, reject empty supported_signa...
NSS 3.46 release notes
for cryptographic primitives (cve-2019-17006) bug 1542077 - mp_set_ulong and mp_set_int should return errors on bad values bug 1572791 - read out-of-bounds in der_decodetimechoice_util from sslexp_delegatecredential bug 1560593 - cleanup.sh script does not set error exit code for tests that "failed with core" bug 1566601 - add wycheproof test vectors for aes-kw bug 1571316 - curve25519_32.c:2
80: undefined reference to `pr_assert' when building nss 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560
806 - increase softoken password max size to 500 characters bug 1568776 - output paths relative to repository in nss cov...
...bug 1561332 - ec.c:28 warning: comparison of integers of different signs: 'int' and 'unsigned long' bug 1564714 - print certutil commands during setup bug 1565013 - hacl image builder times out while fetching gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568
803 - more tests for client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 - add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs f...
NSS 3.47 release notes
o rfc maximum) hkdf outputs bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 15
80286 - nss rejects tls 1.2 records with large padding with sha384 hmac bug 1577448 - create additional nested s/mime test messages for thunderbird bug 1399095 - allow nss-try to be used to test nspr changes bug 1267894 - libssl should allow selecting the order of cipher suites in clienthello bug 1581507 - fix unportable grep expression in test scripts bug 1234830 - [cid 1242894][cid 1242852] u...
...nused values bug 15
80126 - fix build failure on aarch64_be while building freebl/gcm bug 1385039 - build nspr tests as part of nss continuous integration bug 1581391 - fix build on openbsd/arm64 after bug #1559012 bug 1581041 - mach-commands -> mach-completion bug 1558313 - code bugs found by clang scanners.
NSS 3.50 release notes
added nist sp
800-108 kbkdf - pkcs#11 implementation.
... bugs fixed in nss 3.50 bug 1599514 - update dtls 1.3 implementation to draft-30 bug 1603438 - fix native tools build failure due to lack of zlib include dir if external bug 1599603 - nist sp
800-108 kbkdf - pkcs#11 implementation bug 1606992 - cache the most recent pbkdf1 password hash, to speed up repeated sdr operations, important with the increased kdf iteration counts.
NSS 3.54 release notes
39d764af9e1b766e9c972df352ee15cfac227af6ad1d70e8e4a6edcba02 bug 1641716 - microsoft rsa root certificate authority 2017 sha-256 fingerprint: c741f70f4b2a8d88bf2e71c14122ef53ef10eba0cfa5e64cfa20f418853073e0 the following ca certificates were removed: bug 1645199 - addtrust class 1 ca root sha-256 fingerprint: 8c7209279ac04e275e16d07fd3b775e
80154b596
8046e31f52dd25766324e9a7 bug 1645199 - addtrust external ca root sha-256 fingerprint: 687fa451382278fff0c8b11f8d43d576671c6eb2bceab413fb83d965d06d2ff2 bug 1641718 - luxtrust global root 2 sha-256 fingerprint: 54455f7129c20b1447c418f997168f24c58fc5023bf5da5be2eb6e1dd8902ed5 bug 1639987 - staat der nederlanden root ca - g2 ...
... bug 1642
802 - add uint128 support for hacl* curve25519 on windows.
nss tech note3
/* x.509 v3 key usage extension flags */ #define ku_digital_signature (0x
80) /* bit 0 */ #define ku_non_repudiation (0x40) /* bit 1 */ #define ku_key_encipherment (0x20) /* bit 2 */ #define ku_data_encipherment (0x10) /* bit 3 */ #define ku_key_agreement (0x08) /* bit 4 */ #define ku_key_cert_sign (0x04) /* bit 5 */ #define ku_crl_sign (0x02) /* bit 6 */ #define ns_cert_type_ssl...
..._client (0x
80) /* bit 0 */ #define ns_cert_type_ssl_server (0x40) /* bit 1 */ #define ns_cert_type_email (0x20) /* bit 2 */ #define ns_cert_type_object_signing (0x10) /* bit 3 */ #define ns_cert_type_reserved (0x08) /* bit 4 */ #define ns_cert_type_ssl_ca (0x04) /* bit 5 */ #define ns_cert_type_email_ca (0x02) /* bit 6 */ #define ns_cert_type_object_signing_ca (0x01) /* bit 7 */ </x> ...
Python binding for NSS
stants were added: nss.certdb_terminal_record nss.certdb_valid_peer nss.certdb_trusted nss.certdb_send_warn nss.certdb_valid_ca nss.certdb_trusted_ca nss.certdb_ns_trusted_ca nss.certdb_user nss.certdb_trusted_client_ca nss.certdb_govt_approved_ca ssl.srtp_aes128_cm_hmac_sha1_32 ssl.srtp_aes128_cm_hmac_sha1_
80 ssl.srtp_null_hmac_sha1_32 ssl.srtp_null_hmac_sha1_
80 ssl.ssl_ck_des_192_ede3_cbc_with_md5 ssl.ssl_ck_des_64_cbc_with_md5 ssl.ssl_ck_idea_128_cbc_with_md5 ssl.ssl_ck_rc2_128_cbc_export40_with_md5 ssl.ssl_ck_rc2_128_cbc_with_md5 ssl.ssl_ck_rc4_128_export40_with_md5 ssl.ssl_ck_rc4_128_with_md5 ssl.ssl_fortezza_dms_with_fortezza_c...
...elease date 2009-06-04 scm tag source download change log general modifications: import to mozilla cvs, tweak directory layout release 0.2.0 release date 2009-05-21 scm tag source download change log general modifications: apply patch from red hat bug #472
805, (miloslav trmač) don't allow closing a socket twice, that causes crashes.
JS_GetGCParameter
see also mxr id search for js_getgcparameter mxr id search for js_setgcparameter bug 474
801 jsgc_bytes jsgc_number bug 474497 jsgc_max_code_cache_bytes this option no-longer exists js_getgcparameterforthread js_setgcparameterforthread bug 624229 jsgc_mode bug 631733 jsgc_unused_chunks bug 6744
80 jsgc_total_chunks bug 641025 jsgc_slice_time_budget bug 673551 jsgc_mark_stack_limit bug 765435 ...
... jsgc_high_frequency_time_limit jsgc_high_frequency_low_limit jsgc_high_frequency_high_limit jsgc_high_frequency_heap_growth_max jsgc_high_frequency_heap_growth_min jsgc_low_frequency_heap_growth jsgc_dynamic_heap_growth jsgc_dynamic_mark_slice bug
800063 jsgc_allocation_threshold bug 871005 jsgc_decommit_threshold this option is no-longer exists bug 1017141 jsgc_min_empty_chunk_count jsgc_max_empty_chunk_count ...
Introduction to XPCOM for the DOM
the use of xpcom and nscomptr's described in this document covers about
80% of what you need to know to read the dom code, and even write some.
... the use of xpcom and nscomptr's described until now covers about
80% of what you need to know to read the code, and even write some.
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="9
80,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstr...
...="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="
803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat operator[] first beginwriting endwriting setlength length isempty setisvoid isvoid assign ...
nsIDOMEvent
mousedown 0x00000001 mouseup 0x00000002 mouseover 0x00000004 mouseout 0x00000008 mousemove 0x00000010 mousedrag 0x00000020 click 0x00000040 dblclick 0x000000
80 keydown 0x00000100 keyup 0x00000200 keypress 0x00000400 dragdrop 0x00000
800 focus 0x00001000 blur 0x00002000 select 0x00004000 change 0x0000
8000 reset 0x00010000 submit 0x00020000 scroll 0x00040000 load 0x00...
...0
80000 unload 0x00100000 xfer_done 0x00200000 abort 0x00400000 error 0x00
800000 locate 0x01000000 move 0x02000000 resize 0x04000000 forward 0x0
8000000 help 0x10000000 back 0x20000000 text 0x40000000 alt_mask 0x00000001 control_mask 0x00000002 shift_mask 0x00000004 meta_mask 0x00000008 methods violates the xpcom interface guidelines deserialize() boolean deserialize( in constipcmessageptr amsg, out voidptr aiter ); parameters amsg aiter return value native code only!duplicateprivatedata void duplicateprivatedata(...
nsIURI
a port value of -1 corresponds to the protocol's default port (for example -1 implies port
80 for http uris).
...for example, comparing "http://foo.com:
80/" and "http://foo.com/" will return true.
XPCOM primitive
isupportsprimitive { attribute print32 data; string tostring(); }; print64 nsisupportsprint64 @mozilla.org/supports-print64;1 [scriptable, uuid(e3cb0ff0-4a1c-11d3-9890-006008962422)] interface nsisupportsprint64 : nsisupportsprimitive { attribute print64 data; string tostring(); }; float nsisupportsfloat @mozilla.org/supports-float;1 [scriptable, uuid(abeaa390-4ac0-11d3-baea-00
805f8a5dd7)] interface nsisupportsfloat : nsisupportsprimitive { attribute float data; string tostring(); }; double nsisupportsdouble @mozilla.org/supports-double;1 [scriptable, uuid(b32523a0-4ac0-11d3-baea-00
805f8a5dd7)] interface nsisupportsdouble : nsisupportsprimitive { attribute double data; string tostring(); }; voidptr nsisupportsvoid @mozilla.org/supports-void;1 [scriptab...
...le, uuid(464484f0-568d-11d3-baf8-00
805f8a5dd7)] interface nsisupportsvoid : nsisupportsprimitive { [noscript] attribute voidptr data; string tostring(); }; nsisupports nsisupportsinterfacepointer @mozilla.org/supports-interface-pointer;1 [scriptable, uuid(995ea724-1dd1-11b2-9211-c21bdd3e7ed0)] interface nsisupportsinterfacepointer : nsisupportsprimitive { attribute nsisupports data; attribute nsidptr dataiid; string tostring(); }; ...
MailNews fakeserver
specific fakeserver guidelines pop imap smtp nntp nntpd.js defines a few different classes of nntp servers: compliance for rfc 977, rfc 29
80, and rfc 3977, as well as a giganews and an inn server.
... (full 29
80 and 3977 compliance as well as inn is not yet written).
Zombie compartments
mb (00.49%) -- shapes │ │ │ │ │ ├──1.47 mb (00.29%) ++ gc-heap │ │ │ │ │ └──0.96 mb (00.19%) ++ malloc-heap │ │ │ │ ├──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%) ── mall...
....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%) ── style-contexts │ │ │ │ ├──0.03 mb (00.01%) -- frames │ │ │ │ │ ├──0.02 mb (00.00%) ── sundries │ │ │ │ │ └──0.01...
Index - Firefox Developer Tools
80 ui tour guide, inspector, tools this article is a quick tour of the main sections of the page inspector's user interface.
...starting in firefox
80, a disclosure triangle within the tooltip reveals a stack trace.
Network request details - Firefox Developer Tools
ll, the entire header is copied in json format, giving you something like this (after running the results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=156025
8099074460" }, { "name": "cache-control", "value": "private, must-revalidate, max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "na...
... note: future versions will also show this information when entries in the network monitor timeline graph are moused over (see bug 15
80493).
Web Console Helpers - Firefox Developer Tools
:block (starting in firefox
80) followed by an unquoted string, blocks requests where the url contains that string.
... :unblock (starting in firefox
80) followed by an unquoted string, removes blocking for urls containing that string.
AesCtrParams - Web APIs
note: see appendix b of the nist sp
800-38a standard for more information.
...the nist sp
800-38a standard, which defines ctr, suggests that the counter should occupy half of the counter block (see appendix b.2), so for aes it would be 64.
Bluetooth.requestDevice() - Web APIs
both 16-bit service ids 0x1
802 and 0x1
803.
...let options = { filters: [ {services: ['heart_rate']}, {services: [0x1
802, 0x1
803]}, {services: ['c48e6067-5295-48d3-8d5c-0395f61792b1']}, {name: 'examplename'}, {nameprefix: 'prefix'} ], optionalservices: ['battery_service'] } navigator.bluetooth.requestdevice(options).then(function(device) { console.log('name: ' + device.name); // do something with the device.
CanvasRenderingContext2D.addHitRegion() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); canvas.addeventlistener('mousemove', function(event) { if(event.region) { alert('ouch, my eye :('); } }); ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70,
80, 10, 0, 2 * math.pi); ctx.arc(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.
...vas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70,
80, 10, 0, 2 * math.pi, false); ctx.arc(130,
80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "eyes"}); // mouth ctx.beginpath(); ctx.arc(100, 110, 50, 0, math.pi, false); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.getelementbyid("reset"); var edit...
CanvasRenderingContext2D.moveTo() - Web APIs
the second line begins at (50, 90) and ends at (2
80, 120).
... var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(2
80, 120); ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.
CanvasRenderingContext2D.scale() - Web APIs
this is to adjust for the negative scaling factor: -2
80 * -1 becomes 2
80, and text is drawn leftwards from that point.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -2
80, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.
Transformations - Web APIs
to convert, we are using: radians = (math.pi/1
80)*degrees.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // left rectangles, rotate from canvas origin ctx.save(); // blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(30, 30, 100, 100); ctx.rotate((math.pi / 1
80) * 25); // grey rect ctx.fillstyle = '#4d4e53'; ctx.fillrect(30, 30, 100, 100); ctx.restore(); // right rectangles, rotate from rectangle center // draw blue rect ctx.fillstyle = '#0095dd'; ctx.fillrect(150, 30, 100, 100); ctx.translate(200,
80); // translate to rectangle center // x = x + 0.5 * width // y = y + 0.5 * height ctx.rotate((math.pi / 1
80) * 25); // rotate ctx.translate(-200, -
80); // translate back // draw grey rect ctx.fillstyle = '#4d4e53'; ctx.f...
KeyboardEvent: code values - Web APIs
until chrome 50) 0x007a "audiovolumedown" "audiovolumedown" (was "volumedown" until chrome 50) 0x007b "audiovolumeup" "audiovolumeup" (was "volumeup" until chrome 50) 0x007c "unidentified" "power" 0x007d "numpadequal" "numpadequal" 0x007e "unidentified" "numpadchangesign" 0x007f "pause" "pause" 0x00
80 "unidentified" "" 0x0081 "numpadcomma" "" 0x0082 "lang1" "hangulmode" 0x0083 "lang2" "hanja" 0x0084 "intlyen" "intlyen" 0x0085 "osleft" "osleft" 0x0086 "osright" "osright" 0x0087 "contextmenu" "contextmenu" 0x0088 "browserstop" "cancel" 0x0089 "again" "" ...
...4 "power" 0x0075 "numpadequal" 0x0076 "unidentified" 0x0077 "pause" 0x0078 "unidentified" 0x0079 "numpadcomma" 0x007a "lang1" 0x007b "lang2" 0x007c "intlyen" 0x007d "metaleft" 0x007e "metaright" 0x007f "contextmenu" 0x00
80 "browserstop" 0x0081 "again" 0x0082 "props" 0x0083 "undo" 0x0084 "select" 0x0085 "copy" 0x0086 "open" 0x0087 "paste" 0x0088 "find" 0x0089 "cut" 0x008a "help" 0x008b ~ 0x008d "unidentified" 0x008e "sleep" 0x008f "wakeup" ...
Location - Web APIs
examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or window.location var url = document.createelement('a'); url.href = 'https://developer.mozilla.org:
8080/search?q=url#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:
8080/search?q=url#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:
8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); //
8080 console.log(url.pathname); // /search console.log(url.s...
...earch); // ?q=url console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org:
8080 specifications specification status comment html living standardthe definition of 'location' in that specification.
Path2D() - Web APIs
the path will move to point (m10 10) and then move horizontally
80 points to the right (h
80), then
80 points down (v
80), then
80 points to the left (h -
80), and then back to the start (z).
... <canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let p = new path2d('m10 10 h
80 v
80 h -
80 z'); ctx.fill(p); specification specification status comment html living standardthe definition of 'path2d()' in that specification.
SVGCircleElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgcircleelement" target="_top"><rect x="-119" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-39" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcircleelement</text></a><...
SVGEllipseElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgellipseelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgellipseelement</text></a...
SVGGeometryElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: the pathlength property and the gettotallength() and getpointatlength() methods were originally part of the svgpathelement interface.
SVGLineElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svglineelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineelement</text></a></svg>...
SVGPathElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpathelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpathelement</text></a></svg>...
SVGPolygonElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolygonelement" target="_top"><rect x="-129" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-44" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolygonelement</text></a...
SVGPolylineElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgpolylineelement" target="_top"><rect x="-139" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-49" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgpolylineelement</text><...
SVGRectElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
..."/docs/web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a><polyline points="81,89 71,84 71,94 81,89" stroke="#d4dde4" fill="none"/><line x1="71" y1="89" x2="41" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgrectelement" target="_top"><rect x="-99" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-29" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrectelement</text></a></svg>...
SVGTextPathElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
...6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a><polyline points="51,89 41,84 41,94 51,89" stroke="#d4dde4" fill="none"/><line x1="41" y1="89" x2="11" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgtextpathelement" target="_top"><rect x="-169" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="-79" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextpathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants method types name value description te...
SubtleCrypto.importKey() - Web APIs
a pem-encoded privatekeyinfo looks like this: -----begin private key----- mig2ageambagbyqgsm49agegbsubbaaibigemigbagebbdau9bd0jxdff5ov3
80z 9vieun2w5kjdz3hbuadencxliamsoquktffaou71eldn0tshzaniaarmuhcee/cp xmjgc1roj0d0k6vluqta+jvcwigxciaukoethcngzdkcrd4pkxdbvbcijdzkvo+l ml2fikoovzh/8yetkmjumb
804g6omjuc9vvojcrv0ydasmykkjmjblg= -----end private key----- to get this into a format you can give to importkey() you need to do two things: base64-decode the part between header and footer, using window.atob().
... subjectpublickey is defined in rfc 52
80, section 4.1 using the asn.1 notation: subjectpublickeyinfo ::= sequence { algorithm algorithmidentifier, subjectpublickey bit string } just like pkcs #8, the importkey() method expects to receive this object as an arraybuffer containing the der-encoded form of the subjectpublickeyinfo.
TextEncoder - Web APIs
new array(len * 1.5) : new uint8array(len * 3); for (var point=0, nextcode=0, i = 0; i !== len; ) { point = str.charcodeat(i), i += 1; if (point >= 0xd
800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae nextcode = str.charcodeat(i); i...
...f (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd
800) * 0x400 + nextcode - 0xdc00 + 0x10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); resarr[respos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); resarr[respos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); continue; } } else { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] =...
USB.requestDevice() - Web APIs
for example, if only a usb device with product id 0xa
800 is found, then only one device will be listed by the user agent.
... const filters = [ {vendorid: 0x1209, productid: 0xa
800}, {vendorid: 0x1209, productid: 0xa850} ]; navigator.usb.requestdevice({filters: filters}) .then(usbdevice => { console.log("product name: " + usbdevice.productname); }) .catch(e => { console.log("there is no device.
Writing a WebSocket server in C# - Web APIs
here's a barebones server implementation: using system.net.sockets; using system.net; using system; class server { public static void main() { tcplistener server = new tcplistener(ipaddress.parse("127.0.0.1"),
80); server.start(); console.writeline("server has started on 127.0.0.1:
80.{0}waiting for a connection...", environment.newline); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); } } tcpclient methods: system.net.sockets.networkstream getstream() gets the stream which is the communication channel.
...[4] {61, 84, 35, 6}; for (int i = 0; i < encoded.length; i++) { decoded[i] = (byte)(encoded[i] ^ mask[i % 4]); } put together wsserver.cs // // csc wsserver.cs // wsserver.exe using system; using system.net; using system.net.sockets; using system.text; using system.text.regularexpressions; class server { public static void main() { string ip = "127.0.0.1"; int port =
80; var server = new tcplistener(ipaddress.parse(ip), port); server.start(); console.writeline("server has started on {0}:{1}, waiting for a connection...", ip, port); tcpclient client = server.accepttcpclient(); console.writeline("a client connected."); networkstream stream = client.getstream(); // enter to an infinite cycle to be able to ...
Geometry and reference spaces in WebXR - Web APIs
to convert degrees to radians, simply multiply the value in degrees by π/1
80.
... const radians_per_degree = math.pi / 1
80.0; let degreestoradians = (deg) => deg * radians_per_degree; let radianstodegrees = (rad) => rad / radians_per_degree; times and durations note that for security reasons, domhighrestimestamp usually introduces a small amount of imprecision to the clock in order to prevent it from being used in fingerprinting and timing-based attacks.
Using the Web Animations API - Web APIs
pausing and playing animations we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-
80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
...ight have noticed something odd about the cake’s duration: duration: alicechange.effect.getcomputedtiming().duration / 2 to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration:
8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half her size to twice her size over 8 seconds.
Web audio spatialization basics - Web APIs
make it project to the back when the boombox is rotated 1
80 degrees and facing away from us.
...ur boombox: // set up rotation constants const rotationrate = 60; // bigger number equals slower sound rotation const q = math.pi/rotationrate; //rotation increment in radians we can also use this to work out degrees rotated, which will help with the css transforms we will have to create (note we need both an x and y-axis for the css transforms): // get degrees for css const degreesx = (q * 1
80)/math.pi; const degreesy = (q * 1
80)/math.pi; let's take a look at our left rotation as an example.
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.1
80610.011) applewebkit/537.36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbr...
... sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 9
80x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment html living standardthe definition of 'window: navigator' in that specification.
Window.open() - Web APIs
outerwidth (only on firefox, obsolete from firefox
80) specifies the width of the whole browser window in pixels.
... outerheight (only on firefox, obsolete from firefox
80) specifies the height of the whole browser window in pixels.
WorkerGlobalScope.location - Web APIs
example if you called the following in a document served at localhost:
8000 console.log(location); inside a worker (which would basically be the equivalent of self.console.log(self.location);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", search: "", pathname: "/worker.js", port: "
8000", hostname: "localhost"…}...
... hash: "" host: "localhost:
8000" hostname: "localhost" href: "http://localhost:
8000/worker.js" origin: "http://localhost:
8000" pathname: "/worker.js" port: "
8000" protocol: "http:" search: "" __proto__: workerlocation you could use this location object to return more information about the document's location, as you might do with a normal location object.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
errname = 'securityunsupportedtlsversionerror'; break; case 12: // ssl_error_bad_cert_domain, ssl(12) errname = 'securitycertificatedomainmismatcherror'; break; default: errname = 'securityerror'; break; } } } else { errtype = 'network'; switch (status) { // connect to host:port failed case 0x
804b000c: // ns_error_connection_refused, network(13) errname = 'connectionrefusederror'; break; // network timeout error case 0x
804b000e: // ns_error_net_timeout, network(14) errname = 'networktimeouterror'; break; // hostname lookup failed case 0x
804b001e: // ns_error_unknown_host, network(30) errname = 'domainnotfounderror'; ...
...break; case 0x
804b0047: // ns_error_net_interrupt, network(71) errname = 'networkinterrupterror'; break; default: errname = 'networkerror'; break; } } // xxx we have no tcperror implementation right now because it's really hard to // do on b2g18.
:has() - CSS: Cascading Style Sheets
nonotes no support nonotes notes see bug 669058edge no support nonotes no support nonotes notes see bug 669058firefox no support nonotes no support nonotes notes see bug 41
8039ie no support noopera no support nosafari no support nowebview android no support nochrome android no support nofirefox android no support ...
... nonotes no support nonotes notes see bug 41
8039opera android no support nosafari ios no support nosamsung internet android no support nolegend no support no supportsee implementation notes.see implementation notes.
font-weight - CSS: Cascading Style Sheets
in earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700,
800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g.
... common weight name mapping the numerical values 100 to 900 roughly correspond to the following common weight names: value common weight name 100 thin (hairline) 200 extra light (ultra light) 300 light 400 normal 500 medium 600 semi bold (demi bold) 700 bold
800 extra bold (ultra bold) 900 black (heavy) variable fonts most fonts have a particular weight which corresponds to one of the numbers in common weight name mapping.
Using CSS transforms - CSS: Cascading Style Sheets
{ display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px...
...e { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); }...
Layout and the containing block - CSS: Cascading Style Sheets
<body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { width: 400px; height: 4
80px; margin: 30px; padding: 15px; background: lightgray; } p { position: fixed; width: 50%; /* == (50vw - (width of vertical scrollbar)) */ height: 50%; /* == (50vh - (height of horizontal scrollbar)) */ margin: 5%; /* == (5vw - (width of vertical scrollbar)) */ padding: 5%; /* == (5vw - (width of vertical scrollbar)) */ background: cyan; } example 5 in this example, t...
... <body> <section> <p>this is a paragraph!</p> </section> </body> body { background: beige; } section { transform: rotate(0deg); width: 400px; height: 160px; background: lightgray; } p { position: absolute; left:
80px; top: 30px; width: 50%; /* == 200px */ height: 25%; /* == 40px */ margin: 5%; /* == 20px */ padding: 5%; /* == 20px */ background: cyan; } ...
<angle> - CSS: Cascading Style Sheets
1rad is 1
80/π degrees.
... examples setting a clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 1
80deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status comment css values and units module level 4the definition of '<angle>' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
filter: url(commonfilters.svg#filter); /* <filter-function> values */ backdrop-filter: blur(2px); backdrop-filter: brightness(60%); backdrop-filter: contrast(40%); backdrop-filter: drop-shadow(4px 4px 10px blue); backdrop-filter: grayscale(30%); backdrop-filter: hue-rotate(120deg); backdrop-filter: invert(70%); backdrop-filter: opacity(20%); backdrop-filter: sepia(90%); backdrop-filter: saturate(
80%); /* multiple filters */ backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%); /* global values */ backdrop-filter: inherit; backdrop-filter: initial; backdrop-filter: unset; syntax values none no filter is applied to the backdrop.
...ngle> examples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/10
80/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result spec...
background - CSS: Cascading Style Sheets
background-color background-image background-origin background-position background-repeat background-size syntax /* using a <background-color> */ background: green; /* using a <bg-image> and <repeat-style> */ background: url("test.jpg") repeat-y; /* using a <box> and <background-color> */ background: border-box red; /* a single image, centered and scaled */ background: no-repeat center/
80% url("../img/image.png"); the background property is specified as one or more background layers, separated by commas.
... the syntax of each layer is as follows: each layer may include zero or one occurrences of any of the following values: <attachment> <bg-image> <position> <bg-size> <repeat-style> the <bg-size> value may only be included immediately after <position>, separated with the '/' character, like this: "center/
80%".
box-sizing - CSS: Cascading Style Sheets
html <div class="content-box">content box</div> <br> <div class="border-box">border box</div> css div { width: 160px; height:
80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height:
80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box height:
80px */ } .border-box { box-sizing: border-box; /* total width: 160px total height:
80px content box wi...
...dth: 160px - (2 * 20px) - (2 * 8px) = 104px content box height:
80px - (2 * 20px) - (2 * 8px) = 24px */ } result specifications specification status comment css basic user interface module level 3the definition of 'box-sizing' in that specification.
calc() - CSS: Cascading Style Sheets
syntax /* property: calc(expression) */ width: calc(100% -
80px); the calc() function takes a single expression as its parameter, with the expression's result used as the value.
...in this example, the css creates a banner that stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% -
80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing form fields to fit their container another use case for calc() is to help ensure that form fields fit in the available space, without extruding past the edge of their container, wh...
grid-auto-columns - CSS: Cascading Style Sheets
umns: auto; /* <length> values */ grid-auto-columns: 100px; grid-auto-columns: 20cm; grid-auto-columns: 50vmax; /* <percentage> values */ grid-auto-columns: 10%; grid-auto-columns: 33.3%; /* <flex> values */ grid-auto-columns: 0.5fr; grid-auto-columns: 3fr; /* minmax() values */ grid-auto-columns: minmax(100px, auto); grid-auto-columns: minmax(max-content, 2fr); grid-auto-columns: minmax(20%,
80vmax); /* fit-content() values */ grid-auto-columns: fit-content(400px); grid-auto-columns: fit-content(5cm); grid-auto-columns: fit-content(20%); /* multiple track-size values */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) min...
...max(20%,
80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-columns: inherit; grid-auto-columns: initial; grid-auto-columns: unset; values <length> is a non-negative length.
mix-blend-mode - CSS: Cascading Style Sheets
ue .item { mix-blend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width:
80px; height:
80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; } result using mix-blend...
...-mode with svg svg <svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="
80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="
80" r="40" fill="blue"/> </g> </svg> css circle { mix-blend-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.
offset-rotate - CSS: Cascading Style Sheets
it is the same as specifying a value of auto 1
80deg.
... formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 1
80,-10 1
80,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-distance: 100%; } } result specifications specification status comment motion path module level 1the definition of 'offset-rotate' in that specification.
position - CSS: Cascading Style Sheets
in the example below, box "one" is fixed at
80 pixels from the top of the page and 10 pixels from the left.
... </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top:
80px; left: 10px; background: blue; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; } result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positioning.
text-size-adjust - CSS: Cascading Style Sheets
/* 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.
scaleY() - CSS: Cascading Style Sheets
transform: rotatex(1
80deg); === transform: scaley(-1); syntax scaley(s) values s is a <number> representing the scaling factor to apply on the ordinate of each point of the element.
... cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification.
<transform-function> - CSS: Cascading Style Sheets
>skew(17deg, 13deg)</option> <option>skewx(17deg)</option> <option>skewy(17deg)</option> <option>translate(100px, 100px)</option> <option>translatex(100px)</option> <option>translatey(100px)</option> <option>translatez(100px)</option> <option>translate3d(50px, 50px, 50px)</option> <option>perspective(200px)</option> <option>matrix(1, 2, -1, 1,
80,
80)</option> <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option> </select> </div> </main> css main { width: 400px; height: 200px; padding: 50px; background-image: linear-gradient(135deg, white, cyan, white); } #example-element { width: 100px; height: 100px; transform-style: preserve-3d; transition: transform 1.5s; transform: rotate3d(1, 1, 1, 30deg); ...
...} .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } .select-form { margin-top: 50px; } javascript const selectel...
vertical-align - CSS: Cascading Style Sheets
" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -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 an...
...d why it is here, it will instantly disappear and be replaced by something even more bizarre and inexplicable.</p> <p>there is another theory which states that this has already happened.</p> </td> </tr> </table> table { margin-left: auto; margin-right: auto; width:
80%; } table, th, td { border: 1px solid black; } td { padding: 0.5em; font-family: monospace; } note that vertical-align only applies to inline, inline-block and table-cell elements: you can't use it to vertically align block-level elements.
Cross-browser audio basics - Developer guides
"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</button> <button id="pause" style="display:none" >pause</button> </div> <div id="progress"> <div id="bar"></div> </div> styled like so: #controls { width:
80px; float: left; } #progress { margin-left:
80px; border: 1px solid black; } #bar { height: 20px; background-color: green; width: 0; } now let's wire this thing up with javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var play = document.getelementbyid('play'); var pause = document.getelementbyid('pause'); var loading = d...
... first of all, we apply a quick update to the progress bar css to display the hand pointer on hover: #progress { margin-left:
80px; border: 1px solid black; cursor: pointer; } then we add the code that detects the click and moves the 'playhead' to the correct position: var progress = document.getelementbyid('progress'); progress.addeventlistener('click', function(e) { // calculate the normalized position clicked var clickposition = (e.pagex - this.offsetleft) / this.offsetwidth; var clicktime = clickpositi...
Setting up adaptive streaming media sources - Developer guides
segmentalignment="true" subsegmentstartswithsap="1"> <representation id="1" bandwidth="64000"> <baseurl>elephantsdream_aac48k_064.mp4.dash</baseurl> </representation> </adaptationset> <!-- video --> <adaptationset mimetype="video/mp4" codecs="avc1.42401e" subsegmentalignment="true" subsegmentstartswithsap="1"> <representation id="2" bandwidth="100000" width="4
80" height="360"> <baseurl>elephantsdream_h264bpl30_0100.264.dash</baseurl> </representation> <representation id="3" bandwidth="175000" width="4
80" height="360"> <baseurl>elephantsdream_h264bpl30_0175.264.dash</baseurl> </representation> <representation id="4" bandwidth="250000" width="4
80" height="360"> <baseurl>elephantsdream_h264bpl30_0250.264.dash<...
.../baseurl> </representation> <representation id="5" bandwidth="500000" width="4
80" height="360"> <baseurl>elephantsdream_h264bpl30_0500.264.dash</baseurl> </representation> </adaptationset> </period> </mpd> once you have generated your mpd file you can reference it from within the video tag.
Video player styling basics - Developer guides
h and height (based on the dimensions of the video used) and centered within the page: figure { max-width:64rem; width:100%; max-height:30.875rem; height:100%; margin:1.25rem auto; padding:1.051%; background-color:#666; } the video controls container itself also needs some styling so that it is set up the correct way: .controls { width:100%; height:8.09716599190283400
80971659919028%; /* of figure's height */ position:relative; } the height of the .controls class is set to be (a very precise!) percentage of the enclosing <figure> element (this was worked out with experimentation based on the required button height).
...ace is taken advantage of, and the buttons are a bit too small so this needs to be altered by setting a new height on the element that has the .controls class set on it: @media screen and (max-width:64em) { figure { padding-left:0; padding-right:0; height:auto; } .controls { height:1.876rem; } } this works well enough until it is viewed on a smaller screen (6
80px/42.5em), so another breakpoint is made here.
Rich-Text Editing in Mozilla - Developer guides
jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx
80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo9...
...0fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046
807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaaankelrc/jdksesyphi7siegsvxzeatdicqbvjjpqwzt9naednbqk1wcqsxlynxmaimhydofaeljasrrvazvrqqqxuy7cgx4tc6bswkaow==" /> <img class="intlink" title="remove formatting" ...
Making content editable - Developer guides
jrkkneisiiribbehjjpklivo4m1rrmkkjqirmjruqudkpt71qpipirkpaqdf55tv5vvuszjqtjolseukd3xu/3dpzusc/22wtu2wrn+jg5so/ocdh8ycmjdflehmlkjkvk7kuyn+ufza/rtth76zavocdptrxzqtni3mrwupc+6cktlxz/sddp2uu9uxlmyxz6qm8v4tz8lhf1h+zdqxt7s8olmxtbf4e8qafhjj3kbp2mzkkthpitjp9vh6ihia+whtasx5brpwuemgdondf/2a4m7ukds1jw662+xkqtkeuoqjktojm2h53yfl15psj04zc94wdtibr26fxlc2mzrvbccebz2kirfd414tkmlezbvgt33+qcohgha81swysew0r1uzfnylmtpx
80pngqq91lwvk2jgvgnfvzg6ycyrat16gftw5kkkfo1eqltfh5q2ett0biwf+aitq4fdbk+imyo1oxvgf03wafjqvbckvdffryetxqiffygazths0zwagd7fg5tnnyntp8/fzvgwjofmgg7gox0sakkgqgdmgkbi0njgmeimpgdk5+wacewed0ywblhguz4hw5oduekrblt7dtgdegxacsiznx8zpmwh7k4rkpjcuhdxcul6mdsmmbxdlwch2+xozsgbnzsncee4euyv4pwcpswypw0uhdybkswu1nyjendreqtkjwn2+zvttc1vmstb/mvev/weyslasslimcohobjxw+n3ap/sjefnl5gepzmpu4kg7opr1+tofpyuu3becwykcwqcdfmwfkauo9...
...0fhkdinbcamvqnymgqueagqwcohbdc1rjv9pild8ibvkz6qyviibqgtjpx4k0xpigezorn1da0cij4vfr0ta3wvbxh/rjdcufv6r2zpgph/e4pxsbcpeatqprjniso203/5s/za171mv8+w1loaaaaaelftksuqmcc"> <img class="intlink" title="undo" onclick="formatdoc('undo');" src="data:image/gif;base64,r0lgodlhfgawaomkadljwlie33morpgjuykl8aezxqpd+7/i19dv3nha7p///////////////////////yh5baekaa8alaaaaaawabyaaarr8mljq7046
807tkayejjbnes4eeujvigapwyac0csocq7sdlwjkakca6tomywiargqf3mrqviejkksvlibsfewhdrih4fh/dzmice3/c4nbqbads=" /> <img class="intlink" title="redo" onclick="formatdoc('redo');" src="data:image/gif;base64,r0lgodlhfgawamihab1chdljwl9vj1ie34kl8apd+7/i1////yh5baekaacalaaaaaawabyaaankelrc/jdksesyphi7siegsvxzeatdicqbvjjpqwzt9naednbqk1wcqsxlynxmaimhydofaeljasrrvazvrqqqxuy7cgx4tc6bswkaow==" /> <img class="intlink" title="remove formatting" ...
<input type="range"> - HTML: Hypertext Markup Language
html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50"></option> <option value="60"></option> <option value="70"></option> <option value="
80"></option> <option value="90"></option> <option value="100"></option> </datalist> screenshot live a range control with hash marks and labels you can add labels to your range control by adding the label attribute to the <option> elements corresponding to the tick marks you wish to have labels for.
... html examples <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"></option> <option value="10"></option> <option value="20"></option> <option value="30"></option> <option value="40"></option> <option value="50" label="50%"></option> <option value="60"></option> <option value="70"></option> <option value="
80"></option> <option value="90"></option> <option value="100" label="100%"></option> </datalist> screenshot live note: currently, no browser fully supports these features.
<input type="url"> - HTML: Hypertext Markup Language
the example below creates a 30-character wide url address entry box, requiring that the contents be no shorter than 10 characters and no longer than
80 characters.
... <input id="myurl" name="myurl" type="url" size="30" minlength="10" maxlength="
80"> note: these attributes also affect validation; a value shorter or longer than the specified minimum/maximum lengths will be classified as invalid; in addition most browsers will simply refuse to let the user enter a value longer than the specified maximum length.
HTTP Index - HTTP
80 csp: connect-src csp, content-security-policy, directive, http, reference, security, connect-src, source the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
... 1
80 server-timing http, performance, reference, header the server-timing header communicates one or more metrics and descriptions for a given request-response cycle.
206 Partial Content - HTTP
a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-length: 1741 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 234-639/
8000 ...the first range...
... --string_separator content-type: application/pdf content-range: bytes 4590-7999/
8000 ...the second range --string_separator-- specifications specification title rfc 7233, section 4.1: 206 partial content hypertext transfer protocol (http/1.1): range requests ...
Character classes - JavaScript
equivalent to [ \f\n\r\t\v\u00a0\u16
80\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
...equivalent to [^ \f\n\r\t\v\u00a0\u16
80\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].
URIError: malformed URI sequence - JavaScript
an urierror will be thrown if there is an attempt to encode a surrogate which is not part of a high-low pair, for example: encodeuri('\ud
800'); // "urierror: malformed uri sequence" encodeuri('\udfff'); // "urierror: malformed uri sequence" a high-low pair is ok.
... for example: encodeuri('\ud
800\udfff'); // "%f0%90%8f%bf" decoding decoding replaces each escape sequence in the encoded uri component with the character that it represents.
Date.prototype.getYear() - JavaScript
for example, if the year is 1
800, getyear() returns -100.
... var xmas = new date('december 25, 1
800 23:15:00'); var year = xmas.getyear(); // returns -100 setting and getting a year between 1900 and 1999 the third statement assigns the value 95 to the variable year, representing the year 1995.
Intl.DateTimeFormat - JavaScript
var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // tolocalestring without arguments depends on the implementation, // the default locale, and the default time zone console.log(new intl.datetimeformat().format(date)); // → "12/19/2012" if run with en-us locale (language) and time zone america/los_angeles (utc-0
800) using locales this example shows some of the variations in localized date and time formats.
... in order to get the format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // results below use the time zone of america/los_angeles (utc-0
800, pacific standard time) // us english uses month-day-year order console.log(new intl.datetimeformat('en-us').format(date)); // → "12/19/2012" // british english uses day-month-year order console.log(new intl.datetimeformat('en-gb').format(date)); // → "19/12/2012" // korean uses year-month-day order console.log(new intl.datetimeformat('ko-kr').format(date)); // → "2012.
JSON.stringify() - JavaScript
son.stringify() and saved in localstorage in json object again var restoredsession = json.parse(localstorage.getitem('session')); // now restoredsession variable contains the object that was saved // in localstorage console.log(restoredsession); well-formed json.stringify() engines implementing the well-formed json.stringify specification will stringify lone surrogates, any code point from u+d
800 to u+dfff, using unicode escape sequences rather than literally.
... before this change json.stringify would output lone surrogates if the input contained any lone surrogates; such strings could not be encoded in valid utf-8 or utf-16: json.stringify("\ud
800"); // '"�"' but with this change json.stringify represents lone surrogates using json escape sequences that can be encoded in valid utf-8 or utf-16: json.stringify("\ud
800"); // '"\\ud
800"' this change should be backwards-compatible as long as you pass the result of json.stringify to apis such as json.parse that will accept any valid json text, because they will treat unicode escapes of lone surrogates as identical to the lone surrogates themselves.
String.prototype.codePointAt() - JavaScript
number(position) : 0; if (index != index) { // better `isnan` index = 0; } // account for out-of-bounds indices: if (index < 0 || index >= size) { return undefined; } // get the first code unit var first = string.charcodeat(index); var second; if ( // check if it’s the start of a surrogate pair first >= 0xd
800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd
800) * 0x400 + second - 0xdc00 + 0x10000; } } ...
...return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codepointat() 'abc'.codepointat(1) // 66 '\ud
800\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)) } // '1f40e', '1f471', '2764' specifications specification ecmascript (ecma-262)the definition of 'string.prototype.codepointat' in that specification.
String.fromCodePoint() - JavaScript
rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd
800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } 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 obj...
...g, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); examples using fromcodepoint() valid input: string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f
804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307); // "\ud834\udf06a\ud834\udf07" invalid input: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror st...
encodeURI() - JavaScript
note how certain characters are used to signify special meaning: http://username:password@www.example.com:
80/path/to/file.php?foo=316&bar=this+has+spaces#anchor hence encodeuri() does not encode characters that are necessary to formulate a complete uri.
... encoding a lone high surrogate throws an urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuri('\ud
800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\ud
800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuri('\udfff')); encoding for ipv6 if one wishes to follow the more recent rfc3986 for urls, which makes square brackets reserved (for ipv6) and thus not encoded when forming something which could be part...
Image file type and format guide - Web media technologies
for instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box: <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="
80" x2="100" y2="20" stroke="black" /> </svg> svg can be used in web content in two ways: you can directly write the <svg> element within the html, containing svg elements to draw the image.
...by specifying type 3 (short), the value of imagewidth is stored as a 16-bit value: tag type size value 0x0100 (imagewidth) 0x0003 (short) 0x00000001 (1 entry) 0x02
80 (640 pixels) specifying type 4 (long) stores the width as a 32-bit value: tag type size value 0x0100 (imagewidth) 0x0004 (long) 0x00000001 (1 entry) 0x000002
80 (640 pixels) a single tiff file can contain multiple images; this may be used to represent multi-page documents, for example (such as a multi-page scanned document, or ...
begin - SVG: Scalable Vector Graphics
.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="startbutton.click" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <rect id="startbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="
80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="
80" text-anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="...
...20" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="accesskey(s)" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <text x="60" y="
80" text-anchor="middle" style="pointer-events:none;">hit the "s" key</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anc...
d - SVG: Scalable Vector Graphics
y} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l
80,
80 v -
80 h -40" /> </svg> cubic bézier curve cubic bézier curves are smooth curve definitions using four points: starting point (current point) (po = {xo, yo}) end point (pn = {xn, yn}) start control point (pcs = {xcs, ycs}) (controls curvature near the start of the curve) end control point (pce = {xce, yce}) (controls curvature near the end of the curve) ...
...box="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- cubic bézier curve with absolute coordinates --> <path fill="none" stroke="red" d="m 10,90 c 30,90 25,10 50,10 s 70,90 90,90" /> <!-- cubic bézier curve with relative coordinates --> <path fill="none" stroke="red" d="m 110,90 c 20,0 15,-
80 40,-
80 s 20,
80 40,
80" /> <!-- highlight the curve vertex and control points --> <g id="controlpoints"> <!-- first cubic command control points --> <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> <circle cx="30" cy="90" r="1.5"/> <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> <circle cx="25" cy="10" r="1.5"/> <!-- second smooth co...
end - SVG: Scalable Vector Graphics
imated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <rect id="endbutton" style="cursor:pointer;" x="19.5" y="62.5" rx="5" height="25" width="
80" fill="#efefef" stroke="black" stroke-width="1" /> <text x="60" y="
80" text-anchor="middle" style="pointer-events:none;">click me.</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="...
...2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="accesskey(e)" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <text x="60" y="
80" text-anchor="middle" style="pointer-events:none;">hit the "s" key</text> <!-- grid --> <text x="10" y="20" text-anchor="middle">0s</text> <line x1="10" y1="25" x2="10" y2="55" stroke="grey" stroke-width=".5" /> <text x="35" y="20" text-anchor="middle">2s</text> <line x1="35" y1="25" x2="35" y2="55" stroke="grey" stroke-width=".5" /> <text x="60" y="20" text-anc...
in - SVG: Scalable Vector Graphics
--> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
orient - SVG: Scalable Vector Graphics
m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <polyline points="15,
80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" marker-start="url(#dataarrow)" marker-mid="url(#dataarrow)" marker-end="url(#dataarrow)" /> </svg> usage notes value auto | auto-start-reverse | <angle> | <number> default value 0 animatable yes (non-additive) auto this value indicates that the marker is oriented such that its p...
... auto-start-reverse if placed by marker-start, the marker is oriented 1
80° different from the orientation that would be used if auto where specified.
scale - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctave...
...s="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="
80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="
80" style="filter: url(#displacementfilter2); transform: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: ...
...translatex(2
80px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first number represents a standard deviation value along the x-axis.
y - SVG: Scalable Vector Graphics
value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="
80%" x2="100%" y2="
80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single value --> <text y="40%" x="5%">svg</text> <!-- y with multiple values --> <text y="40%,60%,
80%" x="55%">svg</text> </svg> text { font: 40px sans-serif; } line { fill: none; stroke: red...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="
80%" x2="100%" y2="
80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <!-- y with a single value --> <tspan y="40%" x="5%">svg</tspan> <!-- y with multiple values --> <tspan y="40%,60%,
80%" x="55%">svg</tspan> </text </svg> text { font: 40px sans-serif; } line...
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute removed (bug 12
80425) added non-scaling-size, non-rotation and fixed-position keywords for vector-effect property not implemented yet (bug 1318208) vector-effect has no effect within 3d rendering context implementation status unknown consider clip and overflow on svg document referenced by <image> implementation status unknown paths change notes ...
...es <video> implementation status unknown <audio> implementation status unknown <iframe> implementation status unknown <canvas> implementation status unknown <source> implementation status unknown <track> implementation status unknown painting change notes paint-order implemented (bug 828
805) will-change instead of buffered-rendering implementation status unknown context-fill and context-stroke paint values implemented (bug 719286 (firefox 18.0 / thunderbird 18.0 / seamonkey 2.15) and bug 798843 (firefox 26.0 / thunderbird 26.0 / seamonkey 2.23)) child keyword for <paint> values and marker properties implementation status unknown vector-e...
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="
80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
... a green circle <circle> with a radius of
80px is drawn atop the center of the red rectangle (center of circle offset 150px to the right, and 100px downward from the top left corner).
Texts - SVG: Scalable Vector Graphics
textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c
80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c
80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
Same-origin policy - Web security
l: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port
80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url inherit the origin of the document containing that url, since these types of urls do not contain information about an origin server.
...therefore, one cannot make company.com:
8080 talk to company.com by only setting document.domain = "company.com" in the first.
panel - Archive of obsolete content
you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 1
80, height: 1
80, contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs.
util/uuid - Archive of obsolete content
generate uuid to generate a new uuid, call uuid() with no arguments: let uuid = require('sdk/util/uuid').uuid(); parsing uuid to convert a string representation of a uuid to an nsid, pass the string representation to uuid(): let { uuid } = require('sdk/util/uuid'); let firefoxuuid = uuid('{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}'); globals functions uuid(stringid) generate a new uuid, or convert a string representation of a uuid to an nsid.
Creating annotations - Archive of obsolete content
tion editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 1
80px; height: 1
80px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea rows='10' cols='20' id='annotation-box'> </textarea> </body> </html> save this inside data/editor as annotation-editor.html.
Displaying annotations - Archive of obsolete content
updating main.js finally, update main.js with the code to construct the annotation panel: var annotation = panels.panel({ width: 200, height: 1
80, contenturl: data.url('annotation/annotation.html'), contentscriptfile: [data.url('jquery-1.4.2.min.js'), data.url('annotation/annotation.js')], onshow: function() { this.postmessage(this.content); } }); execute cfx run one last time.
Miscellaneous - Archive of obsolete content
tion(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 33
8039 tracks improving this situation by providing a simple method to restart the application.
Preferences - Archive of obsolete content
s into the default location: var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefservice.savepreffile(null); checking for existence of a key if you try to get the value of a nonexistent preference, an error will be thrown: error: ns_error_unexpected: component returned failure code: 0x
8000ffff (ns_error_unexpected) [nsiprefbranch.getcharpref] to avoid such errors, you should check whether the key exists or not using nsiprefservice.getpreftype(), as shown below: var prefservicebranch = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice).getbranch(""); if(prefservicebranch.getpreftype('extens...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
directory and look something like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:targetapplication> <!-- firefox --> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.0+</em:minversion> <em:maxversion>1.0+</em:maxversion> </description> </em:targetapplication> <!-- front-end metadata --> <em:name>my first extension</em:name> <em:description>just an example.</em:description> <em:creator>allpeers.com</em:creator> <em:homepageurl>http://www.allpeers.com/blog/<...
Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0
800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // const aboutpage_uri = 'chrome://myaboutaddon/content/index.html'; class aboutpage { static get classid() { return components.id(`{${aboutpage_id}}`); }...
Deploying a Plugin as an Extension - Archive of obsolete content
sic install.rdf file looks like: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>1.5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> you can get more detailed information about this file at install.rdf.
Inline options - Archive of obsolete content
les --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon.options1" type="menulist" title="options 1"> <menulist> <menupopup> <menuitem value="500" label="small"/> <menuitem value="
800" label="medium"/> <menuitem value="1200" label="large"/> </menupopup> </menulist> </setting> <!-- radio button example (this example would be stored as a boolean) --> <setting pref="extensions.myaddon.options2" type="radio" title="options 2"> <radiogroup> <radio value="false" label="disabled"/> <radio value="true" label="enabled"/> </radiogroup> </setting> <!-- button ...
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
change to your name --> <em:creator>gomita</em:creator> <!-- web page address through which extension is distributed --> <em:homepageurl>http://www.xuldev.org/helloworld/</em:homepageurl> <!-- this section gives details of the target application for the extension (in this case: firefox 2) --> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>4.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> create the chrome manifest fill in the chrome.manifest file as shown in listing 2.
Adding preferences to an extension - Archive of obsolete content
« previousnext » override chrome://myaddon/content/options.xul chrome://myaddon/content/oldoptions.xul application={ec
8030f7-c20a-464f-9b0e-13a3a9e97384} appversion<=6.* examples github - gist :: _ff-addon-template-bootstrapprefsskeleton - this gist here is a fully working example of a fully funcitonal preferences skeleton, it uses the observer example from above.
XML data - Archive of obsolete content
the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <!-- xml demonstration --> <?xml-stylesheet type="text/css" href="style9.css"?> <!doctype planet> <planet> <ocean> <name>arctic</name> <area>13,000</area> <depth>1,200</depth> </ocean> <ocean> <name>atlantic</name> <area>87,000</area> <depth>3,900</depth> </ocean> <ocean> <name>pacific</name> <area>1
80,000</area> <depth>4,000</depth> </ocean> <ocean> <name>indian</name> <area>75,000</area> <depth>3,900</depth> </ocean> <ocean> <name>southern</name> <area>20,000</area> <depth>4,500</depth> </ocean> </planet> make a new css file, style9.css.
MozOrientation - Archive of obsolete content
to normalize between the two you can do something like this: function orientationhandler(evt){ // for ff3.6+ if (!evt.gamma && !evt.beta) { evt.gamma = -(evt.x * (1
80 / math.pi)); evt.beta = -(evt.y * (1
80 / math.pi)); } // use evt.gamma, evt.beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true);...
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
the following xml datasources are used in this sample: http://web.archive.org/web/20090624020048/http://devedge-temp.mozilla.org/central/dom/catalog-new_en.xml http://web.archive.org/web/2009021
8052509/http://devedge-temp.mozilla.org/central/xml/catalog-new_en.xml http://web.archive.org/web/20100913225355/http://devedge-temp.mozilla.org/central/css/catalog-new_en.xml http://web.archive.org/web/2009021
8052536/http://devedge-temp.mozilla.org/viewsource/catalog-new_en.xml data binder component this procedure traverses the dom that was returned via xmlhttprequest and generates markup based on ...
MMgc - Archive of obsolete content
they are logged like this: [mem] sweep(21) reclaimed 910 whole pages (3640 kb) in 22.66 millis (2.4975 s) [mem] mark(1) 0 objects (1
80866 kb 205162 mb/s) in 0.88 millis (2.5195 s) [mem] drc reaped 114040 objects (3563 kb) freeing 903 pages (7
800 kb) in 17.41 millis (2.0015 s) how mmgc works mark/sweep the mmgc garbage collector uses a mark/sweep algorithm.
Creating a Firefox sidebar extension - Archive of obsolete content
rg/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:version>1.0</em:version> <em:creator>your name</em:creator> <em:description>example extension for creation and registration of a sidebar.</em:description> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <!-- firefox --> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> the other manifest file is chrome.manifest, the chrome manifest file.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
you will also have to update the minimum and maximum compatible versions for the target application (firefox) in the following section: <em:targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> establishing both minimum and maximum compatible versions lets you avoid conflicts with versions of firefox your theme wasn't designed for -- or wasn't tested on.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
istercontentlistener" shape="poly"> <area alt="(3) openuri() (nsuriloader)" coords="5,207,312,269" href="#openuri"> <area alt="(2)" coords="102,114,139,148" href="#internalload"> <area alt="(1) loaduri/onlinkclick" coords="77,5,449,59" href="#loaduri"> <area alt="nsiexternalhelperappservice" coords="527,305,839,339" href="#nsiexternalhelperappservice"> <area alt="category manager" coords="683,467,
807,527" href="#nscategorymanager"> <area alt="nsdocumentopeninfo" coords="371,71,635,185" href="#nsdocumentopeninfo"> <area alt="necko" coords="721,113,821,157" href="#necko"> <area alt="nsuriloader" coords="23,335,215,455" href="#nsuriloader"> <area coords="227,515,485,575" href="#nsiuricontentlistener"> <area alt="nsdocshell" coords="47,83,203,153" href="#nsdocshell"></map> this block diagram is ...
Jetpack Snippets - Archive of obsolete content
var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width:
800, //wide enough to use firebug onselect: function(slide) { slide.slide(
800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slid...
Clipboard Test - Archive of obsolete content
param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param:not(:last-child):after{content: ","; padding-right: .5em; } .method>.name>.param>.name:after{content: " as "; font-weight: normal; } .method>.params{display: block; color:#555;} .method>.params>.param{display: block; margin-bottom:5px;} .method>.params>.param>.name{font-weight:bold; margin-right:.5em; min-width:
80px; display:inline-block;} .method>.params>.param>.description{display:inline-block; width:300px; vertical-align:top;margin-right:30px} .method>.params>.param>.type{display:inline-block; width:100px; vertical-align:top;font-weight:bold;} .method>.params>.param>.type:before{content: "type "; color: #888; font-weight:normal;} .method>.params>.param>.default{display:inline-block; width:100px; vertica...
LIR - Archive of obsolete content
ater-than-or-equal 72 not in use arithmetic 73 eqd integer double equality 74 ltd integer double less-than 75 gtd integer double greater-than 76 led integer double less-than-or-equal 77 ged integer double greater-than-or-equal 78 negi integer negate int 79 addi integer add int
80 subi integer subtract int 81 muli integer multiply int 82 divi integer i386/64 divide int 83 modi integer modulo int - lir_modi is a hack.
Actionscript Performance Tests - Archive of obsolete content
avm avm2 min : max avg min : max avg %diff metric ----------------------- ----------------------- ----- sunspider/access-binary-trees.as [ 567.0 : 585] 575.9 [ 564.0 : 5
80] 572.0 0.5 time sunspider/access-fannkuch.as [ 363.0 : 386] 370.0 [ 362.0 : 399] 371.8 0.3 time ...
Running Tamarin performance tests - Archive of obsolete content
36.0 $ export avm2=c:/dev/tamarin-tracing2/bld/shell/avmshell.exe $ python ./runtests.py executing tests at 2008-07-22 14:03:51.957381 avm: c:/dev/tamarin-tracing/bld/shell/avmshell.exe avm2: c:/dev/tamarin-tracing2/bld/shell/avmshell.exe test avm avm2 %sp sunspider/access-binary-trees.as 82.0
80.0 2.5 sunspider/access-fannkuch.as 153.0 155.0 -1.3 sunspider/access-nbody.as 176.0 178.0 -1.1 sunspider/access-nsieve.as 65.0 68.0 -4.4 sunspider/bitops-3bit-bits-in-byte.as 12.0 13.0 -7.7 sunspider/bitops-bits-in-byte.as 36.0 36.0 0.0 by default te...
Tamarin Roadmap - Archive of obsolete content
tc jan '09 feature links status integrate the tt string class tamarin:string implementation tamarin:strings bug 465506 complete enhanced c++ profiler enhance memory profiler to work in release builds and be more performant in progress enable lir for arm targets bug 460764 complete amd64 nanojit bug 464476 in progress port nanojit to powerpc bug 45
8077 complete add mac-x64 and linux-x64 buildbots complete fail build on assertion in acceptance tests complete merge tracking bug bug 469836 in progress tc feb '09 spring backlog tbd.
URIScheme - Archive of obsolete content
list of mozilla supported uri schemes list of uri schemes http:// by default, port
80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on windows.
XML in Mozilla - Archive of obsolete content
supported) w3c recommendation p3p wsdl (no longer supported) w3c note web services xbl mozilla's xbl reference xul mozilla's xul reference roadmap next big tasks would include support for xpointer xpointer() scheme (bug 32832), xinclude (bug 201754), xml catalogs (bug 98413), xforms (bug 97
806; work being done on implementing this as an extension), validating parser (bug 196355) and xml schemas.
Windows Install - Archive of obsolete content
path = file.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110
801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110
801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create relative to f...
Properties - Archive of obsolete content
buildid of netscape 6 is represented by a time stamp of teh format:yyyymmddhh: 2001031
808 means in the year 2001, in the month of march, on the 18th day of the month, at 8:00am.
Custom toolbar button - Archive of obsolete content
l-manifest" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" em:iconurl="chrome://custombutton/content/icon.png" > <em:targetapplication><!-- firefox --> <description em:id="{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}" em:minversion="1.4" em:maxversion="*" /> </em:targetapplication> <em:targetapplication><!-- thunderbird --> <description em:id="{3550f703-e582-4d05-9a08-453d09bdfdc6}" em:minversion="1.5" em:maxversion="51.0" /> </em:targetapplication> <em:targetapplication><!-- sunbird --> <description ...
Creating a Skin - Archive of obsolete content
#opensearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(48px 16px 64px 0); -moz-box-orient: vertical; } #savesearch { list-style-image: url("chrome://editor/skin/icons/btn1.gif"); -moz-image-region: rect(
80px 16px 96px 0); -moz-box-orient: vertical; } mozilla provides a custom style property -moz-image-region which can be used to make an element use part of an image.
Skinning XUL Files by Hand - Archive of obsolete content
here is a very short (but complete!) cascading stylesheet that might be referenced and used by a xul file: toolbar.nav-bar { background-image: url("chrome://navigator/skin/navbar-bg.gif"); padding: 0px; padding-bottom: 2px; } box#navbar { background-color: lightblue; } a:link { color: #fa
8072; } this stylesheet exhibits three of the different types of style definitions described above.
Styling a Tree - Archive of obsolete content
treechildren::-moz-tree-row(readonly) { border: 1px solid red; } treechildren::-moz-tree-row(readonly, unread) { background-color: rgb(
80%,
80%,
80%); } default properties the properties list for tree elements contain a small number of default properties, which you can also use in a style sheet.
Application Update - Archive of obsolete content
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); // interval: time before prompting the user to restart to install the latest // download (in seconds) default=30 minutes pref("app.update.nagtimer.restart", 1
800); // interval: when all registered timers should be checked (in milliseconds) // default=5 seconds pref("app.update.timer", 600000); // whether or not we show a dialog box informing the user that the update was // successfully applied.
CommandLine - Archive of obsolete content
registrar = components.interfaces.nsicomponentregistrar; const nsicommandline = components.interfaces.nsicommandline; const nsicommandlinehandler = components.interfaces.nsicommandlinehandler; const nsifactory = components.interfaces.nsifactory; const nsimodule = components.interfaces.nsimodule; const class_id = components.id("178cfbb6-503c-11dc-8314-0
800200c9a66"); const class_name = "applicationnameclh"; const contract_id = "@example.com/applicationname/clh;1"; const cld_category = "m-applicationname"; var apphandler = { /* nsisupports */ queryinterface : function clh_qi(aiid) { if (aiid.equals(nsicommandlinehandler) || aiid.equals(nsifactory) || aiid.equals(nsisupports)) return this; throw components.resul...
XULRunner tips - Archive of obsolete content
d.manager.opendelay", 0); pref("browser.download.manager.focuswhenstarting", false); pref("browser.download.manager.flashcount", 2); // pref("alerts.slideincrement", 1); pref("alerts.slideincrementtime", 10); pref("alerts.totalopentime", 4000); pref("alerts.height", 50); if you are missing preferences that a dialog requires, you will get the following errors: component returned failure code: 0x
8000ffff (ns_error_unexpected) [nsiprefbranch.getboolpref] error: dialog has no properties source file: chrome://mozapps/content/downloads/u...ontenttype.xul line: 1 enabling password manager these preferences seem to be the default in firefox, however, they are missing in xulrunner.
2006-10-06 - Archive of obsolete content
https://bugzilla.mozilla.org/show_bug.cgi?id=354866 taking moz1
80-linux-tbox down temporarily oct 6th early afternoon (pdt) on october 5th rob helmer announced that: he will be taking the 1.8.0 branch (en-us and l10n) linux tinderbox down tomorrow afternoon (oct 6th, pdt) in order to clone the disks and create a staging server for the release automation work.
2006-10-20 - Archive of obsolete content
he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0
800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
2006-11-03 - Archive of obsolete content
problem compiling with vs 2003 .net phil is trying to compile firefox for the first time and is getting an error when doing so: building deps for /cygdrive/c/mozilla/toolkit/airbag/airbag/src/common/windows/guid_string.cc make[1]: leaving directory `/cygdrive/c/mozilla/obj-i686-pc-cygwin' make: *** [build] error 2 he also noted that he is using make 3.
80-1.
Extentsions FAQ - Archive of obsolete content
= document.getelementbyid("replaceme"); replaceme.parentnode.replacechild(newnode, replaceme); is it possible to place an image in the window that can be moved to anywhere in the window, and always remain on top of everything else?(similiar to using position:absolute and-index:100000 in html) you can almost do this with a stack: <window ...> <stack flex="1"> <image top="40" left="
80"/> <vbox> other content here </vbox> </stack> </window> the only restriction is that your image can't overlap the right or bottom of the window.
2006-10-20 - Archive of obsolete content
--------------01030606070
808000
8030904 content-type: audio/mpeg; name="eternals - babalus's wedding dayfinal.mp3" content-transfer-encoding: base64 content-id: <part1.00030607.05030...@gmail.com> content-disposition: inline; filename="eternals - babalus's wedding dayfinal.mp3" he wonders why this is.
Adobe Flash - Archive of obsolete content
see also macromedia flash developer documentation scripting the flash player plugin communication between javascript and macromedia flash fscommands (definition from the actionscript dictonary) actionscript dictionary mdc resources using the right markup to invoke plugins plugin central notable bugs bug 184722 bug 1
80378 bug 203861 ...
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
for a plugin the manifest only needs to be very simple: <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>4.0.*</em:maxversion> </description> </em:targetapplication> <em:unpack>true</em:unpack> </description> </rdf> this contains 5 required pieces of information.
What is RSS - Archive of obsolete content
you know you want to.</description> <lastbuilddate>tue, 23 aug 2005 21:02:05 -0
800</lastbuilddate> <link>http://katetv.example.com/</link> <item> <title>this is fun</title> <guid>http://katetv.example.com/show/4</guid> <pubdate>tue, 23 aug 2005 21:02:05 -0
800</pubdate> <enclosure url="http://katetv.example.com/show/4" length="1911146" type="application/ogg"/> </item> <item> <title>watch...
Security Controls - Archive of obsolete content
original document information author(s): karen scarfone, wayne jansen, and miles tracy title: nist special publication
800-123, guide to general server security last updated date: july 2008 copyright information: this document is not subject to copyright.
Introduction to Public-Key Cryptography - Archive of obsolete content
ber: 3 (0x3) signature algorithm: pkcs #1 md5 with rsa encryption issuer: ou=ace certificate authority, o=ace industry, c=us validity: not before: fri oct 17 18:36:25 1997 not after: sun oct 17 18:36:25 1999 subject: cn=jane doe, ou=finance, o=ace industry, c=us subject public key info: algorithm: pkcs #1 rsa encryption public key: modulus: 00:ca:fa:79:98:8f:19:f8:d7:de:e4:49:
80:48:e6:2a:2a:86: ed:27:40:4d:86:b3:05:c0:01:bb:50:15:c9:de:dc:85:19:22: 43:7d:45:6d:71:4e:17:3d:f0:36:4b:5b:7f:a8:51:a3:a1:00: 98:ce:7f:47:50:2c:93:36:7c:01:6e:cb:89:06:41:72:b5:e9: 73:49:38:76:ef:b6:8f:ac:49:bb:63:0f:9b:ff:16:2a:e3:0e: 9d:3b:af:ce:9a:3e:48:65:de:96:61:d5:0a:11:2a:a2:
80:b0: 7d:d8:99:cb:0c:99:34:c9:ab:25:06:a8:31:ad:8c:4b:aa:54: 91:f4:15 public expone...
Table Reflow Internals - Archive of obsolete content
h me = max elem w debugging frame reflow gives instructions for turning this on: tblo 030176cc r=0 a=8940,uc c=0,0 cnt=429 tbl 030178c4 r=0 a=8940,uc c=4470,uc cnt=430 rowg 03017a7c r=0 a=uc,uc c=uc,uc cnt=431 row 03017c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 03017da8 r=0 a=uc,uc c=uc,uc cnt=433 block 03017e08 r=0 a=uc,uc c=uc,uc cnt=434 block 03017e08 d=870,300 me=4
80 cell 03017da8 d=930,360 me=540 cell 0301a8cc r=0 a=uc,uc c=uc,uc cnt=436 block 0301a92c r=0 a=uc,uc c=uc,uc cnt=437 block 0301a92c d=1335,300 me=465 cell 0301a8cc d=1395,360 me=525 row 03017c08 d=uc,360 rowg 03017a7c d=uc,360 rowg 03017a7c r=2 a=4470,uc c=4470,uc cnt=442 row 03017c08 r=2 a=4470,uc c=4470,uc cnt=443 cell 03017da8 r=2 a=1755,u...
install.rdf - Archive of obsolete content
--> <em:targetapplication> <description> <!-- firefox's uuid --> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>min_ff_version</em:minversion> <em:maxversion>max_ff_version</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <!-- my_theme --> <em:name>my_theme</em:name> <em:description>my_theme</em:description> <em:creator>your_name</em:creator> <em:contributor>contributors_names</em:contri...
Making sure your theme works with RTL locales - Archive of obsolete content
example toolbar[iconsize="large"][mode="icons"] #back-button { -moz-image-region: rect(0px 396px 34px 360px); } toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) { -moz-image-region: rect(0px 516px 34px 4
80px); } this specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.
-moz-border-bottom-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; } specifications this property is not part of any specification.
-moz-border-left-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; } specifications this property is not part of any specification.
-moz-border-right-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; } specifications this property is not part of any specification.
-moz-border-top-colors - Archive of obsolete content
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> example <div id="example">example</div> #example { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f
80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c
80 #c90 #ca0 #cb0 #cc0; } specifications this property is not part of any specification.
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="
80px" width="
80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
-ms-scroll-chaining - Archive of obsolete content
.imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 4
80px; height: 270px; overflow: auto; } specifications not part of any specification.
-ms-scroll-snap-points-x - Archive of obsolete content
(the -ms-scroll-snap-points-x property behaves identically to the -ms-scroll-snap-points-y property, but along the x-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-x: snapinterval(0%, 100%); width: 4
80px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-x-min: 100%; -ms-scroll-limit-x-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-x: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 4
80px; height: 270px; overflow: aut...
-ms-scroll-snap-points-y - Archive of obsolete content
(the -ms-scroll-snap-points-y property behaves identically to the -ms-scroll-snap-points-x property, but along the y-axis.) .container { overflow-x: auto; overflow-y: hidden; -ms-scroll-snap-type: mandatory; -ms-scroll-snap-points-y: snapinterval(0%, 100%); width: 4
80px; height: 270px; } .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-scroll-limit-y-min: 100%; -ms-scroll-limit-y-max: 500%; -ms-scroll-snap-type: proximity; -ms-scroll-snap-points-y: snaplist(100%, 200%, 300%, 400%, 500%); -ms-overflow-style: none; width: 4
80px; height: 270px; overflow: aut...
ArrayBuffer.transfer() - Archive of obsolete content
examples var buf1 = new arraybuffer(40); new int32array(buf1)[0] = 42; var buf2 = arraybuffer.transfer(buf1,
80); buf1.bytelength; // 0 but if you use the polyfill then the value is still 40 buf2.bytelength; //
80 new int32array(buf2)[0]; // 42 var buf3 = arraybuffer.transfer(buf2, 0); buf2.bytelength; // 0 but if you use the polyfill then the value is still
80 buf3.bytelength; // 0 polyfill you can partially work around this by inserting the following code at the beginning of your scripts, allowing us...
XForms Custom Controls - Archive of obsolete content
> </bindings> <xf:model> <xf:instance xmlns=""> <data> <curimg></curimg> <img label="firefox">http://www.mozilla.com/images/firefox-logo-64x64.png</img> <img label="thunderbird">http://www.mozilla.com/images/thunderbird-logo-64x64.png</img> <img label="bugzilla">http://www.mozilla.org/images/p-bugz.gif</img> <img label="mozilla">http://www.mozilla.org/images/mozhead-
80x64.gif</img> </data> </xf:instance> </xf:model> <style type="text/css"> @namespace xf url(http://www.w3.org/2002/xforms); xf|output[mediatype="image/*"] { -moz-binding: url('#output-image'); } </style> </head> <body> <h1>custom control sample</h1> <xf:select1 ref="curimg"> <xf:label>select image to display: </xf:label> <xf:it...
Implementation Status - Archive of obsolete content
332231; 349
805; 10.11 revalidate partial is dispatching events instead of calling directly 332231; 10.12 refresh partial is dispatching events instead of calling directly 332231; 10.13 reset supported 10.14 load partial no xforms-link-error generated if @...
Common causes of memory leaks in extensions - Extensions
while bug 6954
80 should prevent most of these compartment leaks, add-ons still need to be aware of the practices that caused these leaks, as the fix causes many add-ons which would have otherwise caused a leak to instead throw errors when attempting to access nodes from documents which no longer exist.
Unconventional controls - Game development
we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 1
80); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrengt...
Initialize the framework - Game development
create a new html document, save it as index.html, in a sensible location, and add the following code to it: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>gamedev phaser workshop - lesson 01: initialize the framework</title> <style>* { padding: 0; margin: 0; }</style> <script src="js/phaser.min.js"></script> </head> <body> <script> var game = new phaser.game(4
80, 320, phaser.canvas, null, { preload: preload, create: create, update: update }); function preload() {} function create() {} function update() {} </script> </body> </html> downloading the phaser code next, we need to go through the process of downloading the phaser source code and applying it to our html document.
Grid - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> <div>six</div> <div>seven</div> <div>eight</div> </div> ...
Grid Areas - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 100px 100px; grid-template-areas: "a a b" "a a b"; } .item1 { grid-area: a; } .item2 { grid-area: b; } <div class="wrapper"> <div class="item1">item</div> <div class="item2">item</div> </div> learn more property reference grid-template-columns grid-template-rows grid-a...
Grid Cell - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 100px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> learn more property reference grid-template-columns grid-template-rows grid-auto-rows grid-auto-columns further reading css grid layout guide: basic concep...
Grid Tracks - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: 200px 1fr 3fr; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> track sizing in the implicit grid tracks created in the implicit grid are auto-sized by default, however you can define a size for these tracks using the grid-auto-rows and grid-auto-columns ...
Gutters - MDN Web Docs Glossary: Definitions of Web-related terms
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #fff8f8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3,1.2fr); grid-auto-rows: 45%; grid-column-gap: 20px; grid-row-gap: 20px; } <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div> in terms of grid sizing, gaps act as if they were a regular grid track however nothing can be placed into the gap.
Creating a spell check dictionary add-on
> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as em:localized, em:description, em:creator, em:developer, em:translator, em:contributor or em:homepageurl --> <!-- firefox --> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>46.0</em:maxversion> </description> </em:targetapplication> <!-- thunderbird --> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id> <em:minversion>18.0a1</em:minversion> <em:maxversion>22.0...
HTTP logging
you will see several files that look like: log.txt-main.1
806, log.txt-child.1954, log.txt-child.1970, etc.
Simple Thunderbird build
18/10/2010 16:11 7,334 mapiaux.h 02/06/2009 17:02 7,938 mapicode.h 02/06/2009 17:02 22,960 mapidbg.h 02/06/2009 17:02 84,644 mapidefs.h 02/06/2009 17:02 27,840 mapiform.h 02/06/2009 17:02 11,8
80 mapiguid.h 02/06/2009 17:02 2,648 mapihook.h 02/06/2009 17:02 5,359 mapinls.h 02/06/2009 17:02 2,743 mapioid.h 02/06/2009 17:02 32,978 mapispi.h 02/06/2009 17:02 54,395 mapitags.h 02/06/2009 17:02 26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 9,334 mapiwin.h 02/06/2009 17:02...
Eclipse CDT
headers are only parsed once for performance reasons, eclipse only processes header files that have include guards once, using the compiler options for the first source file it encounters that includes that header (eclipse bug 3
80511).
Eclipse CDT Manual Setup
if you want a column marker to mark the
80th column to help with formatting code to mozilla's
80 character line limit, tick "show print margin" and set the value to
80.
overflow-clip-box-block
span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=
80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
pan>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=
80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=
80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
L10n Checks
this number won't reach 100% in general; mid
80s should be the target, though.
QA phase
to create and configure this file, follow these instructions: until the fix for bug 10638
80 lands on mozilla-aurora and mozilla-beta when building language packs against those two trees you should: remove ac_add_options --disable-compile-environment from .mozconfig in step 3 use ./mach build config after step 4 update the mozilla source code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig enter t...
MathML Torture Test
ock"> <msubsup> <mi>x</mi> <msubsup> <mi>y</mi> <mi>b</mi> <mi>a</mi> </msubsup> <msubsup> <mi>z</mi> <mi>c</mi> <mi>d</mi> </msubsup> </msubsup> </math> </td></tr> <tr> <td>28</td> <td><img src="https://udn.realityripple.com/samples/cd/423a749
80c.png" width="24" height="22" alt="texbook, 16.4-16.5" /></td> <td> <math display="block"> <msubsup> <mi>y</mi> <mn>3</mn> <mo>‴</mo> </msubsup> </math> </td></tr> <tr> <td>29</td> <td><img src="https://udn.realityripple.com/samples/ac/635fb943ee.png" width="194" height="58" alt="stirling's approximation" /></td> ...
Mozilla Port Blocking
"access to the port number given has been disabled for security reasons." "establishing a connection to an unsafe or otherwise banned port was prohibited" "0x
804b0013 (ns_error_port_access_not_allowed)" if your product or web site uses a port which is blocked by mozilla's default port blocking rules, you can either change the port of your service to a unblocked value (recommended if possible) or ask your mozilla users to enable the port.
Investigating leaks using DMD heap scan mode
the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f
80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
NSS 3.15.2 release notes
new pkcs #11 mechanisms no new pkcs#11 mechanisms have been introduced notable changes in nss 3.15.2 bug 8
80543 - 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.
NSS 3.16.3 release notes
2:00:85:63:f5:a4:a7:d3:12:40:8a:d6 cn = digicert assured id root g2 sha1 fingerprint: a1:4b:48:d9:43:ee:0a:0e:40:90:4f:3c:e0:a4:c0:91:93:51:5d:3f cn = digicert assured id root g3 sha1 fingerprint: f5:17:a2:4f:9a:48:c6:c9:f8:a2:00:26:9f:dc:0f:48:2c:ab:30:89 cn = digicert global root g2 sha1 fingerprint: df:3c:24:f9:bf:d6:66:76:1b:26:
80:73:fe:06:d1:cc:8d:4f:82:a4 cn = digicert global root g3 sha1 fingerprint: 7e:04:de:89:6a:3e:66:6d:00:e6:87:d3:3f:fa:d9:3b:e8:3d:34:9e cn = digicert trusted root g4 sha1 fingerprint: dd:fb:16:cd:49:31:c9:73:a2:03:7d:3f:c8:3a:4d:7d:77:5d:05:e4 cn = quovadis root ca 1 g3 sha1 fingerprint: 1b:8e:ea:57:96:29:1a:c9:39:ea:b8:0a:81:1a:73:7...
NSS 3.17.3 release notes
f:e2:f8:97:bb:cd:7a:8c:b4 cn = usertrust rsa certification authority sha1 fingerprint: 2b:8f:1b:57:33:0d:bb:a2:d0:7a:6c:51:f7:0e:e9:0d:da:b9:ad:8e cn = usertrust ecc certification authority sha1 fingerprint: d1:cb:ca:5d:b2:d5:2a:7f:69:3b:67:4d:e5:f0:5a:1d:0c:95:7d:f0 cn = globalsign ecc root ca - r4 sha1 fingerprint: 69:69:56:2e:40:
80:f4:24:a1:e7:19:9f:14:ba:f3:ee:58:ab:6a:bb cn = globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution...
NSS 3.18.1 release notes
cn = e-guven kok elektronik sertifika hizmet saglayicisi sha1 fingerprint: dd:e1:d2:a9:01:
80:2e:1d:87:5e:84:b3:
80:7e:4b:b1:fd:99:41:34 the following intermediate ca certificate has been added as actively distrusted because it was misused to issue certificates for domain names the holder did not own or control.
NSS 3.18 release notes
bsites and code signing trust bits turned off ou = equifax secure certificate authority sha1 fingerprint: d2:32:09:ad:23:d3:14:23:21:74:e4:0d:7f:9d:62:13:97:86:63:3a cn = equifax secure global ebusiness ca-1 sha1 fingerprint: 7e:78:4a:10:1c:82:65:cc:2d:e1:f1:6d:47:b4:40:ca:d9:0a:19:45 cn = tc trustcenter class 3 ca ii sha1 fingerprint:
80:25:ef:f4:6e:70:c8:d4:72:24:65:84:fe:40:3b:8a:8d:6a:db:f5 the following ca certificates were added cn = staat der nederlanden root ca - g3 sha1 fingerprint: d8:eb:6b:41:51:92:59:e0:f3:e7:85:00:c0:3d:b6:88:97:c9:ee:fc cn = staat der nederlanden ev root ca sha1 fingerprint: 76:e2:7e:c1:4f:db:82:c1:c0:a6:75:b5:05:be:3d:29:b4:ed:db:bb cn...
NSS 3.21.4 release notes
bugs fixed in nss 3.21.4 bug 13443
80 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research.
NSS 3.22.1 release notes
notable changes in nss 3.22.1 bug 11946
80: 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.
NSS 3.23 release notes
f:db:5b:f8:1a:b9:68:4a:7f:c9:f6:67 cn = netlock uzleti (class b) tanusitvanykiado sha-256 fingerprint: 39:df:7b:68:2b:7b:93:8f:84:71:54:81:cc:de:8d:60:d8:f2:2e:c5:98:87:7d:0a:aa:c1:2b:59:18:2b:03:12 cn = netlock expressz (class c) tanusitvanykiado sha-256 fingerprint: 0b:5e:ed:4e:84:64:03:cf:55:e0:65:84:84:40:ed:2a:82:75:8b:f5:b9:aa:1f:25:3d:46:13:cf:a0:
80:ff:3f friendly name: verisign class 1 public pca – g2 sha-256 fingerprint: 34:1d:e9:8b:13:92:ab:f7:f4:ab:90:a9:60:cf:25:d4:bd:6e:c6:5b:9a:51:ce:6e:d0:67:d0:0e:c7:ce:9b:7f friendly name: verisign class 3 public pca sha-256 fingerprint: a4:b6:b3:99:6f:c2:f3:06:b3:fd:86:81:bd:63:41:3d:8c:50:09:cc:4f:a3:29:c2:cc:f0:e2:fa:1b:14:03:05 friendly n...
NSS 3.28.1 release notes
notable changes in nss 3.28.1 the following ca certificates were removed cn = buypass class 2 ca 1 sha-256 fingerprint: 0f:4e:9c:dd:26:4b:02:55:50:d1:70:
80:63:40:21:4f:e9:44:34:c9:b0:2f:69:7e:c7:10:fc:5f:ea:fb:5e:38 cn = root ca generalitat valenciana sha-256 fingerprint: 8c:4e:df:d0:43:48:f3:22:96:9e:7e:29:a4:cd:4d:ca:00:46:55:06:1c:16:e1:b0:76:42:2e:f3:42:ad:63:0e ou = rsa security 2048 v3 sha-256 fingerprint: af:8b:67:62:a1:e5:28:22:81:61:a9:5d:5c:55:9e:e2:66:27:8f:75:d7:9e:83:01:89:a5:03:50:6a:bd:6b:4c...
NSS 3.28.4 release notes
bugs fixed in nss 3.28.4 bug 13443
80 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) bug 1342358 - crash in tls13_destroykeyshares acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research.
NSS 3.28.5 release notes
notable changes in nss 3.28.5 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:47:43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:
80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e7:86:55:e1:be:7f:78:47:
80:0b:93:f6:94:d2:1d:36:8c:c0:6e:03:...
NSS 3.29.5 release notes
bugs fixed in nss 3.29.5 bug 13443
80 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) bug 1345089 / drbg flaw in nss (cve-2017-5462) acknowledgements the nss development team would like to thank ronald crane and vladimir klebanov for responsibly disclosing the issues by providing advance copies of their research.
NSS 3.30.1 release notes
bugs fixed in nss 3.30.1 bug 13443
80 / out-of-bounds write in base64 encoding in nss (cve-2017-5461) acknowledgements the nss development team would like to thank ronald crane for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.30.2 release notes
notable changes in nss 3.30.2 the following ca certificates were removed: o = japanese government, ou = applicationca sha-256 fingerprint: 2d:47:43:7d:e1:79:51:21:5a:12:f3:c5:8e:51:c7:29:a5:
80:26:ef:1f:cc:0a:5f:b3:d9:dc:01:2f:60:0d:19 cn = wellssecure public root certificate authority sha-256 fingerprint: a7:12:72:ae:aa:a3:cf:e8:72:7f:7f:b3:9f:0f:b3:d1:e5:42:6e:90:60:b0:6e:e6:f1:3e:9a:3c:58:33:cd:43 cn=tÜrktrust elektronik sertifika hizmet sağlayıcısı h6 sha-256 fingerprint: 8d:e7:86:55:e1:be:7f:78:47:
80:0b:93:f6:94:d2:1d:36:8c:c0:6e:03:...
NSS 3.33 release notes
fixes cve-2017-7
805, a potential use-after-free in tls 1.2 server, when verifying client authentication.
NSS 3.39 release notes
: 8560f91c3624daba9570b5fea0dbe36ff11a8323be9486854fb3f34a5571198d the following ca certificate was removed: cn = comsign sha-256 fingerprint: ae4457b40d9eda96677b0d3c92d57b5177abd7ac1037958356d1e094518be5f2 the following ca certificates had the websites trust bit disabled: cn = certplus root ca g1 sha-256 fingerprint: 152a402bfcdf2cd54
8054d2275b39c7fca3ec097
8078b0f0ea76e561a6c7433e cn = certplus root ca g2 sha-256 fingerprint: 6cc05041e6445e74696c4cfbc9f
80f543b7eabbb44b4ce6f787c6a9971c42f17 cn = opentrust root ca g1 sha-256 fingerprint: 56c77128d98c18d91b4cfdffbc25ee9103d4758ea2abad826a90f3457d460eb4 cn = opentrust root ca g2 sha-256 fingerprint: 27995829fe6a7515c1...
NSS 3.43 release notes
fingerprint: 40f6af0346a99aa1cd1d555a4e9cce62c7f9634603ee406615833dc8c8d00367 cn = emsign ecc root ca - g3 sha-256 fingerprint: 86a1ecba089c4a8d3bbe2734c612ba341d813e043cf9e8a862cd5c57a36bbe6b cn = emsign root ca - c1 sha-256 fingerprint: 125609aa301da0a249b97a8239cb6a34216f44dcac9f3954b14292f2e8c8608f cn = emsign ecc root ca - c3 sha-256 fingerprint: bc4d
809b15189d78db3e1d8cf4f9726a795da1643ca5f1358e1ddb0edc0d7eb3 cn = hongkong post root ca 3 sha-256 fingerprint: 5a2fc03f0c83b090bbfa40604b0988446c7636183df9846e17101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime te...
NSS 3.44.1 release notes
the source archive by approximately 50 megabytes for this release.) bugs fixed in nss 3.44.1 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough input checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) 1515236 - add a sslkeylogfile enable/disable flag at build.sh 1473
806 - fix seckey_converttopublickey handling of non-rsa keys 1546477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) 1551041 - unbreak build on gcc < 4.3 big-endian compatibility nss 3.44.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48 release notes
6176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ctr_xor bug 1566131 - ensure sha-1 fallback disabled in tls 1.2 bug 1577
803 - mark pkcs#11 token as friendly if it implements ckp_public_certificates_token bug 1566126 - power ghash vector acceleration bug 1589073 - use of new pr_assert_arg in certdb.c bug 1590495 - fix a crash in pk11_makecertfromhandle bug 1591742 - ensure des iv length is valid before usage from pkcs#11 bug 1588567 - enable mozilla::pkix gtests in nss ci bug 1591315 - update nsc_decrypt length ...
NSS 3.51 release notes
bug 15389
80 - secu_readderfromfile calls strstr on a string that isn't guaranteed to be null-terminated bug 1561337 - correct a warning for comparison of integers of different signs: 'int' and 'unsigned long' in security/nss/lib/freebl/ecl/ecp_25519.c:88 bug 1609751 - add test for mp_int clamping bug 1582169 - don't attempt to read the fips_enabled flag on the machine unless nss was built with fips enable...
Enc Dec MAC Output Public Key as CSR
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include #include #include #include #include #include #include #include #include #include #include /* our samples utilities */ #include "util.h" #define buffersize
80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define default_key_bits 1024 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin wrapped enckey-----" #define enckey_trailer "-----end wrapped enckey-----...
Encrypt Decrypt_MAC_Using Token
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize
80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----be...
NSS Sample Code Sample_3_Basic Encryption and MACing
sample code 3 /* nspr headers */ #include <prthread.h> #include <plgetopt.h> #include <prerror.h> #include <prinit.h> #include <prlog.h> #include <prtypes.h> #include <plstr.h> /* nss headers */ #include <keyhi.h> #include <pk11priv.h> /* our samples utilities */ #include "util.h" #define buffersize
80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----be...
NSS Sample Code sample3
> #include "pk11pub.h" #include "nss.h" static void printdigest(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } /* * main */ int main(int argc, const char *argv[]) { int status = 0; pk11slotinfo *slot = 0; pk11symkey *key = 0; pk11context *context = 0; unsigned char data[
80]; unsigned char digest[20]; /*is there a way to tell how large the output is?*/ unsigned int len; secstatus s; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
EncDecMAC using token object - sample 3
*/ /* nspr headers */ #include #include #include #include #include #include #include /* nss headers */ #include #include /* our samples utilities */ #include "util.h" #define buffersize
80 #define digestsize 16 #define ptext_mac_buffer_size 96 #define ciphersize 96 #define blocksize 32 #define cipher_header "-----begin cipher-----" #define cipher_trailer "-----end cipher-----" #define enckey_header "-----begin aeskey ckaid-----" #define enckey_trailer "-----end aeskey ckaid-----" #define mackey_header "-----begin mackey ckaid-----" #define mackey_trailer "-----end mackey ckaid-----...
NSS tools : crlutil
for more information see rfc #32
80 * add the authority key identifier extension: the authority key identifier extension provides a means of identifying the public key corresponding to the private key used to sign a crl.
NSS tools : modutil
rsa: 0x00000001 dsa: 0x00000002 rc2: 0x00000004 rc4: 0x00000008 des: 0x00000010 dh: 0x00000020 fortezza: 0x00000040 rc5: 0x000000
80 sha1: 0x00000100 md5: 0x00000200 md2: 0x00000400 random: 0x0
8000000 friendly: 0x10000000 own_pw_defaults: 0x20000000 disable: 0x40000000 cipherenableflags specifies ciphers that this module provides that nss does not provide (so that the module enables those ciphers for nss).
nsIXMLHttpRequest
example code this is a simple example code for opening a simple http request from a xul application (like a mozilla extension) without using observers: var req = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('post', "http://www.foo.bar:
8080/nietzsche.do", true); req.send('your=data&and=more&stuff=here'); example 2 var {cu: utils, cc: classes, ci: instances} = components; cu.import('resource://gre/modules/services.jsm'); function xhr(url, cb) { let xhr = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); let handler = ev => { evf(m => xhr.removeeventlistener(m, handler, !1)); ...
nsMsgSearchOp
defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl typedef long nsmsgsearchopvalue; [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c
806c4ee420)] interface nsmsgsearchop { const nsmsgsearchopvalue contains = 0; /* for text attributes */ const nsmsgsearchopvalue doesntcontain = 1; const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ const nsmsgsearchopvalue isnt = 3; const nsmsgsearchopvalue isempty = 4; const nsmsgsearchopvalue isbefore = 5; /* for date attributes */ const nsmsgsearchopvalue isafter = 6; const nsmsgsearchopvalue ishigherthan = 7; /* for priority.
nsIMsgSearchValue
defined in comm-central/ mailnews/ base/ search/ public/ nsimsgsearchvalue.idl #include "nsmsgsearchcore.idl" interface nsimsgfolder; [scriptable, uuid(783758a0-cdb5-11dc-95ff-0
800200c9a66)] interface nsimsgsearchvalue : nsisupports { // type of object attribute nsmsgsearchattribvalue attrib; // accessing these will throw an exception if the above // attribute does not match the type!
nsMsgSearchOpValue
nsmsgsearchopvalue defined in comm-central/ mailnews/ base/ search/ public/ nsmsgsearchcore.idl 146 typedef long nsmsgsearchopvalue; 147 148 [scriptable, uuid(9160b196-6fcb-4eba-aaaf-6c
806c4ee420)] 149 interface nsmsgsearchop { 150 const nsmsgsearchopvalue contains = 0; /* for text attributes */ 151 const nsmsgsearchopvalue doesntcontain = 1; 152 const nsmsgsearchopvalue is = 2; /* is and isn't also apply to some non-text attrs */ 153 const nsmsgsearchopvalue isnt = 3; 154 const nsmsgsearchopvalue isempty = 4; 155 156 const nsmsgsearchopvalue isbefore = 5; /* for date attributes */ 157 const nsmsgsearchopvalue isafter = 6; 158 159 const nsmsgsearchopvalue ishigherthan = 7; /* for priority.
Working with Multiple Versions of Interfaces
unfortunately we compiled this in the latest sdk, and so this magic number happens to be: "244e4c67-a1d3-44f2-9cab-cdaa31b6
8046" whereas, inside firefox 2, the iid it happens to know about is: "663ca4a8-d219-4000-925d-d8f66406b626".
Index
depending on the installed theme the result will look something like this:
80 building a thunderbird extension 7: installation extensions, thunderbird while you are developing the extension, there are two ways you can make thunderbird load it so you can test it as you go.
Theme Packaging
--> <em:targetapplication> <description> <em:id>{ec
8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:description> <em:creator>ben goodger</em:creator> <em:contributor>john doe</em:contributor> ...
Add to iPhoto
in c, the fsref is declared thusly: struct fsref { uint8 hidden[
80]; /* private to file manager; •• need symbolic constant */ }; typedef struct fsref fsref; we declare it using js-ctypes like this: this.struct_fsref = new ctypes.structtype("fsref", [ {"hidden": ctypes.char.array(
80)}]); the carbon library init() and shutdown() routines are otherwise similar to how we do things for core foundation.
Using COM from js-ctypes
, '0x04', '0x22', '0xd4']); let spf_default = 0; function main() { let spvoice; let spvoiceptr; try { // msdn docs tell us ot use coinitex instead of coinit, and default is 0 // which is coinit_multithreaded but it wouldnt work so i used // coinit_apartmentthreaded and it worked checkhresult would throw a bad // hresult of rpc_e_changed_mode which is 0x
80010106 which is // -2147417850.
Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162
805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "x": ctypes.long }, { "y": ctypes.long } ]); /* declare the signature of the function we are going to call */ var getcursorpos = lib.declare('getcursorpos', ctypes.winapi_abi, ctypes.bool, point.ptr ); /* use it like this */ var point = point(); var ret = getcursorpos(point.address()); components.utils.reporte...
Type conversion
.log(v.tostring()); }); myfunc(int16array([1, 2, 3])); // 'ctypes.int16_t.ptr(ctypes.uint64("0x103b7fe60"))' myfunc(int32array([1, 2, 3])); // throws error var myfunctype = ctypes.functiontype(ctypes.default_abi, ctypes.void_t, [ctypes.char.ptr]); var myfunc = myfunctype.ptr(function(v) { console.log(v.tostring()); }); myfunc("abcde"); // 'ctypes.char.ptr(ctypes.uint64("0x101d1d6
80"))' myfunc(int32array([1, 2, 3])); // 'ctypes.char.ptr(ctypes.uint64("0x103b7ffe0"))' array types target type source converted value ctypes.char.array(n) js string (only if utf8 representation fits to the array) null-terminated utf8 string ctypes.signed_char.array(n) ctypes.unsigned_char.array(n) ctypes.char16_t.array(n) js string...
Mozilla
if the bitmaps resulting from displaying the two files in an
800x1000 window are identical, the test passes.
DOM Inspector internals - Firefox Developer Tools
chrome://inspector/content/inspector.xul chrome://communicator/content/utilityoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspector/content/inspector.xul chrome://communicator/content/tasksoverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://inspector/content/inspector.xul chrome://browser/content/basemenuoverlay.xul application={ec
8030f7-c20a-464f-9b0e-13a3a9e97384} these host-provided overlays allow dom inspector to adopt a look and feel similar to its host application.
Debugger.Environment - Firefox Developer Tools
source metadata generated from file: js/src/doc/debugger/debugger.environment.md watermark: sha256:3d6f67939e351
803d5d7fe201ed38c4aaf766caf032f255e168df1f1c6fe73cb changeset: 7ae377917236 ...
BaseAudioContext.createWaveShaper() - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 1
80, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
BluetoothRemoteGATTCharacteristic.uuid - Web APIs
the bluetoothremotegattcharacteristic.uuid read-only property returns domstring containing the uuid of the characteristic, for example '00002a37-0000-1000-
8000-00
805f9b34fb' for the heart rate measurement characteristic.
BluetoothRemoteGATTCharacteristic - Web APIs
bluetoothremotegattcharacteristic.uuidread only returns a domstring containing the uuid of the characteristic, for example '00002a37-0000-1000-
8000-00
805f9b34fb' for the heart rate measurement characteristic.
uuid - Web APIs
the bluetoothremotegattdescriptor.uuid read-only property returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-
8000-00
805f9b34fb' for theclient characteristic configuration descriptor.
BluetoothRemoteGATTDescriptor - Web APIs
bluetoothremotegattdescriptor.uuidread only returns the uuid of the characteristic descriptor, for example '00002902-0000-1000-
8000-00
805f9b34fb' for theclient characteristic configuration descriptor.
getCharacteristic() - Web APIs
} ) returns a promise to an instance of bluetoothgattcharacteristic parameters characteristic the uuid of a characteristic, for example '00002a37-0000-1000-
8000-00
805f9b34fb' for the heart rate measurement characteristic.
getCharacteristics() - Web APIs
parameters characteristic the uuid of a characteristic, for example '00002a37-0000-1000-
8000-00
805f9b34fb' for the heart rate measurement characteristic.
CSSPrimitiveValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/c...
CSSStyleDeclaration.setProperty() - Web APIs
tproperty() method, for example boxpararule.style.setproperty('border', newborder); html <div class="controls"> <button class="border">border</button> <button class="bgcolor">background</button> <button class="color">text</button> </div> <div class="box"> <p>box</p> </div> css html { background: orange; font-family: sans-serif; height: 100%; } body { height: inherit; width:
80%; min-width: 500px; max-width: 1000px; margin: 0 auto; } .controls { display: flex; justify-content: space-around; align-items: center; } div button { flex: 1; margin: 20px; height: 30px; line-height: 30px; } .box { display: flex; justify-content: center; align-items: center; height: calc(100% - 70px); } .box p { width: 50%; text-align: center; font-weight: b...
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/cssvalue" target="_top"><rect x="1" y="1" width="
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/c...
CanvasRenderingContext2D.arcTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(1
80, 90); ctx.arcto(1
80,130, 110,130, 130); ctx.lineto(110, 130); ctx.stroke(); result live demo more sophisticated demo of the method.
CanvasRenderingContext2D.clearRect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(1
80, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(
80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215,
80); ctx.arc(150,
80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
; const button1 = document.getelementbyid('button1'); const button2 = document.getelementbyid('button2'); document.addeventlistener('focus', redraw, true); document.addeventlistener('blur', redraw, true); canvas.addeventlistener('click', handleclick, false); redraw(); function redraw() { ctx.clearrect(0, 0, canvas.width, canvas.height); drawbutton(button1, 20, 20); drawbutton(button2, 20,
80); } function handleclick(e) { // calculate click coordinates const x = e.clientx - canvas.offsetleft; const y = e.clienty - canvas.offsettop; // focus button1, if appropriate drawbutton(button1, 20, 20); if (ctx.ispointinpath(x, y)) { button1.focus(); } // focus button2, if appropriate drawbutton(button2, 20,
80); if (ctx.ispointinpath(x, y)) { button2.focus(); } ...
CanvasRenderingContext2D.filter - Web APIs
play:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 1
80, 120); }); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(2
80, 20); ctx.lineto(2
80, 150); ctx.stroke(); result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150,
80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 1
80); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150,
80); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 26; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20,
80); ctx.lineto(220,
80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(2
80, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a path, the order in which you perform these actions will determine the result.
CanvasRenderingContext2D.translate() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0,
80,
80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0,
80,
80); result the moved square is red, and the unmoved square is gray.
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.shadowoffsetx = 2; ctx.shadowoffsety = 2; ctx.shadowblur = 2; ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)'; ctx.font = '20px times new roman'; ctx.fillstyle = 'black'; ctx.filltext('sample string', 5, 30); } <canvas id="canvas" width="150" height="
80"></canvas> draw(); screenshotlive sample we will look at the font property and filltext method in the next chapter about drawing text.
Hit regions and accessibility - Web APIs
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(70,
80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for ...
Optimizing canvas - Web APIs
<div id="stage"> <canvas id="ui-layer" width="4
80" height="320"></canvas> <canvas id="game-layer" width="4
80" height="320"></canvas> <canvas id="background-layer" width="4
80" height="320"></canvas> </div> <style> #stage { width: 4
80px; height: 320px; position: relative; border: 2px solid black; } canvas { position: absolute; } #ui-layer { z-index: 3; } #game-layer { z-index: 2; } #background-layer { z-index: 1; ...
Using images - Web APIs
<html> <body onload="draw();"> <canvas id="canvas" width="1
80" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/...
DOMHighResTimeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp // 1519211
809934 // 1519211810362 // 1519211811670 // ...
DeviceOrientationEvent.beta - Web APIs
returns the rotation of the device around the x axis; that is, the number of degrees, ranged between -1
80 and 1
80, by which the device is tipped forward or backward.
DeviceOrientationEvent - Web APIs
deviceorientationevent.beta read only a number representing the motion of the device around the x axis, express in degrees with values ranging from -1
80 to 1
80.
Document - Web APIs
h="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of d...
EffectTiming.fill - Web APIs
elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration:
800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the result.
Element: DOMActivate event - Web APIs
trait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius * 2); else circle.setfloattrait("r", currentradius * 0.5); } ]]></script> <!-- act on each domactivate event --> <circle cx="300" cy="225" r="100" fill="red"> <handler type="application/ecmascript" ev:event="domactivate"> change(evt); </handler> </circle> <text x="300" y="4
80" font-family="verdana" font-size="35" text-anchor="middle"> activate the circle to change its size </text> </svg> specifications specification status ui eventsthe definition of 'domactivate' in that specification.
Event.eventPhase - Web APIs
i> </ul> <input type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:
80%; } javascript let clear = false, divinfo = null, divs = null, usecapture = false; window.onload = function () { divinfo = document.getelementbyid('divinfo') divs = document.getelementsbytagname('div') chcapture = document.getelementbyid('chcapture') chcapture.onclick = function () { removelisteners() addlisteners() } clear() addlisteners() } function removel...
Event.timeStamp - Web APIs
// reduced time precision (2ms) in firefox 60 event.timestamp; // 1519211
809934 // 1519211810362 // 1519211811670 // ...
ExtendableEvent - Web APIs
note: the behaviour described in the above paragraph was fixed in firefox 43 (see bug 11
80274.) this interface inherits from the event interface.
File.lastModified - Web APIs
// reduced time precision (2ms) in firefox 60 somefile.lastmodified; // 1519211
809934 // 1519211810362 // 1519211811670 // ...
File.lastModifiedDate - Web APIs
// reduced time precision (2ms) in firefox 60 somefile.lastmodifieddate.gettime(); // 1519211
809934 // 1519211810362 // 1519211811670 // ...
Introduction to the File and Directory Entries API - Web APIs
for example, while an app or a page in http://www.example.com/app/ can access files from http://www.example.com/dir/, because they have the same origin, it cannot retrieve files from http://www.example.com:
8080/dir/ (different port) or https://www.example.com/dir/ (different protocol).
GlobalEventHandlers.ontransitioncancel - Web APIs
: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-transform: rotate(1
80deg); transform: rotate(1
80deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
GlobalEventHandlers.ontransitionend - Web APIs
style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; transform: rotate(1
80deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width:
80px; height:
80px; background: #cdf; padding: 5px; transition: transform .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transfo...
HTMLDetailsElement - Web APIs
<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/htmldetailselement" target="_top"><rect x="1" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldetailselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLDocument - Web APIs
h="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
HTMLFontElement.color - Web APIs
the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid name color string nameofcolor (case insensitive) green green green valid hex color string in rgb format: #rrggbb #00
8000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax colorstring = fontobj.color; fontobj.color = colorstring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.color = "green"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.color.
HTMLHeadingElement - Web APIs
le" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlheadingelement" target="_top"><rect x="311" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlheadingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLHyperlinkElementUtils.origin - Web APIs
the htmlhyperlinkelementutils.origin read-only property is a usvstring containing the unicode serialization of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port,
80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:.
HTMLImageElement.alt - Web APIs
.container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%,
80%
80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%,
80%
80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; } result other images images simply showing objects or scenes should have alt text describing what's seen in the image.
HTMLImageElement.sizes - Web APIs
i sure can't.</p> <button id="break40">last width: 40em</button> <button id="break50">last width: 50em</button> </article> css article { margin: 1em; max-width: 60em; min-width: 20em; height: 100vh; border: 4em solid #8
80e4f; border-radius: 7em; padding: 1.5em; font: 16px "open sans", verdana, arial, helvetica, sans-serif; } article img { display: block; max-width: 100%; border: 1px solid #888; box-shadow: 0 0.5em 0.3em #888; margin-bottom: 1.25em; } javascript the javascript code handles the two buttons that let you toggle the third width option between 40em and 50em; this is done by handling t...
HTMLMarqueeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/htmlmarqueeelement" target="_top"><rect x="1" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmarqueeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement.
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 1
80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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</text></a><polyline points="111,25 121,20 121,...
HTMLPictureElement - Web APIs
le" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlpictureelement" target="_top"><rect x="311" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property, but inherits properties from its parent,...
HTMLUnknownElement - Web APIs
le" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlunknownelement" target="_top"><rect x="311" y="65" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlunknownelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties no specific property; inherits properties from its parent, htm...
Drag Operations - Web APIs
bug 460
801 see also html drag and drop api (overview) dragging and dropping multiple items recommended drag types html5 living standard: drag and drop ...
IDBCursorWithValue - Web APIs
text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} methods inherits methods from its parent interface, idbcursor.
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.99918
80801, 0.9873035442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment web audio apithe definition of 'iirfilternode()' in that specification.
ImageData() - Web APIs
let imagedata = new imagedata(200, 100); // imagedata { width: 200, height: 100, data: uint8clampedarray[
80000] } initializing imagedata with an array this example instantiates an imagedata object with pixel colors defined by an array.
Basic concepts - Web APIs
for example, while an app or a page in http://www.example.com/app/ can retrieve data from http://www.example.com/dir/, because they have the same origin, it cannot retrieve data from http://www.example.com:
8080/dir/ (different port) or https://www.example.com/dir/ (different protocol), because they have different origins.
Using IndexedDB - Web APIs
padding-right: 0.5em; } #msg { margin-bottom: 1em; } .action-success { padding: 0.5em; color: #00d21e; background-color: #eeeeee; border-radius: 0.2em; } .action-failure { padding: 0.5em; color: #ff1408; background-color: #eeeeee; border-radius: 0.2em; } .note { font-size: smaller; } .destructive { background-color: orange; } .destructive:hover { background-color: #ff
8000; } .destructive:active { background-color: red; } javascript content (function () { var compat_envs = [ ['firefox', ">= 16.0"], ['google chrome', ">= 24.0 (you may need to get google chrome canary), no blob storage support"] ]; var compat = $('#compat'); compat.empty(); compat.append('<ul id="compat-list"></ul>'); compat_envs.foreach(function(val, idx, array) { ...
KeyboardEvent.code - Web APIs
function updateposition(offset) { let rad = angle * (math.pi/1
80); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg transform.
Location: origin - Web APIs
the origin read-only property of the location interface is a usvstring containing the unicode serialization of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port,
80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:.
MediaCapabilities.encodingInfo() - Web APIs
example //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8.0", // valid content type width : 1920, // width of the video height : 10
80, // height of the video bitrate : 120000, // number of bits used to encode 1s of video framerate : 48 // number of frames making up that 1s.
MediaConfiguration - Web APIs
example //create a video configuration to be tested const videodecoderconfig = { type : 'file', // 'record', 'transmission', or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width :
800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaDecodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'file', // or 'media-source' video : { contenttype : "video/webm;codecs=vp8", // valid content type width :
800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaEncodingConfiguration - Web APIs
examples //create media configuration to be tested const mediaconfig = { type : 'record', // or 'transmission' video : { contenttype : "video/webm;codecs=vp8", // valid content type width :
800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
MediaRecorder() - Web APIs
if (navigator.mediadevices.getusermedia) { var constraints = { audio: true, video: true }; var chunks = []; var onsuccess = function(stream) { var options = { audiobitspersecond : 12
8000, videobitspersecond : 2500000, mimetype : 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; ...
MediaRecorder.mimeType - Web APIs
if (navigator.mediadevices) { console.log('getusermedia supported.'); var constraints = { audio: true, video: true }; var chunks = []; navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var options = { audiobitspersecond: 12
8000, videobitspersecond: 2500000, mimetype: 'video/mp4' } var mediarecorder = new mediarecorder(stream,options); m = mediarecorder; m.mimetype; // would return 'video/mp4' ...
MessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600
80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,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" str...
MouseEvent.initMouseEvent() - Web APIs
example html <div style="background:red; width:1
80px; padding:10px;"> <div id="out"></div> <input type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0,
80, 20, fa...
MouseEvent.region - Web APIs
<canvas id="canvas"></canvas> <script> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ctx.beginpath(); ctx.arc(70,
80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregion({id: "circle"}); canvas.addeventlistener("mousemove", function(event){ if(event.region) { console.log("hit region: " + event.region); } }); </script> ...
Navigator.cookieEnabled - Web APIs
for example, chrome
80+ does not allow creating cookies with samesite=none attribute, unless they are created over https and with secure attribute.
Navigator.getUserMedia() - Web APIs
navigator.getusermedia = navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia; if (navigator.getusermedia) { navigator.getusermedia({ audio: true, video: { width: 12
80, height: 720 } }, function(stream) { var video = document.queryselector('video'); video.srcobject = stream; video.onloadedmetadata = function(e) { video.play(); }; }, function(err) { console.log("the following error occurred: " + err.name); } ); } else { console.log("getusermedia not supported"); } ...
PannerNode.coneInnerAngle - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PannerNode.coneOuterAngle - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PannerNode.coneOuterGain - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PannerNode.orientationX - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PannerNode.orientationY - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PannerNode.orientationZ - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 1
80); // using cosine and sine here ensures the output values are always normalised // i.e.
PerformanceMeasure - Web APIs
81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following ...
RTCSessionDescription.sdp - Web APIs
syntax var value = sessiondescription.sdp; sessiondescription.sdp = value; value the value is a domstring containing an sdp message like this one: v=0 o=alice 2890844526 2890844526 in ip4 host.anywhere.com s= c=in ip4 host.anywhere.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/
8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 example // the remote description has been set previously on pc, an rtcpeerconnection alert(pc.remotedescription.sdp); specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.sdp' in ...
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/nodelist" target="_top"><rect x="1" y="1" width="
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/r...
Range.setStart() - Web APIs
main st.<br> dodge city, ks<br> 67
801<br> usa</p> <hr> <p>nodes in the original address:</p> <ol id="log"></ol> javascript const address = document.getelementbyid('address'); const log = document.getelementbyid('log'); // log info address.childnodes.foreach(node => { const li = document.createelement('li'); li.textcontent = `${node.nodename}, ${node.nodevalue}`; log.appendchild(li); }); // highlight the street and city co...
SVGClipPathElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgclippathelement" target="_top"><rect x="301" y="65" width="1
80" 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">svgclippathelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgel...
SVGDefsElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGExternalResourcesRequired - Web APIs
div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgexternalresourcesrequired" target="_top"><rect x="1" y="1" width="2
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgexternalresourcesrequired</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGFEOffsetElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfeoffsetelement" target="_top"><rect x="301" y="65" width="1
80" 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">svgfeoffsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent interf...
SVGFESpecularLightingElement - Web APIs
ment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgfespecularlightingelement" target="_top"><rect x="201" y="65" width="2
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfespecularlightingelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its par...
SVGFontFaceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontfaceelement" target="_top"><rect x="1" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properties from i...
SVGForeignObjectElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGGElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGGlyphRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, svgele...
SVGGradientElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="1
80" 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">svggradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants name value description svg_spreadmethod...
SVGGraphicsElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" 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">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatabl...
SVGImageElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGLinearGradientElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGMetadataElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svgmetadataelement" target="_top"><rect x="301" y="65" width="1
80" 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">svgmetadataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface doesn't implement any specific properties, but ...
SVGRadialGradientElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggradientelement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="1
80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this interface was removed in the svg 2 specification.
SVGSVGElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGSwitchElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGTSpanElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGTextContentElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGTextElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGTextPositioningElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
SVGTransformList - Web APIs
<svg id="my-svg" viewbox="0 0 300 2
80" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has bee...
SVGUseElement - Web APIs
dle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href=...
TextDecoder() - Web APIs
ows-1254' "cp1255", "windows-1255", "x-cp1255" 'windows-1255' "cp1256", "windows-1256", "x-cp1256" 'windows-1256' "cp1257", "windows-1257", "x-cp1257" 'windows-1257' "cp1258", "windows-1258", "x-cp1258" 'windows-1258' "x-mac-cyrillic", "x-mac-ukrainian" 'x-mac-cyrillic' "chinese", "csgb2312", "csiso58gb2312
80", "gb2312", "gb_2312", "gb_2312-
80", "gbk", "iso-ir-58", "x-gbk" 'gbk' "gb1
8030" 'gb1
8030' "hz-gb-2312" 'hz-gb-2312' "big5", "big5-hkscs", "cn-big5", "csbig5", "x-x-big5" 'big5' "cseucpkdfmtjapanese", "euc-jp", "x-euc-jp" 'euc-jp' "csiso2022jp", "iso-2022-jp" note: firefox used to accept iso-2022-jp-...
UIEvent.layerX - Web APIs
form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 1
80px; left:
80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so click...
UIEvent.layerY - Web APIs
form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 1
80px; left:
80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so click...
UIEvent.pageY - Web APIs
form = document.forms.form_coords; var parent_id = evt.target.parentnode.id; form.parentid.value = parent_id; form.pagexcoords.value = evt.pagex; form.pageycoords.value = evt.pagey; form.layerxcoords.value = evt.layerx; form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 1
80px; left:
80%; right:auto; width: 40%; border: solid blue 1px; padding: 20px; } #d3 { position: absolute; top: 240px; left: 20%; width: 50%; border: solid blue 1px; padding: 10px; } </style> </head> <body onmousedown="showcoords(event)"> <p>to display the mouse coordinates please click anywhere on the page.</p> <div id="d1"> <span>this is an un-positioned div so click...
URL.origin - Web APIs
the exact structure varies depending on the type of url: for http or https urls, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port,
80 and 443 respectively, if explicitely specified).
URL.port - Web APIs
examples const url = new url('https://mydomain.com:
80/svn/repos/'); console.log(url.port); // logs '
80' specifications specification status comment urlthe definition of 'url.port' in that specification.
URLUtilsReadOnly.host - Web APIs
syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.host var result = window.self.host; // returns:'developer.mozilla.org:
80' specifications specification status comment urlthe definition of 'urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.origin - Web APIs
the urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented url, that is, for http and https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port,
80 and 443 respectively, if explicitely specified).
URLUtilsReadOnly.port - Web APIs
syntax 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.
VTTCue - Web APIs
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 1
80px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seco...
VideoConfiguration - Web APIs
examples // create media configuration to be tested const mediaconfig = { type : 'file', // see mediadecodingconfiguration and mediaencodingconfiguration video : { contenttype : "video/webm;codecs=vp8", // valid content type width :
800, // width of the video height : 600, // height of the video bitrate : 10000, // number of bits used to encode 1s of video framerate : 30 // number of frames making up that 1s.
WEBGL_compressed_texture_astc - Web APIs
floor((width + 5) / 6) * floor((height + 5) / 6) * 16 118336 ext.compressed_rgba_astc_8x5_khr ext.compressed_srgb8_alpha8_astc_8x5_khr 8x5 3.20 floor((width + 7) / 8) * floor((height + 4) / 5) * 16 105472 ext.compressed_rgba_astc_8x6_khr ext.compressed_srgb8_alpha8_astc_8x6_khr 8x6 2.67 floor((width + 7) / 8) * floor((height + 5) / 6) * 16 8
8064 ext.compressed_rgba_astc_8x8_khr ext.compressed_srgb8_alpha8_astc_8x8_khr 8x8 2.00 floor((width + 7) / 8) * floor((height + 7) / 8) * 16 65536 ext.compressed_rgba_astc_10x5_khr ext.compressed_srgb8_alpha8_astc_10x5_khr 10x5 2.56 floor((width + 9) / 10) * floor((height + 4) / 5) * 16 85696 ext.compressed_rgba_astc_10x6_khr ext.comp...
WaveShaperNode.curve - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 1
80, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
WaveShaperNode.oversample - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 1
80, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
WaveShaperNode - Web APIs
amount : 50, n_samples = 44100, curve = new float32array(n_samples), deg = math.pi / 1
80, i = 0, x; for ( ; i < n_samples; ++i ) { x = i * 2 / n_samples - 1; curve[i] = ( 3 + k ) * x * 20 * deg / ( math.pi + k * math.abs(x) ); } return curve; }; ...
WebGLRenderingContext.vertexAttribPointer() - Web APIs
for example, the following vertex: { "position": [1.0, 2.0, 1.5], "normal": [1.0, 0.0, 0.0], "texcoord": [0.5, 0.25] } will be stored in the array buffer as follows: 00 00
80 3f 00 00 00 40 00 00 0c 3f 7f 00 00 00 7f ff 3f ff creating the array buffer first, we dynamically create the array buffer from json data using a dataview.
WebGLRenderingContext - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height :
80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].fo...
A basic 2D WebGL animation example - Web APIs
function animatescene() { gl.viewport(0, 0, glcanvas.width, glcanvas.height); gl.clearcolor(0.8, 0.9, 1.0, 1.0); gl.clear(gl.color_buffer_bit); let radians = currentangle * math.pi / 1
80.0; currentrotation[0] = math.sin(radians); currentrotation[1] = math.cos(radians); gl.useprogram(shaderprogram); uscalingfactor = gl.getuniformlocation(shaderprogram, "uscalingfactor"); uglobalcolor = gl.getuniformlocation(shaderprogram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector"); gl.uniform2fv(uscalingfactor, curr...
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // ...
Boilerplate 1 - Web APIs
]</button> <canvas>your browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") ...
Canvas size and WebGL - Web APIs
<p>compare the two canvases.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height :
80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].fo...
Clearing by clicking - Web APIs
ery simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" // cleaning after ourselves.
Clearing with colors - Web APIs
--> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; font-size : inherit; font-weight : 900; color : white; margin : auto; padding : 0.6em 1.2em; } #red-toggle { background-color : red; } #green-toggle { background-color : green; } #blue-toggle { background-color : blue; } wi...
Hello GLSL - Web APIs
hello glsl!</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </sc...
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); var gl, timer, rainingrect, scoredisplay, missesdisplay; function setupanimation (evt) { window.removeeventlis...
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, false); // variables to hold the webgl context, and the color and // position of animated squares.
Simple color animation - Web APIs
e webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); // a variable to hold a timer that drives the animation.
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 2
80px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribute vec2 position; void main() { gl_position = vec4(position, 0.0, 1.0); gl_pointsize = 128.0; } </script>...
Matrix math for the web - Web APIs
for instance, to scale something down by
80%, move it down 200 pixels, and then rotate about the origin 90 degrees would look something like the following in pseudo-code.
Adding 2D content to a WebGL context - Web APIs
const fieldofview = 45 * math.pi / 1
80; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the result.
Getting started with WebGL - Web APIs
<body> <canvas id="glcanvas" width="640" height="4
80"></canvas> </body> preparing the webgl context the main() function in our javascript code, is called when our script is loaded.
WebSocket: error event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples // create websocket connection const socket = new websocket('ws://localhost:
8080'); // listen for possible errors socket.addeventlistener('error', function (event) { console.log('websocket error: ', event); }); specifications specification status html living standardthe definition of 'websocket error' in that specification.
WebSocket: message event - Web APIs
const socket = new websocket('ws://localhost:
8080'); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket message' in that specification.
WebSocket: open event - Web APIs
const socket = new websocket('ws://localhost:
8080'); // connection opened socket.addeventlistener('open', (event) => { socket.send('hello server!'); }); specifications specification status html living standardthe definition of 'websocket open' in that specification.
WebSocket - Web APIs
const socket = new websocket('ws://localhost:
8080'); // connection opened socket.addeventlistener('open', function (event) { socket.send('hello server!'); }); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of 'websocket' in that specification.
Writing a WebSocket server in Java - Web APIs
java.net.serversocket; import java.net.socket; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base64; import java.util.scanner; import java.util.regex.matcher; import java.util.regex.pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception { serversocket server = new serversocket(
80); try { system.out.println("server has started on 127.0.0.1:
80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket getinputstream() returns an input stream for this socket.
Web Video Text Tracks Format (WebVTT) - Web APIs
it is one of the good features supported by webvtt is the localization and use of class elements which can be used in same way they are used in html and css to classify the style for particular type of objects, but here these are used for styling and classifying the cues as shown below: webvtt 04:02.500 --> 04:05.000 j’ai commencé le basket à l'âge de 13, 14 ans 04:05.001 --> 04:07.
800 sur les <i.foreignphrase><lang en>playground</lang></i>, ici à montpellier in the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <i> tag is for italics.
Movement, orientation, and motion: A WebXR example - Web APIs
const viewerstartposition = vec3.fromvalues(0, 0, -10); const viewerstartorientation = vec3.fromvalues(0, 0, 1.0); const cubeorientation = vec3.create(); const cubematrix = mat4.create(); const mousematrix = mat4.create(); const inverseorientation = quat.create(); const radians_per_degree = math.pi / 1
80.0; the first two—viewerstartposition and viewerstartorientation—indicate where the viewer will be placed relative to the center of the space, and the direction in which they'll initially be looking.
Using IIR filters - Web APIs
something like this is acceptable: let feedforward = [0.00020298, 0.0004059599, 0.00020298]; our feedback values cannot start with zero, otherwise on the first pass nothing would be sent back: let feedbackward = [1.0126964558, -1.99918
80801, 0.9873035442]; note: these values are calculated based on the lowpass filter specified in the filter characteristics of the web audio api specification.
Web Locks API - Web APIs
that may be used as needed, including: returning values from the asynchronous task shared and exclusive lock modes conditional acquisition diagnostics to query the state of locks in an origin an escape hatch to protect against deadlocks locks are scoped to origins; the locks acquired by a tab from https://example.com have no effect on the locks acquired by a tab from https://example.org:
8080 as they are separate origins.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
is 100: */ var otwexample2 = new typewriter('#controls'); /* you can also change the frame rate value modifying the "rate" property; for example: */ // otwexample2.rate = 150; onload = function () { otwexample1.play(); otwexample2.play(); }; </script> <style type="text/css"> span.intlink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 1
80px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p...
XMLDocument - Web APIs
h="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="
80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
Alerts - Accessibility
d="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="
80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or entered name are valid.
:empty - CSS: Cascading Style Sheets
--></p> </div> css body { display: flex; justify-content: space-around; } .box { background: pink; height:
80px; width:
80px; } .box:empty { background: lime; } result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
:invalid - CSS: Cascading Style Sheets
l> <input type="email" id="email_input" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #
800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.
@media - CSS: Cascading Style Sheets
<mf-value>where <mf-name> = <ident><mf-value> = <number> | <dimension> | <ident> | <ratio> examples testing for print and screen media types @media print { body { font-size: 10pt; } } @media screen { body { font-size: 13px; } } @media screen, print { body { line-height: 1.2; } } @media only screen and (min-width: 320px) and (max-width: 4
80px) and (resolution: 150dpi) { body { line-height: 1.4; } } introduced in media queries level 4 is a new range syntax that allows for less verbose media queries when testing for any feature accepting a range, as shown in the below examples: @media (height > 600px) { body { line-height: 1.4; } } @media (400px <= width <= 700px) { body { line-height: 1.4; } } for more examples, p...
max-width - CSS: Cascading Style Sheets
syntax /* keyword value */ max-width: auto; /* <length> values */ max-width: 600px; max-width:
80em; max-width: 15cm; /* <percentage> value */ max-width: 75%; values auto the used value is calculated from the other css descriptors' values.
@viewport - CSS: Cascading Style Sheets
formal syntax @viewport { <group-rule-body> } examples setting viewport size, zoom, and orientation @viewport { min-width: 640px; max-width:
800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status comment css round display level 1the definition of '@viewport' in that specification.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .box1 { grid-column: 1; grid-row: 2; } <div class="wrapper"> <div class="box box1"><a href="">one</a></div> <div class="box box2"><a href="">two</a></div> <div class="box box3"><a href="">three</a></div> <div class="box box4"><a href="">four</a></div> <div class="box box5"><a hr...
CSS Grid Layout - CSS: Cascading Style Sheets
* {box-sizing: border-box;} .wrapper { max-width: 940px; margin: 0 auto; } .wrapper > div { border: 2px solid rgb(233,171,88); border-radius: 5px; background-color: rgba(233,171,88,.5); padding: 1em; color: #d94
80f; } html <div class="wrapper"> <div class="one">one</div> <div class="two">two</div> <div class="three">three</div> <div class="four">four</div> <div class="five">five</div> <div class="six">six</div> </div> css .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .one { grid-column: 1 / 3; grid-row: 1...
Stacking context example 1 - CSS: Cascading Style Sheets
#2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height:
80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: abso...
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height:
80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; position: absolute; width: 200px; height: 70px; to...
Stacking without the z-index property - CSS: Cascading Style Sheets
ative;</div> <div id="rel2" class="relative"> <b>div #3</b><br />position: relative;</div> <div id="abs2" class="absolute"> <b>div #4</b><br />position: absolute;</div> <div id="sta1" class="static"> <b>div #5</b><br />position: static;</div> css b { font-family: sans-serif; } div { padding: 10px; border: 1px dashed; text-align: center; } .static { position: static; height:
80px; background-color: #ffc; border-color: #996; } .absolute { position: absolute; width: 150px; height: 350px; background-color: #fdd; border-color: #900; opacity: 0.7; } .relative { position: relative; height:
80px; background-color: #cfc; border-color: #696; opacity: 0.7; } #abs1 { top: 10px; left: 10px; } #rel1 { top: 30px; margin: 0px 50px 0px 50px; } #re...
The stacking context - CSS: Cascading Style Sheets
: 0; } html { padding: 20px; font: 12px/20px arial, sans-serif; } div { opacity: 0.7; position: relative; } h1 { font: inherit; font-weight: bold; } #div1, #div2 { border: 1px dashed #696; padding: 10px; background-color: #cfc; } #div1 { z-index: 5; margin-bottom: 190px; } #div2 { z-index: 2; } #div3 { z-index: 4; opacity: 1; position: absolute; top: 40px; left: 1
80px; width: 330px; border: 1px dashed #900; background-color: #fdd; padding: 40px 20px 20px; } #div4, #div5 { border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 1
80px; width: 150px; ...
Using CSS transitions - CSS: Cascading Style Sheets
erties animated.</p> <div class="box">sample</div> </body> css content .box { border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; transition: width 2s, height 2s, background-color 2s, transform 2s; } .box:hover { background-color: #ffcccc; width: 200px; height: 200px; transform: rotate(1
80deg); } when property value lists are of different lengths if any property's list of values is shorter than the others, its values are repeated to make them match.
animation-delay - CSS: Cascading Style Sheets
syntax /* single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* multiple animations */ animation-delay: 2.1s, 4
80ms; values <time> the time offset, from the moment at which the animation is applied to the element, at which the animation should begin.
animation-timing-function - CSS: Cascading Style Sheets
whether the animation holds temporarily at 0%, 20%, 40%, 60% and
80%, on the 20%, 40%, 60%,
80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function...
backface-visibility - CSS: Cascading Style Sheets
{ display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px...
background-position - CSS: Cascading Style Sheets
html <div class="exampleone">example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div> css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height:
80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image...
break-inside - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } body { width:
80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result ...
clip - CSS: Cascading Style Sheets
otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 2
80px; clip: rect(119px 255px 229px
80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://u...
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 1
80, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status comment css color adjustme...
color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples making text red the following are all ways to make a paragraph's text red: p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%, 50%); } /* 50% translucent */ p { color: #ff0000
80; } p { color: rgba(255, 0, 0, 0.5); } p { color: hsla(0, 100%, 50%, 0.5); } specifications specification status comment css color module level 4the definition of 'color' in that specification.
hue-rotate() - CSS: Cascading Style Sheets
examples hue-rotate(-90deg) /* same as 270deg rotation */ hue-rotate(0deg) /* no effect */ hue-rotate(90deg) /* 90deg rotation */ hue-rotate(.5turn) /* 1
80deg rotation */ hue-rotate(405deg) /* same as 45deg rotation */ specifications specification status filter effects module level 1the definition of 'hue-rotate()' in that specification.
font-size - CSS: Cascading Style Sheets
syntax /* <absolute-size> values */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; font-size: xxx-large; /* <relative-size> values */ font-size: smaller; font-size: larger; /* <length> values */ font-size: 12px; font-size: 0.8em; /* <percentage> values */ font-size:
80%; /* global values */ font-size: inherit; font-size: initial; font-size: unset; the font-size property is specified in one of the following ways: as one of the absolute-size or relative-size keywords as a <length> or a <percentage>, relative to the parent element's font size values xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large absolute-size keywords, based on ...
grid-auto-rows - CSS: Cascading Style Sheets
-rows: max-content; grid-auto-rows: auto; /* <length> values */ grid-auto-rows: 100px; grid-auto-rows: 20cm; grid-auto-rows: 50vmax; /* <percentage> values */ grid-auto-rows: 10%; grid-auto-rows: 33.3%; /* <flex> values */ grid-auto-rows: 0.5fr; grid-auto-rows: 3fr; /* minmax() values */ grid-auto-rows: minmax(100px, auto); grid-auto-rows: minmax(max-content, 2fr); grid-auto-rows: minmax(20%,
80vmax); /* multiple track-size values */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%,
80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* global values */ grid-auto-rows: inherit; grid-auto-rows: init...
grid-column-end - CSS: Cascading Style Sheets
tart: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
tart: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-column-start' in that specification.
grid-row-end - CSS: Cascading Style Sheets
tart: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
tart: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3; } .box2 { grid-column-start: 1; grid-row-start: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d94
80f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status comment css grid layoutthe definition of 'grid-row-start' in that specification.
grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow
80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.
inset-block-end - CSS: Cascading Style Sheets
rties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
s except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c
800; } specifications specification status comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
ties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
irections are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
ation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
margin-block-end - CSS: Cascading Style Sheets
e length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
ngth; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
ified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
th; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
ied as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
mask-size - CSS: Cascading Style Sheets
e linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40%
80%">40%
80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; });...
padding-block-end - CSS: Cascading Style Sheets
aining blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
al-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
al-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c
800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
idth of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c
800; } specifications specification status comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c
800; } result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
perspective-origin - CSS: Cascading Style Sheets
e { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); }...
perspective - CSS: Cascading Style Sheets
{ display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px...
place-self - CSS: Cascading Style Sheets
html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows:
80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications ...
rotate - CSS: Cascading Style Sheets
on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 1
80deg; } result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
shape-image-threshold - CSS: Cascading Style Sheets
</p> css #gradient-shape { width: 150px; height: 150px; float: left; background-image: linear-gradient(30deg, black, transparent
80%, transparent); shape-outside: linear-gradient(30deg, black, transparent
80%, transparent); shape-image-threshold: 0.2; } the shape is established here using background-image with a linear gradient rather than an image file.
transform-box - CSS: Cascading Style Sheets
svg{ width:
80vh; border:1px solid #d9d9d9; position:absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } #box{ transform-origin:50% 50%; /*+++++++++++++++++++++++++++*/ /* if i remove this rule the pen won't work properly on chrome for mac, ff, safari will still work properly on chrome for pc & opera*/ transform-box: fill-box; /*alternatively i can use transform-origin:15...
matrix() - CSS: Cascading Style Sheets
sian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width:
80px; height:
80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1,
80,
80); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.
matrix3d() - CSS: Cascading Style Sheets
0deg) matrix3d(1,0,0,0,0,1,6,0,0,0,1,0,50,100,0,1.1); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } result ...
rotate3d() - CSS: Cascading Style Sheets
coordinates on ℝ3 1+(1-cos(a))(x2-1)z·sin(a)+xy(1-cos(a))-y·sin(a)+xz·(1-cos(a))-z·sin(a)+xy·(1-cos(a))1+(1-cos(a))(y2-1)x·sin(a)+yz·(1-cos(a))ysin(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective:
800px; } div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective:
800px; } div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -...
rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width:
80px; height:
80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.
scale() - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5...
scale3d() - CSS: Cascading Style Sheets
sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3...
scaleX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .scaled { transform: scalex(0.6); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scalex()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
10001000s 1000010000s00001 examples html <div>normal</div> <div class="perspective">translated</div> <div class="scaled-translated">scaled</div> css div { width:
80px; height:
80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result specifications ...
skew() - CSS: Cascading Style Sheets
ates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width:
80px; height:
80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width:
80px; height:
80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specificati...
skewX() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width:
80px; height:
80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width:
80px; height:
80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.
transform-style - CSS: Cascading Style Sheets
: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front { background: rgba(90,90,90,.7); transform: translatez(50px); } .back { background: rgba(0,210,0,.7); transform: rotatey(1
80deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript...
transition-timing-function - CSS: Cascading Style Sheets
whether the transition holds temporarily at 0%, 20%, 40%, 60% and
80%, on the 20%, 40%, 60%,
80% and 100%, or makes 5 stops between the 0% and 100% along the transition, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous f...
var() - CSS: Cascading Style Sheets
root { --main-bg-color: pink; } body { background-color: var(--main-bg-color); } /* fallback */ /* in the component’s style: */ .component .header { color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */ } .component .text { color: var(--text-color, black); } /* in the larger application’s style: */ .component { --text-color: #0
80; } specifications specification status comment css custom properties for cascading variables module level 1the definition of 'var()' in that specification.
z-index - CSS: Cascading Style Sheets
nts html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width:
80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status comment css level 2 (revision 1)the definition of 'z-index' in that specification.
Challenge solutions - Developer guides
solution the following values are reasonable approximations of the named colors: strong { color: #f00; /* red */ background-color: #ddf; /* pale blue */ font: 200% serif; } .carrot { color: #fa0; /* orange */ } .spinach { color: #0
80; /* dark green */ } p { color: #00f; /* blue */ } content add an image challenge add a one rule to your stylesheet so that it displays the image at the start of each line.
Orientation and motion data explained - Developer guides
beta rotation around the x axis -- that is, tipping the device away from or toward the user -- causes the beta rotation angle to change: the beta angle is 0° when the device's top and bottom are the same distance from the earth's surface; it increases toward 1
80° as the device is tipped forward toward the user, and it decreases toward -1
80° as the device is tipped backward away from the user.
HTML attribute: max - HTML: Hypertext Markup Language
syntax for max values for other elements input type syntax example <progress> <number> <progress id="file" max="100" value="70"> 70% </progress> <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="
80" value="40"> at 40/100</meter> ...
HTML attribute: min - HTML: Hypertext Markup Language
syntax for min values for other elements input type syntax example <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="
80" value="40"> at 40/100</meter> impact on step the value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0.
HTML attribute: pattern - HTML: Hypertext Markup Language
">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}" title="4 to 8 lowercase letters"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size:
80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: accessibility concerns when a control has a pattern attribute, the title attribute, if used, must describe the pattern.
<div>: The Content Division element - HTML: Hypertext Markup Language
html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(1
80deg, #fff, #ddd 40%, #ccc); } result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<input type="button"> - HTML: Hypertext Markup Language
'2d'); ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); var colorpicker = document.queryselector('input[type="color"]'); var sizepicker = document.queryselector('input[type="range"]'); var output = document.queryselector('.output'); var clearbtn = document.queryselector('input[type="button"]'); // covert degrees to radians function degtorad(degrees) { return degrees * math.pi / 1
80; }; // update sizepicker output value sizepicker.oninput = function() { output.textcontent = sizepicker.value; } // store mouse pointer coordinates, and whether the button is pressed var curx; var cury; var pressed = false; // update mouse pointer coordinates document.onmousemove = function(e) { curx = (window.event) ?
<input type="email"> - HTML: Hypertext Markup Language
ailaddress">your e-mail address</label><br> <input id="emailaddress" type="email" size="64" maxlength="64" required placeholder="username@beststartupever.com" pattern=".+@beststartupever.com" title="please provide only a best startup ever corporate e-mail address"> </div> <div class="messagebox"> <label for="message">request</label><br> <textarea id="message" cols="
80" rows="8" required placeholder="my shoes are too tight, and i have forgotten how to dance."></textarea> </div> <input type="submit" value="send request"> </form> our <form> contains one <input> of type email for the user's e-mail address, a <textarea> to enter their message for it into, and an <input> of type "submit", which creates a button to submit the form.
<input type="file"> - HTML: Hypertext Markup Language
part/form-data"> <div> <label for="image_uploads">choose images to upload (png, jpg)</label> <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> </div> <div class="preview"> <p>no files currently selected for upload</p> </div> <div> <button>submit</button> </div> </form> html { font-family: sans-serif; } form { width: 5
80px; background: #ccc; margin: 0 auto; padding: 20px; border: 1px solid black; } form ol { padding-left: 0; } form li, div > p { background: #eee; display: flex; justify-content: space-between; margin-bottom: 10px; list-style-type: none; border: 1px solid black; } form img { height: 64px; order: 1; } form p { line-height: 32px; padding-left: 10px; } form label, fo...
<input type="text"> - HTML: Hypertext Markup Language
rm> <div> <label for="uname">choose a username: </label> <input type="text" id="uname" name="name" required size="45" pattern="[a-z]{4,8}"> <span class="validity"></span> <p>usernames must be lowercase and 4-8 characters in length.</p> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; position: relative; } p { font-size:
80%; color: #999; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } this renders like so: examples you can see good examples of text inputs used in context in our your first html form and how to structure an html form art...
<menu> - HTML: Hypertext Markup Language
examples context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height:
80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known browsers yet.
<menuitem> - HTML: Hypertext Markup Language
</menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height:
80px; background-color: lightgreen; } result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
html <p>he got a <meter low="69" high="
80" max="100" value="84">b</meter> on the exam.</p> result on google chrome, the resulting meter looks like this: specifications specification status comment html living standardthe definition of '<meter>' in that specification.
<picture>: The Picture element - HTML: Hypertext Markup Language
<picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-4
80.png, logo-4
80-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture> the type attribute the type attribute specifies a mime type for the resource url(s) in the <source> element's srcset attribute.
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
<picture> <source srcset="mdn-logo-wide.png" media="(min-width:
800px)"> <source srcset="mdn-logo-medium.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="mdn web docs"> </picture> with the <picture> element, you must always include an <img> with a fallback image, with an alt attribute to ensure accessibility (unless the image is an irrelevant background decorative image).
<table>: The Table element - HTML: Hypertext Markup Language
example <table> <caption>color names and values</caption> <tbody> <tr> <th scope="col">name</th> <th scope="col">hex</th> <th scope="col">hsla</th> <th scope="col">rgba</th> </tr> <tr> <th scope="row">teal</th> <td><code>#51f6f6</code></td> <td><code>hsla(1
80, 90%, 64%, 1)</code></td> <td><code>rgba(81, 246, 246, 1)</code></td> </tr> <tr> <th scope="row">goldenrod</th> <td><code>#f6bc57</code></td> <td><code>hsla(38, 90%, 65%, 1)</code></td> <td><code>rgba(246, 188, 87, 1)</code></td> </tr> </tbody> </table> providing a declaration of scope="col" on a <th> element will help describe that the cell is at the...
<textarea> - HTML: Hypertext Markup Language
nosafari ios no support nosamsung internet android no support noautocompletechrome full support 66edge no support nonotes no support nonotes notes see issue 75
8078.firefox full support 59ie no support noopera no support nosafari full support yesnotes full support yesnotes notes see bug 150731.webview android full supp...
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
one of the sixteen predefined color strings may be used: black = "#000000" green = "#00
8000" silver = "#c0c0c0" lime = "#00ff00" gray = "#
808080" olive = "#
808000" white = "#ffffff" yellow = "#ffff00" maroon = "#
800000" navy = "#0000
80" red = "#ff0000" blue = "#0000ff" purple = "#
8000
80" teal = "#00
8080" fuchsia = ...
<th> - HTML: Hypertext Markup Language
this attribute may be used with one of sixteen predefined color strings: black = "#000000" green = "#00
8000" silver = "#c0c0c0" lime = "#00ff00" gray = "#
808080" olive = "#
808000" white = "#ffffff" yellow = "#ffff00" maroon = "#
800000" navy = "#0000
80" red = "#ff0000" blue = "#0000ff" purple = "#
8000
80" teal = "#00
8080" fuchsia = ...
<thead>: The Table Head element - HTML: Hypertext Markup Language
one of the sixteen predefined color strings may be used: black = "#000000" green = "#00
8000" silver = "#c0c0c0" lime = "#00ff00" gray = "#
808080" olive = "#
808000" white = "#ffffff" yellow = "#ffff00" maroon = "#
800000" navy = "#0000
80" red = "#ff0000" blue = "#0000ff" purple = "#
8000
80" teal = "#00
8080" fuchsia = ...
OPTIONS - HTTP
http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-age=604
800 date: thu, 13 oct 2016 11:45:00 gmt server: eos (lax004/2813) preflighted requests in cors in cors, a preflight request is sent with the options method so that the server can respond if it is acceptable to send the request.
An overview of HTTP - HTTP
the path of the resource to fetch; the url of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, developer.mozilla.org), or the tcp port (here,
80).
Proxy servers and tunneling - HTTP
the example below will work in an environment where the internal dns server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: function findproxyforurl(url, host) { if (isresolvable(host)) return "direct"; else return "proxy proxy.mydomain.com:
8080"; } see proxy auto-configuration (pac) for more examples.
Redirections in HTTP - HTTP
nginx in nginx, you create a specific server block for the content you want to redirect: server { listen
80; server_name example.com; return 301 $scheme://www.example.com$request_uri; } to apply a redirect to a directory or only certain pages, use the rewrite directive: rewrite ^/images/(.*)$ https://images.example.com/$1 redirect; rewrite ^/images/(.*)$ https://images.example.com/$1 permanent; iis in iis, you use the <httpredirect> element to configure redirections.
Enumerability and ownership of properties - JavaScript
erableandnotenumerable); }, // private static property checker callbacks _enumerable: function(obj, prop) { return obj.propertyisenumerable(prop); }, _notenumerable: function(obj, prop) { return !obj.propertyisenumerable(prop); }, _enumerableandnotenumerable: function(obj, prop) { return true; }, // inspired by http://stackoverflow.com/a/
8024294/271577 _getpropertynames: function getallpropertynames(obj, iterateselfbool, iterateprototypebool, includepropcb) { var props = []; do { if (iterateselfbool) { object.getownpropertynames(obj).foreach(function(prop) { if (props.indexof(prop) === -1 && includepropcb(obj, prop)) { props.push(prop); ...
Text formatting - JavaScript
'\u{2f
804}' // the same with simple unicode escapes '\ud87e\udc04' string objects the string object is a wrapper around the string primitive data type.
RangeError: argument is not a valid code point - JavaScript
geerror string.fromcodepoint(infinity); // rangeerror string.fromcodepoint(-1); // rangeerror string.fromcodepoint(3.14); // rangeerror string.fromcodepoint(3e-2); // rangeerror string.fromcodepoint(nan); // rangeerror valid cases string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" string.fromcodepoint(0x2f
804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307) // "\ud834\udf06a\ud834\udf07" ...
Arrow function expressions - JavaScript
{ 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; } > z vm51757:1 uncaught referenceerror: z is not defined at <anonymous>:1:1 (anonymous) @ vm51757:1 > f2(4) vm51712:1 uncaught referenceerror: z is not defined at f2 (<anonymous>:1:29) at <anonymous>:1:1 f2 @ vm51712:1 (anonymous) @ vm51
800:1 > f3 = x => (z1 = x + 1) x => (z1 = x + 1) > z1 vm51891:1 uncaught referenceerror: z1 is not defined at <anonymous>:1:1 (anonymous) @ vm51891:1 > f3(10) 11 > z1 11 f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.
Array - JavaScript
let years = [1950, 1960, 1970, 19
80, 1990, 2000, 2010] console.log(years.0) // a syntax error console.log(years[0]) // works properly renderer.3d.settexture(model, 'character.png') // a syntax error renderer['3d'].settexture(model, 'character.png') // works properly in the 3d example, '3d' had to be quoted (because it begins with a digit).
BigInt.asIntN() - JavaScript
const max = 2n ** (64n - 1n) - 1n; bigint.asintn(64, max); // ↪ 9223372036854775
807n bigint.asintn(64, max + 1n); // ↪ -9223372036854775
807n // negative because of overflow specifications specification ecmascript (ecma-262)the definition of 'bigint.asintn()' in that specification.
BigInt - JavaScript
const multi = previousmaxsafe * 2n // ↪ 1
8014398509481982n const subtr = multi – 10n // ↪ 1
8014398509481972n const mod = multi % 10n // ↪ 2n const bign = 2n ** 54n // ↪ 1
8014398509481984n bign * -1n // ↪ –1
8014398509481984n the / operator also works as expected with whole numbers.
Date.now() - JavaScript
// reduced time precision (2ms) in firefox 60 date.now() // 1519211
809934 // 1519211810362 // 1519211811670 // ...
Date - JavaScript
let today = new date() let birthday = new date('december 17, 1995 03:24:00') let birthday = new date('1995-12-17t03:24:00') let birthday = new date(1995, 11, 17) // the month is 0-indexed let birthday = new date(1995, 11, 17, 3, 24, 0) let birthday = new date(62
8021
800000) // passing epoch timestamp to get date, month and year or time let [month, date, year] = ( new date() ).tolocaledatestring().split("/") let [hour, minute, second] = ( new date() ).tolocaletimestring().slice(0,7).split(":") two digit years map to 1900 – 1999 in order to create and get dates between the years 0 and 99 the date.prototype.setfullyear() and date.prototy...
Intl.DateTimeFormat() constructor - JavaScript
var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // tolocalestring without arguments depends on the implementation, // the default locale, and the default time zone console.log(new intl.datetimeformat().format(date)); // → "12/19/2012" if run with en-us locale (language) and time zone america/los_angeles (utc-0
800) using timestyle and datestyle let o = new intl.datetimeformat("en" , { timestyle: "short" }); console.log(o.format(date.now())); // "13:31 am" let o = new intl.datetimeformat("en" , { datestyle: "short" }); console.log(o.format(date.now())); // "07/07/20" let o = new intl.datetimeformat("en" , { timestyle: "medium", datestyle: "short" }); console.log(o.format(date.now())); // "07/07...
Math.LN2 - JavaScript
examples using math.ln2 the following function returns the natural log of 2: function getnatlog2() { return math.ln2; } getnatlog2(); // 0.6931471
805599453 specifications specification ecmascript (ecma-262)the definition of 'math.ln2' in that specification.
Math.atan2() - JavaScript
examples using math.atan2() math.atan2(90, 15); // 1.4056476493
802699 math.atan2(15, 90); // 0.16514867741462683 math.atan2(±0, -0); // ±pi.
Math.cosh() - JavaScript
polyfill this can be emulated with the help of the math.exp() function: math.cosh = math.cosh || function(x) { return (math.exp(x) + math.exp(-x)) / 2; } or using only one call to the math.exp() function: math.cosh = math.cosh || function(x) { var y = math.exp(x); return (y + 1 / y) / 2; }; examples using math.cosh() math.cosh(0); // 1 math.cosh(1); // 1.5430
806348152437 math.cosh(-1); // 1.5430
806348152437 specifications specification ecmascript (ecma-262)the definition of 'math.cosh' in that specification.
Math.fround() - JavaScript
var mantissa = math.round((leading - arg / powexp) * 0x
800000); if (mantissa <= -0x
800000) return sign * infinity; return sign * powexp * (leading - mantissa / 0x
800000); }; examples using math.fround() the number 1.5 can be precisely represented in the binary numeral system, and is identical in 32-bit and 64-bit: math.fround(1.5); // 1.5 math.fround(1.5) === 1.5; // true however, the number 1.337 cannot be precisely represented in the binary ...
Math.imul() - JavaScript
we can remove an integer coersion from the statement above because: // 0x1fffff7fc00001 + 0xffc00000 = 0x1fffffff
800001 // 0x1fffffff
800001 < number.max_safe_integer /*0x1fffffffffffff*/ if (opa & 0xffc00000 /*!== 0*/) result += (opa & 0xffc00000) * opb |0; return result |0; }; examples using math.imul() math.imul(2, 4); // 8 math.imul(-1, 8); // -8 math.imul(-2, -2); // 4 math.imul(0xffffffff, 5); // -5 math.imul(0xfffffffe, 5); // -10 specifications specificat...
Math.log1p() - JavaScript
x : x * (math.log(x + 1) / nearx); }; examples using math.log1p() math.log1p(1); // 0.6931471
805599453 math.log1p(0); // 0 math.log1p(-1); // -infinity math.log1p(-2); // nan specifications specification ecmascript (ecma-262)the definition of 'math.log1p' in that specification.
Math.sin() - JavaScript
examples using math.sin() math.sin(0); // 0 math.sin(1); // 0.841470984
8078965 math.sin(math.pi / 2); // 1 specifications specification ecmascript (ecma-262)the definition of 'math.sin' in that specification.
Math.sinh() - JavaScript
polyfill this can be emulated with the help of the math.exp() function: math.sinh = math.sinh || function(x) { return (math.exp(x) - math.exp(-x)) / 2; } or using only one call to the math.exp() function: math.sinh = math.sinh || function(x) { var y = math.exp(x); return (y - 1 / y) / 2; } examples using math.sinh() math.sinh(0); // 0 math.sinh(1); // 1.175201193643
8014 specifications specification ecmascript (ecma-262)the definition of 'math.sinh' in that specification.
Math.tan() - JavaScript
function gettandeg(deg) { var rad = deg * math.pi/1
80; return math.tan(rad); } specifications specification ecmascript (ecma-262)the definition of 'math.tan' in that specification.
Math - JavaScript
since humans tend to think in degrees, and some functions (such as css transforms) can accept degrees, it is a good idea to keep functions handy that convert between the two: function degtorad(degrees) { return degrees * (math.pi / 1
80); }; function radtodeg(rad) { return rad / (math.pi / 1
80); }; calculating the height of an equalateral triangle if we want to calculate the height of an equalateral triangle, and we know its side length is 100, we can use the formulae length of the adjacent multiplied by the tangent of the angle is equal to the opposite.
Number.EPSILON - JavaScript
property attributes of number.epsilon writable no enumerable no configurable no description the epsilon property has a value of approximately 2.2204460492503130
808472633361816e-16, or 2-52.
encodeURIComponent() - JavaScript
// %3b%2c%2f%3f%3a%40%26%3d%2b%24 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud
800\udfff')); // lone high surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\ud
800')); // lone low surrogate throws "urierror: malformed uri sequence" console.log(encodeuricomponent('\udfff')); use encodeuricomponent() on user-entered fields from forms post'd to the server.
parseInt() - JavaScript
turn number(value) } else { return nan } } console.log(filterint('421')) // 421 console.log(filterint('-421')) // -421 console.log(filterint('+421')) // 421 console.log(filterint('infinity')) // infinity console.log(filterint('421e+0')) // nan console.log(filterint('421hop')) // nan console.log(filterint('hop1.61
803398875')) // nan console.log(filterint('1.61
803398875')) // nan examples using parseint the following examples all return 15: parseint('0xf', 16) parseint('f', 16) parseint('17', 8) parseint(021, 8) parseint('015', 10) // but `parseint(015, 10)` will return 13 parseint(15.99, 10) parseint('15,123', 10) parseint('fxx123', 16) parseint('1111', 2) parseint('15 * 3', 10) parseint('15e2...
Lexical grammar - JavaScript
'\u{2f
804}' // cjk compatibility ideograph-2f
804 (u+2f
804) // the same character represented as a surrogate pair '\ud87e\udc04' regular expression literals see also regexp for more information.
Equality (==) - JavaScript
o"); const string4 = new string("hello"); console.log(string1 == string2); // true console.log(string1 == string3); // true console.log(string2 == string3); // true console.log(string3 == string4); // false console.log(string4 == string4); // true comparing dates and strings const d = new date('december 17, 1995 03:24:00'); const s = d.tostring(); // for example: "sun dec 17 1995 03:24:00 gmt-0
800 (pacific standard time)" console.log(d == s); //true specifications specification ecmascript (ecma-262)the definition of 'equality operators' in that specification.
export - JavaScript
r:'white', thickness:'2px' }, draw: function() { console.log('from graph draw function'); } } export { cube, foo, graph }; then in the top-level module included in your html page, we could have: import { cube, foo, graph } from './my-module.js'; graph.options = { color:'blue', thickness:'3px' }; graph.draw(); console.log(cube(3)); // 27 console.log(foo); // 4.555
806215962888 it is important to note the following: you need to include this script in your html with a <script> element of type="module", so that it gets recognised as a module and dealt with appropriately.
Template literals (Template strings) - JavaScript
let str = string.raw`hi\n${2+3}!`; // "hi\n5!" str.length; // 6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es2016 behavior as of ecmascript 2016, tagged templates conform to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f
804} hexadecimal escapes started by "\x", for example \xa9 octal literal escapes started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, because, per ecmascript grammar, a parser looks for valid unicode escape sequences, but finds malformed syntax: latex`\unicode` // throws in older ecmascript versions (es2016 ...
screenshots - Web app manifests
examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "12
80x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "12
80x720", "type": "image/webp" } ] specification specification status comment feedback web app manifestthe definition of 'screenshots' in that specification.
azimuth - SVG: Scalable Vector Graphics
ight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="
80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="
80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'azimuth' in that sp...
color-rendering - SVG: Scalable Vector Graphics
t on the following 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rend...
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l1
80,20 m20,50 l1
80,50 m20,
80 l1
80,
80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="
80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top ...
dy - SVG: Scalable Vector Graphics
en elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="
80%" y2="
80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
elevation - SVG: Scalable Vector Graphics
t> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="
80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="
80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'elevation' in that ...
filter - SVG: Scalable Vector Graphics
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 animatable yes for a description of the values see the css filter property.
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="
80" viewbox="0 0 500
80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
fr - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" ...
fx - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" ...
fy - SVG: Scalable Vector Graphics
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" ...
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> ...
marker-end - SVG: Scalable Vector Graphics
<svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,
80 100,20" marker-end="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the final vertex.
marker-mid - SVG: Scalable Vector Graphics
e>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,
80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the given vertices.
marker-start - SVG: Scalable Vector Graphics
<svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,
80 100,20" marker-start="url(#triangle)"/> </svg> usage notes value none | <marker-ref> default value none animatable yes none indicates that no marker symbol shall be drawn at the first vertex.
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 4
80 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//develop...
patternContentUnits - SVG: Scalable Vector Graphics
note that the size of the tile is also computed against the bounding box of the target element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="
80" height="
80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="
80" height="
80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
patternTransform - SVG: Scalable Vector Graphics
svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="
80" height="
80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
patternUnits - SVG: Scalable Vector Graphics
patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="
80" height="
80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="
80" height="
80" fill="url(#p2)" /> </svg> pattern for <pattern>, patternunits defines the coordinate system in use for the geometry properties (x, y, width and height) of the element.
pointsAtZ - SVG: Scalable Vector Graphics
lns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="
80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status ...
requiredFeatures - SVG: Scalable Vector Graphics
requiredfeatures="http://www.w3.org/tr/svg11/feature#mask" /> <text x="20" y="777">http://www.w3.org/tr/svg11/feature#mask</text> <!-- testing : http://www.w3.org/tr/svg11/feature#filter --> <rect class="ko" x="10" y="785" height="25" width="430" /> <rect class="ok" x="10" y="785" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#filter" /> <text x="20" y="
802">http://www.w3.org/tr/svg11/feature#filter</text> <!-- testing : http://www.w3.org/tr/svg11/feature#basicfilter --> <rect class="ko" x="10" y="810" height="25" width="430" /> <rect class="ok" x="10" y="810" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#basicfilter" /> <text x="20" y="827">http://www.w3.org/tr/svg11/feature#basicfilter</text> <!-- te...
rotate - SVG: Scalable Vector Graphics
examples svg <svg width="400" height="120" viewbox="0 0 4
80 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <anima...
style - SVG: Scalable Vector Graphics
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 animatable no <style> the syntax of style data depends on the style sheet language.
textLength - SVG: Scalable Vector Graphics
html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <input type="range" id="widthslider" min="
80" max="978"> <span id="widthdisplay"></span> </div> the <input> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.
transform - SVG: Scalable Vector Graphics
000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 10 + 40 =
80 top right corner: oldx=40 oldy=10 newx = a * oldx + c * oldy + e = 3 * 40 - 1 * 10 + 30 = 140 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 10 + 40 = 110 bottom left corner: oldx=10 oldy=30 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 30 + 30 = 30 newy = b * oldx + d * oldy + f = 1 * 10 + 3 * 30 + 40 = 140 bottom right corner: oldx=40 oldy=30 newx = a * oldx + c * oldy + e = 3...
version - SVG: Scalable Vector Graphics
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="
80" height="
80"/> </svg> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
visibility - SVG: Scalable Vector Graphics
<image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="
80" height="
80" visibility="visible" /> <rect x="120" y="20" width="
80" height="
80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | collapse default value visible animatable yes visible this value indicates that the element will be painted.
x1 - SVG: Scalable Vector Graphics
xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at
80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="
80%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the defin...
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 1
80,150 1
80,50 c1
80-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 1
80,150 1
80,50 c1
80-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 indicat...
<feBlend> - SVG: Scalable Vector Graphics
link="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feblend>' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
urate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="1
80" /> </filter> <use href="#circles" transform="translate(0 2
80)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colormelta)" /> <text x="70" y="400">luminanceto...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 1
80 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="
80%" height="
80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="1
80"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filte...
<feOffset> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="1
80" height="1
80"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification status comment filter effects module level 1the definitio...
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="
80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%" style="filter:url(#spotlight);"/> </svg> result spe...
<feSpotLight> - SVG: Scalable Vector Graphics
" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
g <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="
80%" height="
80%" style="filter:url(#tile);"/> </svg> result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" hanging="500"> <font-face-src> <font-face-name name="super sans bold"/> </font-face-src> </font-face> <missing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="
80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specifications specification status comment scalable vecto...
<hatch> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a0
80ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="
80%" height="
80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a0
80ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="
80%" height="
80%" /> </svg> result ...
<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.
<marker> - SVG: Scalable Vector Graphics
ewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> </defs> <!-- coordinate axes with a arrowhead in both direction --> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- data line with polymarkers --> <polyline points="15,
80 29,50 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.
<pattern> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="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="1
80" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
<symbol> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0
80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h
80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" stroke=...
<text> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 240
80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heav...
<view> - SVG: Scalable Vector Graphics
ox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="1
80" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlin...