| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Transitions Test: transitioning inherited property values</title> |
| <meta name="assert" content="Test checks that inherited property values that are not transitioned on a parent element start a transition"> |
| <link rel="help" title="3. Starting of transitions" href="http://www.w3.org/TR/css3-transitions/#starting"> |
| <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/"> |
| <meta name="flags" content="dom "> |
| |
| <script src="/resources/testharness.js" type="text/javascript"></script> |
| <script src="/resources/testharnessreport.js" type="text/javascript"></script> |
| |
| <script src="./support/vendorPrefix.js" type="text/javascript"></script> |
| <script src="./support/helper.js" type="text/javascript"></script> |
| <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script> |
| <script src="./support/generalParallelTest.js" type="text/javascript"></script> |
| <script src="./support/properties.js" type="text/javascript"></script> |
| |
| <style type="text/css"> |
| #offscreen { |
| position: absolute; |
| top: -100000px; |
| left: -100000px; |
| width: 100000px; |
| height: 100000px; |
| } |
| </style> |
| |
| <script id="metadata_cache">/* |
| { |
| "background-color color(rgba) / values": {}, |
| "background-color color(rgba) / events": {}, |
| "background-position length(pt) / values": {}, |
| "background-position length(pt) / events": {}, |
| "background-position length(pc) / values": {}, |
| "background-position length(pc) / events": {}, |
| "background-position length(px) / values": {}, |
| "background-position length(px) / events": {}, |
| "background-position length(em) / values": {}, |
| "background-position length(em) / events": {}, |
| "background-position length(ex) / values": {}, |
| "background-position length(ex) / events": {}, |
| "background-position length(mm) / values": {}, |
| "background-position length(mm) / events": {}, |
| "background-position length(cm) / values": {}, |
| "background-position length(cm) / events": {}, |
| "background-position length(in) / values": {}, |
| "background-position length(in) / events": {}, |
| "background-position percentage(%) / values": {}, |
| "background-position percentage(%) / events": {}, |
| "border-top-width length(pt) / values": {}, |
| "border-top-width length(pt) / events": {}, |
| "border-top-width length(pc) / values": {}, |
| "border-top-width length(pc) / events": {}, |
| "border-top-width length(px) / values": {}, |
| "border-top-width length(px) / events": {}, |
| "border-top-width length(em) / values": {}, |
| "border-top-width length(em) / events": {}, |
| "border-top-width length(ex) / values": {}, |
| "border-top-width length(ex) / events": {}, |
| "border-top-width length(mm) / values": {}, |
| "border-top-width length(mm) / events": {}, |
| "border-top-width length(cm) / values": {}, |
| "border-top-width length(cm) / events": {}, |
| "border-top-width length(in) / values": {}, |
| "border-top-width length(in) / events": {}, |
| "border-right-width length(pt) / values": {}, |
| "border-right-width length(pt) / events": {}, |
| "border-right-width length(pc) / values": {}, |
| "border-right-width length(pc) / events": {}, |
| "border-right-width length(px) / values": {}, |
| "border-right-width length(px) / events": {}, |
| "border-right-width length(em) / values": {}, |
| "border-right-width length(em) / events": {}, |
| "border-right-width length(ex) / values": {}, |
| "border-right-width length(ex) / events": {}, |
| "border-right-width length(mm) / values": {}, |
| "border-right-width length(mm) / events": {}, |
| "border-right-width length(cm) / values": {}, |
| "border-right-width length(cm) / events": {}, |
| "border-right-width length(in) / values": {}, |
| "border-right-width length(in) / events": {}, |
| "border-bottom-width length(pt) / values": {}, |
| "border-bottom-width length(pt) / events": {}, |
| "border-bottom-width length(pc) / values": {}, |
| "border-bottom-width length(pc) / events": {}, |
| "border-bottom-width length(px) / values": {}, |
| "border-bottom-width length(px) / events": {}, |
| "border-bottom-width length(em) / values": {}, |
| "border-bottom-width length(em) / events": {}, |
| "border-bottom-width length(ex) / values": {}, |
| "border-bottom-width length(ex) / events": {}, |
| "border-bottom-width length(mm) / values": {}, |
| "border-bottom-width length(mm) / events": {}, |
| "border-bottom-width length(cm) / values": {}, |
| "border-bottom-width length(cm) / events": {}, |
| "border-bottom-width length(in) / values": {}, |
| "border-bottom-width length(in) / events": {}, |
| "border-left-width length(pt) / values": {}, |
| "border-left-width length(pt) / events": {}, |
| "border-left-width length(pc) / values": {}, |
| "border-left-width length(pc) / events": {}, |
| "border-left-width length(px) / values": {}, |
| "border-left-width length(px) / events": {}, |
| "border-left-width length(em) / values": {}, |
| "border-left-width length(em) / events": {}, |
| "border-left-width length(ex) / values": {}, |
| "border-left-width length(ex) / events": {}, |
| "border-left-width length(mm) / values": {}, |
| "border-left-width length(mm) / events": {}, |
| "border-left-width length(cm) / values": {}, |
| "border-left-width length(cm) / events": {}, |
| "border-left-width length(in) / values": {}, |
| "border-left-width length(in) / events": {}, |
| "border-top-color color(rgba) / values": {}, |
| "border-top-color color(rgba) / events": {}, |
| "border-right-color color(rgba) / values": {}, |
| "border-right-color color(rgba) / events": {}, |
| "border-bottom-color color(rgba) / values": {}, |
| "border-bottom-color color(rgba) / events": {}, |
| "border-left-color color(rgba) / values": {}, |
| "border-left-color color(rgba) / events": {}, |
| "padding-bottom length(pt) / values": {}, |
| "padding-bottom length(pt) / events": {}, |
| "padding-bottom length(pc) / values": {}, |
| "padding-bottom length(pc) / events": {}, |
| "padding-bottom length(px) / values": {}, |
| "padding-bottom length(px) / events": {}, |
| "padding-bottom length(em) / values": {}, |
| "padding-bottom length(em) / events": {}, |
| "padding-bottom length(ex) / values": {}, |
| "padding-bottom length(ex) / events": {}, |
| "padding-bottom length(mm) / values": {}, |
| "padding-bottom length(mm) / events": {}, |
| "padding-bottom length(cm) / values": {}, |
| "padding-bottom length(cm) / events": {}, |
| "padding-bottom length(in) / values": {}, |
| "padding-bottom length(in) / events": {}, |
| "padding-left length(pt) / values": {}, |
| "padding-left length(pt) / events": {}, |
| "padding-left length(pc) / values": {}, |
| "padding-left length(pc) / events": {}, |
| "padding-left length(px) / values": {}, |
| "padding-left length(px) / events": {}, |
| "padding-left length(em) / values": {}, |
| "padding-left length(em) / events": {}, |
| "padding-left length(ex) / values": {}, |
| "padding-left length(ex) / events": {}, |
| "padding-left length(mm) / values": {}, |
| "padding-left length(mm) / events": {}, |
| "padding-left length(cm) / values": {}, |
| "padding-left length(cm) / events": {}, |
| "padding-left length(in) / values": {}, |
| "padding-left length(in) / events": {}, |
| "padding-right length(pt) / values": {}, |
| "padding-right length(pt) / events": {}, |
| "padding-right length(pc) / values": {}, |
| "padding-right length(pc) / events": {}, |
| "padding-right length(px) / values": {}, |
| "padding-right length(px) / events": {}, |
| "padding-right length(em) / values": {}, |
| "padding-right length(em) / events": {}, |
| "padding-right length(ex) / values": {}, |
| "padding-right length(ex) / events": {}, |
| "padding-right length(mm) / values": {}, |
| "padding-right length(mm) / events": {}, |
| "padding-right length(cm) / values": {}, |
| "padding-right length(cm) / events": {}, |
| "padding-right length(in) / values": {}, |
| "padding-right length(in) / events": {}, |
| "padding-top length(pt) / values": {}, |
| "padding-top length(pt) / events": {}, |
| "padding-top length(pc) / values": {}, |
| "padding-top length(pc) / events": {}, |
| "padding-top length(px) / values": {}, |
| "padding-top length(px) / events": {}, |
| "padding-top length(em) / values": {}, |
| "padding-top length(em) / events": {}, |
| "padding-top length(ex) / values": {}, |
| "padding-top length(ex) / events": {}, |
| "padding-top length(mm) / values": {}, |
| "padding-top length(mm) / events": {}, |
| "padding-top length(cm) / values": {}, |
| "padding-top length(cm) / events": {}, |
| "padding-top length(in) / values": {}, |
| "padding-top length(in) / events": {}, |
| "margin-bottom length(pt) / values": {}, |
| "margin-bottom length(pt) / events": {}, |
| "margin-bottom length(pc) / values": {}, |
| "margin-bottom length(pc) / events": {}, |
| "margin-bottom length(px) / values": {}, |
| "margin-bottom length(px) / events": {}, |
| "margin-bottom length(em) / values": {}, |
| "margin-bottom length(em) / events": {}, |
| "margin-bottom length(ex) / values": {}, |
| "margin-bottom length(ex) / events": {}, |
| "margin-bottom length(mm) / values": {}, |
| "margin-bottom length(mm) / events": {}, |
| "margin-bottom length(cm) / values": {}, |
| "margin-bottom length(cm) / events": {}, |
| "margin-bottom length(in) / values": {}, |
| "margin-bottom length(in) / events": {}, |
| "margin-left length(pt) / values": {}, |
| "margin-left length(pt) / events": {}, |
| "margin-left length(pc) / values": {}, |
| "margin-left length(pc) / events": {}, |
| "margin-left length(px) / values": {}, |
| "margin-left length(px) / events": {}, |
| "margin-left length(em) / values": {}, |
| "margin-left length(em) / events": {}, |
| "margin-left length(ex) / values": {}, |
| "margin-left length(ex) / events": {}, |
| "margin-left length(mm) / values": {}, |
| "margin-left length(mm) / events": {}, |
| "margin-left length(cm) / values": {}, |
| "margin-left length(cm) / events": {}, |
| "margin-left length(in) / values": {}, |
| "margin-left length(in) / events": {}, |
| "margin-right length(pt) / values": {}, |
| "margin-right length(pt) / events": {}, |
| "margin-right length(pc) / values": {}, |
| "margin-right length(pc) / events": {}, |
| "margin-right length(px) / values": {}, |
| "margin-right length(px) / events": {}, |
| "margin-right length(em) / values": {}, |
| "margin-right length(em) / events": {}, |
| "margin-right length(ex) / values": {}, |
| "margin-right length(ex) / events": {}, |
| "margin-right length(mm) / values": {}, |
| "margin-right length(mm) / events": {}, |
| "margin-right length(cm) / values": {}, |
| "margin-right length(cm) / events": {}, |
| "margin-right length(in) / values": {}, |
| "margin-right length(in) / events": {}, |
| "margin-top length(pt) / values": {}, |
| "margin-top length(pt) / events": {}, |
| "margin-top length(pc) / values": {}, |
| "margin-top length(pc) / events": {}, |
| "margin-top length(px) / values": {}, |
| "margin-top length(px) / events": {}, |
| "margin-top length(em) / values": {}, |
| "margin-top length(em) / events": {}, |
| "margin-top length(ex) / values": {}, |
| "margin-top length(ex) / events": {}, |
| "margin-top length(mm) / values": {}, |
| "margin-top length(mm) / events": {}, |
| "margin-top length(cm) / values": {}, |
| "margin-top length(cm) / events": {}, |
| "margin-top length(in) / values": {}, |
| "margin-top length(in) / events": {}, |
| "height length(pt) / values": {}, |
| "height length(pt) / events": {}, |
| "height length(pc) / values": {}, |
| "height length(pc) / events": {}, |
| "height length(px) / values": {}, |
| "height length(px) / events": {}, |
| "height length(em) / values": {}, |
| "height length(em) / events": {}, |
| "height length(ex) / values": {}, |
| "height length(ex) / events": {}, |
| "height length(mm) / values": {}, |
| "height length(mm) / events": {}, |
| "height length(cm) / values": {}, |
| "height length(cm) / events": {}, |
| "height length(in) / values": {}, |
| "height length(in) / events": {}, |
| "height percentage(%) / values": {}, |
| "height percentage(%) / events": {}, |
| "width length(pt) / values": {}, |
| "width length(pt) / events": {}, |
| "width length(pc) / values": {}, |
| "width length(pc) / events": {}, |
| "width length(px) / values": {}, |
| "width length(px) / events": {}, |
| "width length(em) / values": {}, |
| "width length(em) / events": {}, |
| "width length(ex) / values": {}, |
| "width length(ex) / events": {}, |
| "width length(mm) / values": {}, |
| "width length(mm) / events": {}, |
| "width length(cm) / values": {}, |
| "width length(cm) / events": {}, |
| "width length(in) / values": {}, |
| "width length(in) / events": {}, |
| "width percentage(%) / values": {}, |
| "width percentage(%) / events": {}, |
| "min-height length(pt) / values": {}, |
| "min-height length(pt) / events": {}, |
| "min-height length(pc) / values": {}, |
| "min-height length(pc) / events": {}, |
| "min-height length(px) / values": {}, |
| "min-height length(px) / events": {}, |
| "min-height length(em) / values": {}, |
| "min-height length(em) / events": {}, |
| "min-height length(ex) / values": {}, |
| "min-height length(ex) / events": {}, |
| "min-height length(mm) / values": {}, |
| "min-height length(mm) / events": {}, |
| "min-height length(cm) / values": {}, |
| "min-height length(cm) / events": {}, |
| "min-height length(in) / values": {}, |
| "min-height length(in) / events": {}, |
| "min-height percentage(%) / values": {}, |
| "min-height percentage(%) / events": {}, |
| "min-width length(pt) / values": {}, |
| "min-width length(pt) / events": {}, |
| "min-width length(pc) / values": {}, |
| "min-width length(pc) / events": {}, |
| "min-width length(px) / values": {}, |
| "min-width length(px) / events": {}, |
| "min-width length(em) / values": {}, |
| "min-width length(em) / events": {}, |
| "min-width length(ex) / values": {}, |
| "min-width length(ex) / events": {}, |
| "min-width length(mm) / values": {}, |
| "min-width length(mm) / events": {}, |
| "min-width length(cm) / values": {}, |
| "min-width length(cm) / events": {}, |
| "min-width length(in) / values": {}, |
| "min-width length(in) / events": {}, |
| "min-width percentage(%) / values": {}, |
| "min-width percentage(%) / events": {}, |
| "max-height length(pt) / values": {}, |
| "max-height length(pt) / events": {}, |
| "max-height length(pc) / values": {}, |
| "max-height length(pc) / events": {}, |
| "max-height length(px) / values": {}, |
| "max-height length(px) / events": {}, |
| "max-height length(em) / values": {}, |
| "max-height length(em) / events": {}, |
| "max-height length(ex) / values": {}, |
| "max-height length(ex) / events": {}, |
| "max-height length(mm) / values": {}, |
| "max-height length(mm) / events": {}, |
| "max-height length(cm) / values": {}, |
| "max-height length(cm) / events": {}, |
| "max-height length(in) / values": {}, |
| "max-height length(in) / events": {}, |
| "max-height percentage(%) / values": {}, |
| "max-height percentage(%) / events": {}, |
| "max-width length(pt) / values": {}, |
| "max-width length(pt) / events": {}, |
| "max-width length(pc) / values": {}, |
| "max-width length(pc) / events": {}, |
| "max-width length(px) / values": {}, |
| "max-width length(px) / events": {}, |
| "max-width length(em) / values": {}, |
| "max-width length(em) / events": {}, |
| "max-width length(ex) / values": {}, |
| "max-width length(ex) / events": {}, |
| "max-width length(mm) / values": {}, |
| "max-width length(mm) / events": {}, |
| "max-width length(cm) / values": {}, |
| "max-width length(cm) / events": {}, |
| "max-width length(in) / values": {}, |
| "max-width length(in) / events": {}, |
| "max-width percentage(%) / values": {}, |
| "max-width percentage(%) / events": {}, |
| "top length(pt) / values": {}, |
| "top length(pt) / events": {}, |
| "top length(pc) / values": {}, |
| "top length(pc) / events": {}, |
| "top length(px) / values": {}, |
| "top length(px) / events": {}, |
| "top length(em) / values": {}, |
| "top length(em) / events": {}, |
| "top length(ex) / values": {}, |
| "top length(ex) / events": {}, |
| "top length(mm) / values": {}, |
| "top length(mm) / events": {}, |
| "top length(cm) / values": {}, |
| "top length(cm) / events": {}, |
| "top length(in) / values": {}, |
| "top length(in) / events": {}, |
| "top percentage(%) / values": {}, |
| "top percentage(%) / events": {}, |
| "right length(pt) / values": {}, |
| "right length(pt) / events": {}, |
| "right length(pc) / values": {}, |
| "right length(pc) / events": {}, |
| "right length(px) / values": {}, |
| "right length(px) / events": {}, |
| "right length(em) / values": {}, |
| "right length(em) / events": {}, |
| "right length(ex) / values": {}, |
| "right length(ex) / events": {}, |
| "right length(mm) / values": {}, |
| "right length(mm) / events": {}, |
| "right length(cm) / values": {}, |
| "right length(cm) / events": {}, |
| "right length(in) / values": {}, |
| "right length(in) / events": {}, |
| "right percentage(%) / values": {}, |
| "right percentage(%) / events": {}, |
| "bottom length(pt) / values": {}, |
| "bottom length(pt) / events": {}, |
| "bottom length(pc) / values": {}, |
| "bottom length(pc) / events": {}, |
| "bottom length(px) / values": {}, |
| "bottom length(px) / events": {}, |
| "bottom length(em) / values": {}, |
| "bottom length(em) / events": {}, |
| "bottom length(ex) / values": {}, |
| "bottom length(ex) / events": {}, |
| "bottom length(mm) / values": {}, |
| "bottom length(mm) / events": {}, |
| "bottom length(cm) / values": {}, |
| "bottom length(cm) / events": {}, |
| "bottom length(in) / values": {}, |
| "bottom length(in) / events": {}, |
| "bottom percentage(%) / values": {}, |
| "bottom percentage(%) / events": {}, |
| "left length(pt) / values": {}, |
| "left length(pt) / events": {}, |
| "left length(pc) / values": {}, |
| "left length(pc) / events": {}, |
| "left length(px) / values": {}, |
| "left length(px) / events": {}, |
| "left length(em) / values": {}, |
| "left length(em) / events": {}, |
| "left length(ex) / values": {}, |
| "left length(ex) / events": {}, |
| "left length(mm) / values": {}, |
| "left length(mm) / events": {}, |
| "left length(cm) / values": {}, |
| "left length(cm) / events": {}, |
| "left length(in) / values": {}, |
| "left length(in) / events": {}, |
| "left percentage(%) / values": {}, |
| "left percentage(%) / events": {}, |
| "color color(rgba) / values": {}, |
| "color color(rgba) / events": {}, |
| "font-size length(pt) / values": {}, |
| "font-size length(pt) / events": {}, |
| "font-size length(pc) / values": {}, |
| "font-size length(pc) / events": {}, |
| "font-size length(px) / values": {}, |
| "font-size length(px) / events": {}, |
| "font-size length(em) / values": {}, |
| "font-size length(em) / events": {}, |
| "font-size length(ex) / values": {}, |
| "font-size length(ex) / events": {}, |
| "font-size length(mm) / values": {}, |
| "font-size length(mm) / events": {}, |
| "font-size length(cm) / values": {}, |
| "font-size length(cm) / events": {}, |
| "font-size length(in) / values": {}, |
| "font-size length(in) / events": {}, |
| "font-size percentage(%) / values": {}, |
| "font-size percentage(%) / events": {}, |
| "font-weight font-weight(keyword) / values": {}, |
| "font-weight font-weight(keyword) / events": {}, |
| "font-weight font-weight(numeric) / values": {}, |
| "font-weight font-weight(numeric) / events": {}, |
| "line-height number(integer) / values": {}, |
| "line-height number(integer) / events": {}, |
| "line-height number(decimal) / values": {}, |
| "line-height number(decimal) / events": {}, |
| "line-height length(pt) / values": {}, |
| "line-height length(pt) / events": {}, |
| "line-height length(pc) / values": {}, |
| "line-height length(pc) / events": {}, |
| "line-height length(px) / values": {}, |
| "line-height length(px) / events": {}, |
| "line-height length(em) / values": {}, |
| "line-height length(em) / events": {}, |
| "line-height length(ex) / values": {}, |
| "line-height length(ex) / events": {}, |
| "line-height length(mm) / values": {}, |
| "line-height length(mm) / events": {}, |
| "line-height length(cm) / values": {}, |
| "line-height length(cm) / events": {}, |
| "line-height length(in) / values": {}, |
| "line-height length(in) / events": {}, |
| "line-height percentage(%) / values": {}, |
| "line-height percentage(%) / events": {}, |
| "letter-spacing length(pt) / values": {}, |
| "letter-spacing length(pt) / events": {}, |
| "letter-spacing length(pc) / values": {}, |
| "letter-spacing length(pc) / events": {}, |
| "letter-spacing length(px) / values": {}, |
| "letter-spacing length(px) / events": {}, |
| "letter-spacing length(em) / values": {}, |
| "letter-spacing length(em) / events": {}, |
| "letter-spacing length(ex) / values": {}, |
| "letter-spacing length(ex) / events": {}, |
| "letter-spacing length(mm) / values": {}, |
| "letter-spacing length(mm) / events": {}, |
| "letter-spacing length(cm) / values": {}, |
| "letter-spacing length(cm) / events": {}, |
| "letter-spacing length(in) / values": {}, |
| "letter-spacing length(in) / events": {}, |
| "word-spacing length(pt) / values": {}, |
| "word-spacing length(pt) / events": {}, |
| "word-spacing length(pc) / values": {}, |
| "word-spacing length(pc) / events": {}, |
| "word-spacing length(px) / values": {}, |
| "word-spacing length(px) / events": {}, |
| "word-spacing length(em) / values": {}, |
| "word-spacing length(em) / events": {}, |
| "word-spacing length(ex) / values": {}, |
| "word-spacing length(ex) / events": {}, |
| "word-spacing length(mm) / values": {}, |
| "word-spacing length(mm) / events": {}, |
| "word-spacing length(cm) / values": {}, |
| "word-spacing length(cm) / events": {}, |
| "word-spacing length(in) / values": {}, |
| "word-spacing length(in) / events": {}, |
| "word-spacing percentage(%) / values": {}, |
| "word-spacing percentage(%) / events": {}, |
| "text-indent length(pt) / values": {}, |
| "text-indent length(pt) / events": {}, |
| "text-indent length(pc) / values": {}, |
| "text-indent length(pc) / events": {}, |
| "text-indent length(px) / values": {}, |
| "text-indent length(px) / events": {}, |
| "text-indent length(em) / values": {}, |
| "text-indent length(em) / events": {}, |
| "text-indent length(ex) / values": {}, |
| "text-indent length(ex) / events": {}, |
| "text-indent length(mm) / values": {}, |
| "text-indent length(mm) / events": {}, |
| "text-indent length(cm) / values": {}, |
| "text-indent length(cm) / events": {}, |
| "text-indent length(in) / values": {}, |
| "text-indent length(in) / events": {}, |
| "text-indent percentage(%) / values": {}, |
| "text-indent percentage(%) / events": {}, |
| "text-shadow shadow(shadow) / values": {}, |
| "text-shadow shadow(shadow) / events": {}, |
| "outline-color color(rgba) / values": {}, |
| "outline-color color(rgba) / events": {}, |
| "outline-offset length(pt) / values": {}, |
| "outline-offset length(pt) / events": {}, |
| "outline-offset length(pc) / values": {}, |
| "outline-offset length(pc) / events": {}, |
| "outline-offset length(px) / values": {}, |
| "outline-offset length(px) / events": {}, |
| "outline-offset length(em) / values": {}, |
| "outline-offset length(em) / events": {}, |
| "outline-offset length(ex) / values": {}, |
| "outline-offset length(ex) / events": {}, |
| "outline-offset length(mm) / values": {}, |
| "outline-offset length(mm) / events": {}, |
| "outline-offset length(cm) / values": {}, |
| "outline-offset length(cm) / events": {}, |
| "outline-offset length(in) / values": {}, |
| "outline-offset length(in) / events": {}, |
| "outline-width length(pt) / values": {}, |
| "outline-width length(pt) / events": {}, |
| "outline-width length(pc) / values": {}, |
| "outline-width length(pc) / events": {}, |
| "outline-width length(px) / values": {}, |
| "outline-width length(px) / events": {}, |
| "outline-width length(em) / values": {}, |
| "outline-width length(em) / events": {}, |
| "outline-width length(ex) / values": {}, |
| "outline-width length(ex) / events": {}, |
| "outline-width length(mm) / values": {}, |
| "outline-width length(mm) / events": {}, |
| "outline-width length(cm) / values": {}, |
| "outline-width length(cm) / events": {}, |
| "outline-width length(in) / values": {}, |
| "outline-width length(in) / events": {}, |
| "clip rectangle(rectangle) / values": {}, |
| "clip rectangle(rectangle) / events": {}, |
| "crop rectangle(rectangle) / values": {}, |
| "crop rectangle(rectangle) / events": {}, |
| "vertical-align length(pt) / values": {}, |
| "vertical-align length(pt) / events": {}, |
| "vertical-align length(pc) / values": {}, |
| "vertical-align length(pc) / events": {}, |
| "vertical-align length(px) / values": {}, |
| "vertical-align length(px) / events": {}, |
| "vertical-align length(em) / values": {}, |
| "vertical-align length(em) / events": {}, |
| "vertical-align length(ex) / values": {}, |
| "vertical-align length(ex) / events": {}, |
| "vertical-align length(mm) / values": {}, |
| "vertical-align length(mm) / events": {}, |
| "vertical-align length(cm) / values": {}, |
| "vertical-align length(cm) / events": {}, |
| "vertical-align length(in) / values": {}, |
| "vertical-align length(in) / events": {}, |
| "vertical-align percentage(%) / values": {}, |
| "vertical-align percentage(%) / events": {}, |
| "opacity number[0,1](zero-to-one) / values": {}, |
| "opacity number[0,1](zero-to-one) / events": {}, |
| "visibility visibility(keyword) / values": {}, |
| "visibility visibility(keyword) / events": {}, |
| "z-index integer(integer) / values": {}, |
| "z-index integer(integer) / events": {} |
| } |
| */</script> |
| </head> |
| <body> |
| <!-- required by testharnessreport.js --> |
| <div id="log"></div> |
| <!-- elements used for testing --> |
| <div id="fixture" class="fixture"> |
| <div class="container"> |
| <div class="transition">Text sample</div> |
| </div> |
| </div> |
| <div id="offscreen"></div> |
| |
| <!-- |
| SEE ./support/README.md for an abstract explanation of the test procedure |
| http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md |
| --> |
| |
| <script> |
| // http://www.w3.org/TR/css3-transitions/#starting |
| // Implementations also must not start a transition when the computed value changes because |
| // it is inherited (directly or indirectly) from another element that is transitioning the same property. |
| // Note: Parent element doesn't transition, so above quote doesn't apply! |
| |
| // this test takes its time, give it a minute to run |
| var timeout = 60000; |
| setup({timeout: timeout}); |
| |
| var tests = getPropertyTests(); |
| // for testing, limit to a couple of iterations |
| // tests = tests.slice(10, 30); |
| // or filter using one of: |
| // tests = filterPropertyTests(tests, "background-color color(rgba)"); |
| // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]); |
| // tests = filterPropertyTests(tests, /^background-color/); |
| |
| // general transition-duration |
| var duration = '0.5s'; |
| |
| runParallelAsyncHarness({ |
| // array of test data |
| tests: tests, |
| // the number of tests to run in parallel |
| testsPerSlice: 50, |
| // milliseconds to wait before calling teardown and ending test |
| duration: parseFloat(duration) * 1000, |
| // the global suite timeout |
| timeout: timeout, |
| // prepare individual test |
| setup: function(data, options) { |
| // clone and overwrite initial styles to be |
| // applied to #transition |
| var inherited = extend({}, data.from); |
| inherited[data.property] = 'inherit'; |
| |
| var styles = { |
| // as we're testing inheritance, #fixture is our new parent |
| '.fixture': data.parentStyle, |
| // all styles including transition apply to to #container so they |
| // can inherit down to #transition |
| '.container': extend({}, data.parentStyle, data.from), |
| '.container.to': data.to, |
| '.container.how': {}, |
| // #transition only inherits and listens for transition events |
| '.transition': inherited, |
| '.transition.to' : {}, |
| '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + duration + ' linear 0s'} |
| }; |
| |
| generalParallelTest.setup(data, options); |
| generalParallelTest.addStyles(data, options, styles); |
| }, |
| // cleanup after individual test |
| teardown: generalParallelTest.teardown, |
| // invoked prior to running a slice of tests |
| sliceStart: generalParallelTest.sliceStart, |
| // invoked after running a slice of tests |
| sliceDone: generalParallelTest.sliceDone, |
| // test cases, make them as granular as possible |
| cases: { |
| // test property values while transitioning |
| // values.start kicks off a transition |
| 'values': { |
| // run actual test, assertions can be used here! |
| start: function(test, data, options) { |
| // identify initial and target values |
| generalParallelTest.getStyle(data); |
| // make sure values differ, if they don't, the property could most likely not be parsed |
| assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match"); |
| // kick off the transition |
| generalParallelTest.startTransition(data); |
| |
| // make sure we didn't get the target value immediately. |
| // If we did, there wouldn't be a transition! |
| var current = data.transition.computedStyle(data.property); |
| assert_not_equals(current, data.transition.to, "must not be target value after start"); |
| }, |
| done: function(test, data, options) { |
| // make sure the property's value were neither initial nor target while transitioning |
| test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition')); |
| } |
| }, |
| // test TransitionEnd events |
| 'events': { |
| done: function(test, data, options) { |
| // make sure there were no events on parent |
| test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', "")); |
| // make sure we got the event for the tested property only |
| test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', addVendorPrefix(data.property) + ":" + duration)); |
| } |
| } |
| }, |
| // called once all tests are done |
| done: generalParallelTest.done |
| }); |
| </script> |
| </body> |
| </html> |
