display-computed.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Display: getComputedStyle().display</title>
<link rel="author" title="Ethan Jimenez" href="mailto:[email protected]">
<link rel="help" href="https://tabatkins.github.io/specs/css-masonry/#masonry-containers">
<meta name="assert" content="position and float can change display computed value.">
<meta name="assert" content="display computed value is otherwise as specified.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
'use strict';

// https://tabatkins.github.io/specs/css-masonry/#masonry-containers
test_computed_value("display", "masonry");
test_computed_value("display", "inline-masonry");

// https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo
function test_display_affected(property, value) {
  const target = document.getElementById('target');
  test(() => {
    target.style[property] = value;
    target.style.display = 'inline-masonry';
    assert_equals(getComputedStyle(target).display, 'masonry', 'inline-masonry -> masonry');

    target.style[property] = '';
    target.style.display = '';
  }, property + ' ' + value + ' affects computed display');
}

test_display_affected("position", "absolute");
test_display_affected("position", "fixed");
test_display_affected("float", "left");
test_display_affected("float", "right");
</script>
</body>
</html>
chromium/third_party/blink/web_tests/external/wpt/css/css-display/parsing/tentative/display-computed.html
