| <!DOCTYPE HTML> |
| <html> |
| <head> |
| <title>CSS Variables Allowed Syntax</title> |
| <link rel="author" title="L. David Baron" href="https://dbaron.org/"> |
| <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> |
| <link rel="help" href="http://www.w3.org/TR/css3-transitions/#animatable-types"> |
| <!-- also see https://www.w3.org/Bugs/Public/show_bug.cgi?id=14605 --> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="style"></style> |
| <script id="metadata_cache"></script> |
| </head> |
| <body onload="run()"> |
| <div id=log></div> |
| <div id="test"></div> |
| <script> |
| |
| test(function() { |
| var div = document.getElementById("test"); |
| var cs = getComputedStyle(div, ""); |
| div.style.color = "red"; |
| div.style.backgroundColor = "currentcolor"; |
| var force_flush = cs.backgroundColor; |
| div.style.transition = "background-color linear 50s -10s"; |
| div.style.color = "blue"; |
| var quarter_interpolated = cs.backgroundColor; |
| div.style.transition = ""; |
| div.style.backgroundColor = "rgb(204, 0, 51)"; |
| var quarter_reference = cs.backgroundColor; |
| div.style.backgroundColor = "blue"; |
| var final_reference = cs.backgroundColor; |
| assert_true(quarter_interpolated != quarter_reference && |
| quarter_interpolated == final_reference); |
| }, |
| "currentcolortransition", |
| { assert: "Transition does not occur when the value is currentColor and color changes" }); |
| |
| </script> |
| </body> |
| </html> |
