Changeset View
Changeset View
Standalone View
Standalone View
autotests/input/highlight.css
| Show First 20 Lines • Show All 41 Lines • ▼ Show 20 Line(s) | 41 | { | |||
|---|---|---|---|---|---|
| 42 | display: none; | 42 | display: none; | ||
| 43 | } | 43 | } | ||
| 44 | 44 | | |||
| 45 | } | 45 | } | ||
| 46 | 46 | | |||
| 47 | /* | 47 | /* | ||
| 48 | TODO: add more tests, e.g. media | 48 | TODO: add more tests, e.g. media | ||
| 49 | */ | 49 | */ | ||
| 50 | | ||||
| 51 | | ||||
| 52 | .nice-look { | ||||
| 53 | font-variant-alternates: styleset(nice-style); | ||||
| 54 | } | ||||
| 55 | | ||||
| 56 | ul { | ||||
| 57 | list-style: thumbs; | ||||
| 58 | } | ||||
| 59 | | ||||
| 60 | /* SVG <a> */ | ||||
| 61 | svg|a {} | ||||
| 62 | | ||||
| 63 | /* XHTML and SVG <a> */ | ||||
| 64 | *|a {} | ||||
| 65 | | ||||
| 66 | *{} | ||||
| 67 | .class{} | ||||
| 68 | #id{} | ||||
| 69 | :hover{} | ||||
| 70 | :lang(fr){} | ||||
| 71 | E{} | ||||
| 72 | E F{} | ||||
| 73 | E>F{} | ||||
| 74 | E > F{} | ||||
| 75 | E~F{} | ||||
| 76 | E ~ F{} | ||||
| 77 | E:first-child{} | ||||
| 78 | E:visited{} | ||||
| 79 | E::after{} | ||||
| 80 | E:lang(c){} | ||||
| 81 | E:lang(fr-ca){} | ||||
| 82 | E + F{} | ||||
| 83 | E+F{} | ||||
| 84 | E[foo]{} | ||||
| 85 | E[foo=warning]{} | ||||
| 86 | E[foo="warning"]{} | ||||
| 87 | E[foo~="warning"]{} | ||||
| 88 | E[foo^="warning"]{} | ||||
| 89 | E[foo$="warning"]{} | ||||
| 90 | E[foo*="warning"]{} | ||||
| 91 | E[lang|="en"]{} | ||||
| 92 | DIV.warning{} | ||||
| 93 | DIV .warning{} | ||||
| 94 | E#myid{} | ||||
| 95 | E #myid{} | ||||
| 96 | E,E{} | ||||
| 97 | E, E{} | ||||
| 98 | E ,E{} | ||||
| 99 | E , E{} | ||||
| 100 | | ||||
| 101 | p:nth-child(2) { | ||||
| 102 | background: red; | ||||
| 103 | } | ||||
| 104 | | ||||
| 105 | /* Elements that are not <div> or <span> elements */ | ||||
| 106 | body :not(div):not(span) { | ||||
| 107 | font-weight: bold; | ||||
| 108 | } | ||||
| 109 | | ||||
| 110 | /* Elements that are not `.crazy` or `.fancy` */ | ||||
| 111 | /* Note that this syntax is not well supported yet. */ | ||||
| 112 | body :not(.crazy, .fancy) { | ||||
| 113 | font-family: sans-serif; | ||||
| 114 | } | ||||
| 115 | | ||||
| 116 | :nth-child(odd) { color: lime; } | ||||
| 117 | :nth-child(even) { color: lime; } | ||||
| 118 | :nth-child(4) { color: lime; } | ||||
| 119 | :nth-child(4n) { color: lime; } | ||||
| 120 | :nth-child(3n+4) { color: lime; } | ||||
| 121 | :nth-child(-n+3) { color: lime; } | ||||
| 122 | :nth-child(n+8):nth-child(-n+15) { color: lime; } | ||||
| 123 | | ||||
| 124 | .first span:nth-child(2n+1), | ||||
| 125 | .second span:nth-child(2n+1), | ||||
| 126 | .third span:nth-of-type(2n+1) { | ||||
| 127 | background-color: lime; | ||||
| 128 | unknown-property: lime; | ||||
| 129 | } | ||||
| 130 | | ||||
| 131 | :root{ | ||||
| 132 | --foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */ | ||||
| 133 | } | ||||
| 134 | | ||||
| 135 | :root, | ||||
| 136 | :root:lang(en) {--external-link: "external link";} | ||||
| 137 | :root:lang(de) {--external-link: "externer Link";} | ||||
| 138 | | ||||
| 139 | a[href^="http"]::after {content: " (" var(--external-link) ")"} | ||||
| 140 | | ||||
| 141 | one { --foo: 10px; } | ||||
| 142 | two { --bar: calc(var(--foo) + 10px); } | ||||
| 143 | three { --foo: calc(var(--bar) + 10px); } | ||||
| 144 | .foo { | ||||
| 145 | --gap: 20; | ||||
| 146 | margin-top: var(--gap)px; /*20 px*/ | ||||
| 147 | margin-top: calc(var(--gap) * 1px); /*20px*/ | ||||
| 148 | } | ||||
| 149 | | ||||
| 150 | foo { | ||||
| 151 | width: calc(50% -8px); /* invalid */ | ||||
| 152 | width: calc(50%- 8px); /* invalid */ | ||||
| 153 | width: calc(50% +8px); /* invalid */ | ||||
| 154 | width: calc(50%+ 8px); /* invalid */ | ||||
| 155 | width: calc(2px -var(--a)); /* invalid */ | ||||
| 156 | width: calc(50%*-8px); | ||||
| 157 | width: calc(50% - 8px); | ||||
| 158 | width: calc(50% + -8px); | ||||
| 159 | width: calc(50% +(8px)); | ||||
| 160 | width: calc(2px -(var(--a))); | ||||
| 161 | } | ||||
| 162 | | ||||
| 163 | sweet-alert input:focus::-moz-placeholder { | ||||
| 164 | -webkit-transition: opacity 0.3s 0.03s ease; | ||||
| 165 | transition: opacity 0.3s 0.03s ease; | ||||
| 166 | opacity: 0.5; | ||||
| 167 | } | ||||
| 168 | | ||||
| 169 | | ||||
| 170 | @font-feature-values Font One { | ||||
| 171 | @styleset { | ||||
| 172 | nice-style: 12; | ||||
| 173 | } | ||||
| 174 | } | ||||
| 175 | | ||||
| 176 | @font-feature-values Font Two { | ||||
| 177 | @styleset { | ||||
| 178 | nice-style: 4; | ||||
| 179 | } | ||||
| 180 | } | ||||
| 181 | | ||||
| 182 | @counter-style thumbs { | ||||
| 183 | system: cyclic; | ||||
| 184 | symbols: "\1F44D"; | ||||
| 185 | suffix: " "; | ||||
| 186 | } | ||||
| 187 | | ||||
| 188 | @font-face { | ||||
| 189 | font-family: "Open Sans"; | ||||
| 190 | src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), | ||||
| 191 | url("/fonts/OpenSans-Regular-webfont.woff") format("woff"); | ||||
| 192 | } | ||||
| 193 | | ||||
| 194 | @page { | ||||
| 195 | margin: 1cm; | ||||
| 196 | } | ||||
| 197 | | ||||
| 198 | @page :first { | ||||
| 199 | margin: 2cm; | ||||
| 200 | /* comments */ | ||||
| 201 | marks: crop cross; | ||||
| 202 | } | ||||
| 203 | | ||||
| 204 | @page :unknown { | ||||
| 205 | margin: 2cm; | ||||
| 206 | } | ||||
| 207 | | ||||
| 208 | @font-face { | ||||
| 209 | unknown: 2px; | ||||
| 210 | /* comments */ | ||||
| 211 | font-family: "Bitstream Vera Serif Bold"; | ||||
| 212 | src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"); | ||||
| 213 | } | ||||
| 214 | | ||||
| 215 | @viewport { | ||||
| 216 | zoom: 0.75; | ||||
| 217 | /* comments */ | ||||
| 218 | min-zoom: 0.5; | ||||
| 219 | max-zoom: 0.9; | ||||
| 220 | } | ||||
| 221 | | ||||
| 222 | @viewport { | ||||
| 223 | orientation: landscape; | ||||
| 224 | /* comments */ | ||||
| 225 | orientation: landscape; | ||||
| 226 | } | ||||
| 227 | | ||||
| 228 | @document url("https://www.example.com/") { | ||||
| 229 | h1 { | ||||
| 230 | color: green; | ||||
| 231 | } | ||||
| 232 | } | ||||
| 233 | | ||||
| 234 | @supports (display: grid) { | ||||
| 235 | div { | ||||
| 236 | display: grid; | ||||
| 237 | } | ||||
| 238 | } | ||||
| 239 | | ||||
| 240 | @media (max-width: 600px) { | ||||
| 241 | .sidebar { | ||||
| 242 | display: none; | ||||
| 243 | } | ||||
| 244 | } | ||||
| 245 | | ||||
| 246 | @import url("fineprint.css") print; | ||||
| 247 | @import url(fineprint.css) print; | ||||
| 248 | @import url('bluish.css') speech; | ||||
| 249 | @import 'custom.css'; | ||||
| 250 | @import url("chrome://communicator/skin/"); | ||||
| 251 | @import "common.css" screen; | ||||
| 252 | @import url('landscape.css') screen and (orientation:landscape); | ||||
| 253 | | ||||
| 254 | @namespace url(http://www.w3.org/1999/xhtml); | ||||
| 255 | @namespace svg url(http://www.w3.org/2000/svg); | ||||
| 256 | | ||||
| 257 | @keyframes important1 { | ||||
| 258 | from { margin-top: 50px; } | ||||
| 259 | 50% { margin-top: 150px !important; } /* ignored */ | ||||
| 260 | to { margin-top: 100px; } | ||||
| 261 | } | ||||
| 262 | | ||||
| 263 | @keyframes important2 { | ||||
| 264 | from { margin-top: 50px; | ||||
| 265 | margin-bottom: 100px; } | ||||
| 266 | to { margin-top: 150px !important; /* ignored */ | ||||
| 267 | margin-bottom: 50px; } | ||||
| 268 | } | ||||
| 269 | | ||||
| 270 | @keyframes slidein { | ||||
| 271 | from { | ||||
| 272 | margin-left: 100%; | ||||
| 273 | width: 300%; | ||||
| 274 | } | ||||
| 275 | | ||||
| 276 | to { | ||||
| 277 | margin-left: 0%; | ||||
| 278 | width: 100%; | ||||
| 279 | } | ||||
| 280 | } | ||||
| 281 | | ||||
| 282 | @media print { | ||||
| 283 | a:hover { color: red } | ||||
| 284 | /* comments */ | ||||
| 285 | a:hover { color: red } | ||||
| 286 | } | ||||