| <!DOCTYPE html> |
| <div class="p1"><div class="shadow"></div></div> |
| <div class="p2"><div class="shadow"></div></div> |
| <div class="p3"><div class="p4"><div class="shadow"></div></div></div> |
| <style> |
| .shadow { |
| width: 100px; |
| height: 100px; |
| box-shadow: 100px 0px currentColor; |
| } |
| .p1 { color: rgb(255, 0, 0); } |
| .p2 { color: rgb(0, 255, 0); } |
| .p3 { color: rgb(0, 0, 0); } |
| .p3 { color: rgb(0, 0, 255); } |
| </style> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(function () { |
| var p1 = document.querySelector('.p1 .shadow') |
| var p2 = document.querySelector('.p2 .shadow') |
| var p3 = document.querySelector('.p3 .shadow') |
| |
| assert_equals(getComputedStyle(p1)['box-shadow'], 'rgb(255, 0, 0) 100px 0px 0px 0px') |
| assert_equals(getComputedStyle(p2)['box-shadow'], 'rgb(0, 255, 0) 100px 0px 0px 0px') |
| assert_equals(getComputedStyle(p3)['box-shadow'], 'rgb(0, 0, 255) 100px 0px 0px 0px') |
| }, "Check that currentColor in a box-shadow is resolved to the correct color"); |
| </script> |
