对测试非继承但继承的 CSS 显示属性感到震惊答案

【问题标题】：Consternation on testing non-inherited-yet-inherited CSS display property对测试非继承但继承的 CSS 显示属性感到震惊
【发布时间】：2021-10-06 10:34:12
【问题描述】：

我在 Angular 中创建了一个模态组件。在单元测试中，模态显示在 DOM 中，如下所示：

但是，我从app-modal2 上的样式开始，其中包括display:none，因此实际呈现的只是模态上方的固定文本——模态的内容被正确省略：

当用户执行调整样式以包含display:block 的操作时，模式的内容就会正确显示。也就是说，代码完全按照我的预期工作。

我对单元测试感到困惑。

那么：为什么我的标题（“Consternation on testing non-inherited-yet-inherited CSS display property”）？

好吧，根据docs，display 属性不会被继承：

使用浏览器开发工具，我确认这是真的：display 属性的后代元素具有除 none 之外的值。因此，即使后代元素受到具有display: none 的祖先的影响，这是因为以祖先为根的子树被删除了——这不被视为继承。好吧，好吧，potayto, potahto... 技术上没有继承，但行为类似。

我的模式的可见性由display 属性控制。根据用户操作将其设置为display: none 或display:block。但这是严格处理可见性，而不是存在。也就是说，#myContent 与 display 值中的任何一个都存在。由于我因此无法测试 #myContent 的存在，因此我必须严格测试可见性。

那么，由于 display 没有被继承，我如何检查某个元素的可见性，由某个祖先的 display 值控制？有没有办法检查任何具有display:none 的祖先？还是有其他方法可以做到这一点？

【问题讨论】：

检查显示属性等不属于测试实施细节的范畴吗？您能否改为通过搜索/查询文本any content here... 的存在来进行测试？或类似stackoverflow.com/a/51291842/5385381
@ksav 好问题，但没有。在我刚刚进行的编辑中，我解释说该内容将始终存在。
我很懊恼地看到我的问题过早地结束了，因为我以为我在问一个明确的问题。啊，语言。尽管如此，我还是改写了它，希望能提高清晰度。 :-)

标签： javascript html css dom jasmine

【解决方案1】：

我发现你的问题很令人不安。我认为这是最难回答的问题之一，因为它直接涉及到级联和继承的核心。

据我所知，显示属性是唯一无法指定（但可以计算）UA 应如何显示的属性。 HTML 标签是预定义的样式，这些样式在 UA 上显示，没有任何 CSS 文件，例如p 元素显示为 inline。

我也用 devtools 测试过；出于非常前端的目的而完全忘记了 JS。（也许我稍后会与 JS 一起检查-第二部分-）。此答案适用于所有受众、新手和经验丰富的开发人员。

在声明将要设置样式之前，我们可能会注意到解析样式表的we have dependencies from the browser（用户代理）。

我们没有定义要设置样式的所有属性，所以当没有定义时，需要设置一个属性和the user agent roles to set a property（不必是它的初始值），there's no official specification on how UA must render websites，这是预期的显示as the stylesheet specifies，根据浏览体验，这通常不太可能发生。

级联

One of the fundamental design principles of CSS is cascading.

用户代理 (UA) 级联什么？元素？特性？对象？

嗯，UA 将 HTML 标记视为元素，这些元素称为 box tree，同样，文本包含在里面一个元素被称为 text node。

由于 CSS 语法及其解析是一个完美级联，如果我们需要弄清楚如何(UA) 必须显示 HTML 文档。 UA 也应用它自己的样式表。这意味着渲染还取决于我们用来指定值的方式（单位），如果我们指定了很多不同的值，例如像素、厘米、百分比、相对单位（em、rem）等，UA 需要解析才能显示的信息越多，这就是为什么应该鼓励前端开发人员使用同质单位执行干净的 css 样式以挤出每一毫秒浏览性能（在移动体验中非常重要）。

继承

When no declarations try to set a the value for an element/property combination. In this case, a value is be found by way of inheritance or by looking at the property’s initial value.

什么叫继承，就是可以继承的css属性（已经建立了）。

所以，如果一个 css 属性看起来是被继承的，那它并不是真正的继承行为，而是级联行为，它的继承取决于指定 css 属性的语法性质。

回答

显示属性不是继承的，但是当none属性设置时，所有后代元素都不会生成任何盒子模型子树或文本节点，（JS可能会强制显示元素以进行测试）。

在 display:none; 的情况下，当 box tree 和 text node 后代被父元素隐藏时，样式none 的应用是通过级联，而不是通过继承。

在下面的例子中，第四个div元素的后代span将背景属性设置为inherit，但是背景不能被继承，这就是为什么@ 987654340@ 元素不显示任何颜色背景。否则，作为第三个div 元素后代的span 将继承color 属性。第四个div 元素有display set: inline;再一次，显示不能被继承，这就是为什么 span 元素不继承该属性并被 UA 显示为block。

*{
  border: 1px solid black;

}

.one {
  display:block;
}

.two {
  
}

.three{

  background:cornsilk;
}

.childthree{
  color:red;
}

span{
  background: inherit;
  position: relative;
  top:80px;
  border: 5px solid black;
  padding: 5px;
  margin:5px;
}

.four{
  display:inline;
}

canvas{
  background:#99e6ff;
}

html {
  padding:1em;
}

<div class="wrapper">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three
    <div class="childthree">I'm a subtree inside the third div<br><span>I'm span tag</span></div>
    </div>
  <div class="four">four<p>i'm a p tag with thext content<span>I'm a span element inside a p element</span></p</p>
  <canvas></canvas>
</div>

【讨论】：

【解决方案2】：

您可以尝试使用 jQuery parent() 方法，并将样式作为第一个参数。

【讨论】：