| OLD | NEW |
| (Empty) |
| 1 .redBox { | |
| 2 width: 50px; | |
| 3 height: 50px; | |
| 4 background-color: red; | |
| 5 } | |
| 6 | |
| 7 .greenBox { | |
| 8 width: 50px; | |
| 9 height: 50px; | |
| 10 background-color: green; | |
| 11 } | |
| 12 | |
| 13 .blueBox { | |
| 14 width: 50px; | |
| 15 height: 50px; | |
| 16 background-color: blue; | |
| 17 } | |
| 18 | |
| 19 .orangeBox { | |
| 20 width: 50px; | |
| 21 height: 50px; | |
| 22 background-color: orange; | |
| 23 } | |
| 24 | |
| 25 .flowArticle { | |
| 26 -webkit-flow-into: article; | |
| 27 } | |
| 28 | |
| 29 .regionArticle { | |
| 30 -webkit-flow-from: article; | |
| 31 } | |
| 32 | |
| 33 .regionArticleAfter::after { | |
| 34 display: block; | |
| 35 width: 50px; | |
| 36 height: 50px; | |
| 37 content: 'This text should not be displayed'; | |
| 38 border: 1px solid black; | |
| 39 -webkit-flow-from: article; | |
| 40 } | |
| 41 | |
| 42 .regionArticleBefore::before { | |
| 43 display: block; | |
| 44 width: 50px; | |
| 45 height: 50px; | |
| 46 border: 1px solid black; | |
| 47 -webkit-flow-from: article; | |
| 48 } | |
| 49 | |
| 50 .borderBox { | |
| 51 width: 50px; | |
| 52 height: 50px; | |
| 53 float: left; | |
| 54 border: 1px solid black; | |
| 55 } | |
| 56 | |
| 57 .borderBoxNoFloat { | |
| 58 width: 50px; | |
| 59 height: 50px; | |
| 60 border: 1px solid black; | |
| 61 } | |
| 62 | |
| 63 .pass { | |
| 64 font-weight: bold; | |
| 65 color: green; | |
| 66 } | |
| 67 | |
| 68 .fail, .error { | |
| 69 font-weight: bold; | |
| 70 color: red; | |
| 71 } | |
| 72 | |
| 73 .break { | |
| 74 -webkit-region-break-before: always; | |
| 75 display: block; | |
| 76 } | |
| 77 | |
| 78 .token { | |
| 79 color: blue; | |
| 80 font-weight: bold; | |
| 81 } | |
| 82 | |
| 83 .description { | |
| 84 width: 600px; | |
| 85 } | |
| 86 | |
| 87 .bigBox { | |
| 88 height: 100px; | |
| 89 width: 300px; | |
| 90 } | |
| 91 | |
| 92 .greyBigBox { | |
| 93 height: 100px; | |
| 94 width: 300px; | |
| 95 background-color: lightgrey; | |
| 96 } | |
| 97 | |
| 98 .descriptionVertical { | |
| 99 height: 600px; | |
| 100 } | |
| 101 | |
| 102 .bigBoxVertical { | |
| 103 height: 300px; | |
| 104 width: 100px; | |
| 105 } | |
| 106 | |
| 107 .greyBigBoxVertical { | |
| 108 height: 300px; | |
| 109 width: 100px; | |
| 110 background-color: lightgrey; | |
| 111 } | |
| 112 | |
| 113 .floatLeft { | |
| 114 float: left; | |
| 115 } | |
| 116 | |
| 117 .floatRight { | |
| 118 float: right; | |
| 119 } | |
| 120 | |
| 121 .clear { | |
| 122 clear: both; | |
| 123 } | |
| 124 | |
| 125 /* regions create Stacking Contexts */ | |
| 126 .forcedStackingContext { | |
| 127 position: relative; | |
| 128 z-index: 1; | |
| 129 } | |
| 130 | |
| 131 /* overflow tests styles */ | |
| 132 .overflowContentFlow { | |
| 133 -webkit-flow-into: flow1; | |
| 134 padding: 5px; | |
| 135 } | |
| 136 | |
| 137 .overflowContent { | |
| 138 padding: 5px; | |
| 139 } | |
| 140 | |
| 141 .overflowBox { | |
| 142 width: 30px; | |
| 143 height: 50px; | |
| 144 background-color: lime; | |
| 145 } | |
| 146 | |
| 147 .overflowBox2 { | |
| 148 width: 50px; | |
| 149 height: 50px; | |
| 150 background-color: lime; | |
| 151 } | |
| 152 | |
| 153 .overflowFirstBox { | |
| 154 border: 1px solid blue; | |
| 155 } | |
| 156 | |
| 157 .overflowSecondBox { | |
| 158 border: 1px solid green; | |
| 159 overflow: hidden; | |
| 160 } | |
| OLD | NEW |