| <!doctype html> |
| <meta charset="utf-8"> |
| <title>CSSOM: Correct resolution of resolved value for display-affected pseudo-elements</title> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle"> |
| <link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> |
| <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> |
| <script src=/resources/testharness.js></script> |
| <script src=/resources/testharnessreport.js></script> |
| <style> |
| #test { width: 100px; } |
| |
| #contents { |
| display: contents; |
| border: 10px solid red; |
| } |
| |
| #test::before, |
| #test::after, |
| #contents::before, |
| #contents::after { |
| content: " "; |
| width: 50%; |
| height: 10px; |
| display: block; |
| } |
| #none { |
| display: none; |
| } |
| #none::before, |
| #none::after { |
| content: "Foo"; |
| } |
| </style> |
| <div id="test"> |
| <div id="contents"></div> |
| <div id="none"></div> |
| </div> |
| <script> |
| test(function() { |
| var div = document.getElementById('test'); |
| [":before", ":after"].forEach(function(pseudo) { |
| assert_equals(getComputedStyle(div, pseudo).width, "50px"); |
| }); |
| }, "Resolution of width is correct for ::before and ::after pseudo-elements"); |
| test(function() { |
| var contents = document.getElementById('contents'); |
| [":before", ":after"].forEach(function(pseudo) { |
| assert_equals(getComputedStyle(contents, pseudo).width, "50px"); |
| }); |
| }, "Resolution of width is correct for ::before and ::after pseudo-elements of display: contents elements"); |
| test(function() { |
| var has_no_pseudos = document.body; |
| has_no_pseudos.style.position = "relative"; |
| [":before", ":after"].forEach(function(pseudo) { |
| assert_equals(getComputedStyle(has_no_pseudos, pseudo).position, "static", |
| "Nonexistent " + pseudo + " pseudo-element shouldn't claim to have " + |
| "the same style as the originating element"); |
| }); |
| }, "Resolution of nonexistent pseudo-element styles"); |
| test(function() { |
| var none = document.getElementById('none'); |
| [":before", ":after"].forEach(function(pseudo) { |
| assert_equals(getComputedStyle(none, pseudo).content, "\"Foo\"", |
| "Pseudo-styles of display: none elements should be correct"); |
| }); |
| }, "Resolution of pseudo-element styles in display: none elements"); |
| </script> |
