Index: third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-out-of-range.html |
diff --git a/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-out-of-range.html b/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-out-of-range.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..c6d87df7db69fb83e5fb4b88b54d0ff30369c904 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/gradients/conic-gradient-out-of-range.html |
@@ -0,0 +1,96 @@ |
+<style> |
+div { |
+ width: 80px; |
+ height: 80px; |
+ border: 1px solid grey; |
+ display: inline-block; |
+ margin: 5px; |
+} |
+ |
+.reference1 { |
+ background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%)); |
+} |
+ |
+.c1 { |
+ background: conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%); |
+} |
+ |
+.c2 { |
+ background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%)); |
+} |
+ |
+.c3 { |
+ background: conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%) 150%); |
+} |
+ |
+.c4 { |
+ background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 25%, 75%)); |
+} |
+ |
+.c5 { |
+ background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 25%, 75%)); |
+} |
+ |
+.c6 { |
+ background: repeating-conic-gradient(rgb(0%, 75%, 25%), rgb(0%, 0%, 100%) 150%); |
+} |
+ |
+.c7 { |
+ background: repeating-conic-gradient(rgb(0%, 100%, 0%) -50%, rgb(0%, 0%, 100%) 150%); |
+} |
+ |
+.reference2 { |
+ background: repeating-conic-gradient(#0f0 20deg, yellow 50deg, blue 70deg, #0f0 140deg); |
+} |
+ |
+.c8 { |
+ background: repeating-conic-gradient(blue -50deg, #0f0 20deg, yellow 50deg, blue 70deg); |
+} |
+ |
+.c9 { |
+ background: repeating-conic-gradient(yellow -70deg, blue -50deg, #0f0 20deg, yellow 50deg); |
+} |
+ |
+.c10 { |
+ background: repeating-conic-gradient(#0f0 -100deg, yellow -70deg, blue -50deg, #0f0 20deg); |
+} |
+ |
+.c11 { |
+ background: repeating-conic-gradient(blue -170deg, #0f0 -100deg, yellow -70deg, blue -50deg); |
+} |
+ |
+.c12 { |
+ background: repeating-conic-gradient(#0f0 260deg, yellow 290deg, blue 310deg, #0f0 380deg); |
+} |
+ |
+.c13 { |
+ background: repeating-conic-gradient(yellow 290deg, blue 310deg, #0f0 380deg, yellow 410deg); |
+} |
+ |
+.c14 { |
+ background: repeating-conic-gradient(blue 310deg, #0f0 380deg, yellow 410deg, blue 430deg); |
+} |
+ |
+</style> |
+ |
+<p>All gradients in a row should render the same.</p> |
+ |
+<div class="reference1"></div> |
+<div class="c1"></div> |
+<div class="c2"></div> |
+<div class="c3"></div> |
+<div class="c4"></div> |
+<div class="c5"></div> |
+<div class="c6"></div> |
+<div class="c7"></div> |
+<br> |
+ |
+<div class="reference2"></div> |
+<div class="c8"></div> |
+<div class="c9"></div> |
+<div class="c10"></div> |
+<div class="c11"></div> |
+<div class="c12"></div> |
+<div class="c13"></div> |
+<div class="c14"></div> |
+ |