<!doctype HTML>
<html>
<head>
<title>Parent style='display:block;' below and style='visibility:visible;' below ...</title>
<script type='text/javascript'>
// visibility: visible|hidden|collapse|initial|inherit; // https://www.w3schools.com/cssref/pr_class_visibility.asp
// display: lots of options // https://www.w3schools.com/cssref/pr_class_display.asp
// https://www.w3schools.com/css/css_display_visibility.asp

var visibility = location.search.split('visibility=')[1] ? location.search.split('visibility=')[1].split('&')[0] : 'visible';
var display = location.search.split('display=')[1] ? location.search.split('display=')[1].split('&')[0] : 'block';
var numx = location.search.split('numx=')[1] ? location.search.split('numx=')[1].split('&')[0] : (Math.floor(Math.random() * 7) + 5);
var numy = location.search.split('numy=')[1] ? location.search.split('numy=')[1].split('&')[0] : (Math.floor(Math.random() * 7) + 3);
var inherited = "inline";

function doit() {
var i, j, k, x, m, z;
if (display != "" && visibility != "") document.getElementById('myh1').innerHTML = document.getElementById('myh1').innerHTML + " ... style='display:" + display + ";visibility:" + visibility + ";' " + numx + "x" + numy + " below ...";
if (visibility == "") visibility = "visible";
if (display == "") display = "inline";
for (i=0; i<numy; i++) {
for (j=0; j<numx; j++) {
document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML + "<span style='display:" + display + ";visibility:" + visibility + ";'>Nala: </span><img style='width:115px;height:153px;display:" + display + ";visibility:" + visibility + ";' src='http://www.rjmprogramming.com.au/HTMLCSS/NalaSteps.jpg' title='Nala' />";
}
document.getElementById('mydiv').innerHTML = document.getElementById('mydiv').innerHTML + "<br>";
}
var selih=document.getElementById('display').innerHTML;
var optvals=selih.split("value=");
var seliih=document.getElementById('visibility').innerHTML;
var optivals=seliih.split("value=");
var myk=Math.floor(Math.random() * eval(optvals.length - 2)) + 2;
var myik=Math.floor(Math.random() * eval(optivals.length - 2)) + 2;
for (m=2; m<optivals.length; m++) {
for (k=2; k<optvals.length; k++) {
if (k == myk && m == myik) {
x=optvals[k].replace("'","").replace("'","").replace('"','').replace('"','').split(">");
z=optivals[m].replace("'","").replace("'","").replace('"','').replace('"','').split(">");
document.getElementById('mydiv').style.display = x[0];
document.getElementById('mydiv').style.visibility = z[0];
document.title = "Parent style='display:" + x[0] + ";visibility:" + z[0] + ";' " + numx + "x" + numy + " below ...";
inherited = x[0];
document.body.innerHTML = document.body.innerHTML.replace("value=''", "value='" + x[0] + "'").replace('value=""', 'value="' + x[0] + '"');
document.body.innerHTML = document.body.innerHTML.replace("for the" + " inherited style ...", "for the" + " inherited style='display:" + x[0] + ";' ...");
}
}
}
document.getElementById('display').value = display;
document.getElementById('visibility').value = visibility;
}

</script>
</head>
<body align='center' onload='doit();'>
<div align='center' id='myprediv' style='display:inline;visibility:visible;'>
<h1 align='center' id='myh1'>Style = Display</h1>
<form method='get' action='./styleequalsdisplay.htm'>
<select style='background-color:yellow;' onchange='document.getElementById("submit").click();' name='display' id='display'><option value=''>Please select Style = Display Value below ... or this for the inherited style ...</option>
<option value='block'>block: Element is rendered as a block-level element
<option value='compact'>compact: Element is rendered as a block-level or inline element. Depends on context
<option value='flex'>flex: Element is rendered as a block-level flex box. New in CSS3
<option value='inherit'>inherit: The value of the display property is inherited from parent element
<option value='inline'>inline: Element is rendered as an inline element. This is default
<option value='inline-block'>inline-block: Element is rendered as a block box inside an inline box
<option value='inline-flex'>inline-flex: Element is rendered as a inline-level flex box. New in CSS3
<option value='inline-table'>inline-table: Element is rendered as an inline table (like <table>), with no line break before or after the table
<option value='list-item'>list-item: Element is rendered as a list
<option value='marker'>marker: This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to "inline")
<option value='none'>none: Element will not be displayed
<option value='run-in'>run-in: Element is rendered as block-level or inline element. Depends on context
<option value='table'>table: Element is rendered as a block table (like <table>), with a line break before and after the table
<option value='table-caption'>table-caption: Element is rendered as a table caption (like <caption>)
<option value='table-cell'>table-cell: Element is rendered as a table cell (like <td> and <th>)
<option value='table-column'>table-column: Element is rendered as a column of cells (like <col>)
<option value='table-column-group'>table-column-group: Element is rendered as a group of one or more columns (like <colgroup>)
<option value='table-footer-group'>table-footer-group: Element is rendered as a table footer row (like <tfoot>)
<option value='table-header-group'>table-header-group: Element is rendered as a table header row (like <thead>)
<option value='table-row'>table-row: Element is rendered as a table row (like <tr>)
<option value='table-row-group'>table-row-group: Element is rendered as a group of one or more rows (like <tbody>)
<option value='initial'>initial: Sets this property to its default value. Read about initial
<option value='inherit'>inherit: Inherits this property from its parent element. Read about inherit
</select>
<select style='background-color:yellow;' onchange='document.getElementById("submit").click();' name='visibility' id='visibility'>
<option value=''>Please select Style = Visibility Value below ... or this for the inherited style ...</option>
<option value='visible'>visible</option>
<option value='hidden'>hidden</option>
<option value='collapse'>collapse</option>
<option value='initial'>initial</option>
<option value='inherit'>inherit</option>
</select>
<input type='submit' name='submit' id='submit' value='Show'><br>
</form></div><br><br>
<div align='center' id='mydiv' style='display:block;visibility:visible;'>
</div>
</body>
</html>