User:Sky6t/sandbox

I am very sad to see this all...

This paragraph IE10 spelling correction is based on the latest Microsoft spellchecking engine and dictionaries. IE10's spell checker also includes auto-correction to help correct mistakes while you type! acceptable* committed discipline*

check my spelling as I type.

Text-align and position
&#160; My position is absolute My text-align is center

Now it seems to work fine to make this absolutely positioned element center.

Pre test
__________    __________       ____________             _________      ______     ______    ________  |  |   \  \    |  |   \  \      |  |     |_|          /  /     \  \     |  |       |  |       |  |  |  |___/  /    |  |___/  /      |  |______           /  /       |__|    |  |       |  |       |  |  |  ______/     |   _   _/       |   ______|         /  /      _______   |  |       |  |       |  |  |  |           |  | \  \        |  |                \  \     |__   __|  |  |       |  |       |  |  |  |           |  |  \  \       |  |      _          \  \       |  |    |  |       |  |       |  | _|  |__        _|  |_  \  \__   _|  |_____| |          \  \_____/  /      \  \_____/  /      __|  |__
 * _   ___  \   |_    ___  \     |_    _____  |           /  _____  \    |_    _|   |_    _|  |__    __|
 * _______|     |______|  \____| |____________|           \_________/        \_________/      |________|

border-radius and dotted borders
Internet Explorer would display it right, but Firefox and Google Chrome would treat it as if it were.

This has been fixed.

Some
   G 

Moon


Font-feature-settings test
Efficient font-feature-settings, 0123456789. Efficient font-feature-settings, 0123456789. Efficiently on the fifth floor, 0123456789.

Background-attachment: fixed and transform
Paragraph Paragraph Paragraph

Signature
 Sky 6t  14:33, 22 April 2014 (UTC)

Ampersand
<p style="font-style:italic;font-size:300%"> <span style="font-family:segoe ui,sans-serif">&amp; <span style="font-family:palatino linotype,serif">&amp; <span style="font-family:pt serif,serif">&amp; <span style="font-family:liberation serif,serif">&amp; <span style="font-family:cambria,serif">&amp; <span style="font-family:constantia,serif">&amp; <span style="font-family:dejavu serif,serif">&amp; <span style="font-family:linux biolinum g,serif">&amp; <span style="font-family:caladea,serif">&amp;

Tables
The two tables look different in IE11.

letter spacing
<p style="font-family: Arial,sans-serif; letter-spacing:.03em"> Quick brown foxes jump over the lazy dog. Illustrating the indifferent.

Run-in
<p style="display:run-in;color:#26a">Run-in Supported has been dropped for.

Relative and top
<div style="position:relative;top:23.3%;padding:12px 20px;font:125%/1.5 'segoe ui',sans-serif;background:#26a;color:#fff">I am here

Flex
I am the inner element.

Inline-block and overflow: hidden
Quick brown fox Safari will mistakenly align them.

More inline-block
Quick &#160; Quick Brown Quick

Float and width
a Quick

UL

 * Quick
 * Brown

Stacking
Text <div style="position:absolute;width:100px;height:100px;background:rgba(120,160,200,.8)">One: absolute <div style="float:left;width:100px;height:100px;background:rgba(200,160,120,.8);margin:2em">Two: floated <div style="height:100px;background:rgba(120,200,160,.8);margin-top:4em;text-indent:-90px">Three: static

Text <div style="position:absolute;width:100px;height:100px;background:rgba(120,160,200,.8)">One: absolute <div style="float:left;width:100px;height:100px;background:rgba(200,160,120,.9);opacity:.9;margin:2em">Two: floated with opacity <div style="height:100px;background:rgba(120,200,160,.8);transform:translate(0);margin-top:4em">Three: static transformed

Text <div style="position:absolute;width:100px;height:100px;background:rgba(120,160,200,.8)">One: absolute <div style="float:left;width:100px;height:100px;background:rgba(200,160,120,.8);opacity:.9;margin:2em">Two: floated with opacity <div style="height:100px;background:rgba(120,200,160,.8);position:relative;margin-top:4em">Three: relative

One: absolute with z-index: -1 Text

The model
Here we propose a better model concerning the stacking order, with how stacking contexts influence stacking behavior taken into consideration (modified from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): The order within each item is in the order of appearance in the DOM.
 * 1) Static, non stacking context-forming, non-floated elements;
 * 2) floating elements, text and inline elements in static elements;
 * 3) positioned elements and stacking context-forming elements (including elements with z-index set to 0);

float
Hello world

Margin collapsing
The quick brown fox jumps over the lazy dog. <p style="text-decoration:underline">The quick brown fox jumps over the lazy dog.

CSS parabola
<div style="width:400px;height:400px;border-radius:200px;background:#ccc;transform:perspective(200px) translatez(200px) rotatex(60deg) translatez(-346.41px)">

Hyperbola
<div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.2);transform:perspective(50px) translatez(50px) rotatex(-90deg) translatez(-100px);position:absolute;top:150px;left:300px"> <div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.2);transform:perspective(50px) translatez(50px) rotatex(90deg) translatez(-100px);position:absolute;top:150px;left:300px"> <div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.15);transform:perspective(100px) translatez(100px) rotatex(-90deg) translatez(-100px);position:absolute;top:150px;left:300px"> <div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.15);transform:perspective(100px) translatez(100px) rotatex(90deg) translatez(-100px);position:absolute;top:150px;left:300px"> <div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.12);transform:perspective(200px) translatez(200px) rotatex(-90deg) translatez(-100px);position:absolute;top:150px;left:300px"> <div style="width:400px;height:400px;border-radius:200px;background:rgba(0,0,0,.12);transform:perspective(200px) translatez(200px) rotatex(90deg) translatez(-100px);position:absolute;top:150px;left:300px">

Overflow: hidden
flex-grow: 1  some text