Firefox 36

by Jakub

HTML

<body>
    <main role='main'>
        <section id='main'>Hello Wypok!</section>
        <section class='red'></section>
        <section class='blue'></section>
        <section class='yellow'></section>
        <aside>
            <button id='js'>Zjedź na dół przy pomocy JS</button>
            <button id='css'>Zjedź na dół przy pomocy CSS</button>
            <button id='transform'>Przesuń!</button>
        </aside>
    </main>
</body>

CSS

html, body{ margin:0; padding:0; height:auto; width:100%; font-size:200%;font-family:'Cabin' }
main{ height:100%; display:flex; align-items:center; align-content:center; justify-content:center; flex-direction:column }
section{ color:blue; font:3rem; height:1000px; width:100% }
section:first-of-type{ height:100px;text-align:right;
        text-decoration: underline wavy green /* a new shorthand property */
 }
.red{ background:red }
.blue{ background:blue }
.yellow{ background:yellow }
aside{ position:fixed; left:0; top:0 }
button{ display:block }

JavaScript

// new DOMMatrix().toString() === "[object DOMMatrix]"; =  bug in 35, but fixed in 36 and higher!
if (new window.DOMMatrix().toString() === "[object DOMMatrix]" || document.documentElement.style.MozAppearance === undefined || Number('0b0') !== 0)
    throw new Error('Your browser isn\'t the latest stable Firefox!'); // triggered when the version of Firefox isn't at least 36 ;)
// js fiddle goes crazy when running this, so I commented it :)
/*
{ // Const block-scoped and Number octal and binary
    const four = Number('0b100'); // Binary 100 = 4
} 
if (typeof four === 'undefined')
   console.log('BamBam! Const is now block-scoped!');

{ // Symbol.iterator
    let iterator = ['w', 'y', 'k', 'o', 'p'][Symbol.iterator]();
    let iterated;
    while(iterated ? !iterated.done : true)
        console.log(iterated = iterator.next()); // w y k o p undefined
}
*/

// WeakMap optional argument
/*{ // code taken from https://bugzilla.mozilla.org/show_bug.cgi?id=1092537
    let key = {};
    let wm = new WeakMap([[key, 123]]);
    let value = wm.get(key);
    value === 123; // true
}*/

// Now the 'scroll' part

document.getElementById('js').addEventListener('click', () => document.body.scrollIntoView({
    block: 'end', 
    behavior: 'smooth'
}));

document.getElementById('css').addEventListener('click', () => { // it actually doesn't work here properly, dunno why, maybe an issue? It works flawessly on 'main' page, so feel free to copy the following piece of and test it on wykop or something else.
  document.body.style.setProperty('scroll-behavior', 'smooth');
  document.body.scrollTo(0, document.body.scrollHeight);
});

// DOMMatrix - added in 33, but toString() fixed in 36.

const matrix = new window.DOMMatrix(); // actually the given example is pretty dumb, but I just want to show you that the such an useful API exists :)

document.getElementById('transform').addEventListener('click', (e) => this.document.body.style.setProperty('transform', matrix.translate(10,...