diff --git a/frameworks/compass/stylesheets/compass/css3/_images.scss b/frameworks/compass/stylesheets/compass/css3/_images.scss index d801576ad1..497a3f34ee 100644 --- a/frameworks/compass/stylesheets/compass/css3/_images.scss +++ b/frameworks/compass/stylesheets/compass/css3/_images.scss @@ -40,5 +40,13 @@ @if $experimental-support-for-mozilla and prefixed(-moz, $value) { list-style-image: -moz($value); } @if $experimental-support-for-webkit and prefixed(-webkit, $value) { list-style-image: -webkit($value); } @if $experimental-support-for-svg and prefixed(-svg, $value) { list-style-image: -svg($value); } - list-style-image: $value ; + list-style-image: $value ; +} + +@mixin content($value) { + $value: -compass-list($value); + @if $experimental-support-for-mozilla and prefixed(-moz, $value) { content: -moz($value); } + @if $experimental-support-for-webkit and prefixed(-webkit, $value) { content: -webkit($value); } + @if $experimental-support-for-svg and prefixed(-svg, $value) { content: -svg($value); } + content: $value ; } diff --git a/test/fixtures/stylesheets/compass/css/gradients.css b/test/fixtures/stylesheets/compass/css/gradients.css index 6c962422bd..c00df693d1 100644 --- a/test/fixtures/stylesheets/compass/css/gradients.css +++ b/test/fixtures/stylesheets/compass/css/gradients.css @@ -43,6 +43,15 @@ list-style-image: outside url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); list-style-image: outside radial-gradient(#00ff00 0%, #ff0000 10px); } +.content-plain { + content: "asdf"; } + +.content-with-gradient { + content: -moz-radial-gradient(#00ff00, #ff0000 10px); + content: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 10, color-stop(0%, #00ff00), color-stop(100%, #ff0000)); + content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iMTAiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwMGZmMDAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZjAwMDAiLz48L3JhZGlhbEdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); + content: radial-gradient(#00ff00 0%, #ff0000 10px); } + .bg-linear-gradient-no-position { background-image: -moz-linear-gradient(#dddddd, #aaaaaa); background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dddddd), color-stop(100%, #aaaaaa)); diff --git a/test/fixtures/stylesheets/compass/sass/gradients.sass b/test/fixtures/stylesheets/compass/sass/gradients.sass index 08f67cc95b..34cb4a0e07 100644 --- a/test/fixtures/stylesheets/compass/sass/gradients.sass +++ b/test/fixtures/stylesheets/compass/sass/gradients.sass @@ -29,6 +29,12 @@ $experimental-support-for-svg: true // Note: I haven't seen a browser render this correctly, but they should eventually. +list-style(outside radial-gradient(lime, red 10px)) +.content-plain + +content("asdf") + +.content-with-gradient + +content(radial-gradient(lime, red 10px)) + $experimental-support-for-svg: false .bg-linear-gradient-no-position